SystemJS와 같은 모듈 로더를 사용할 때 Safari의 Web Inspector에서 디버깅

, 및 모듈 로더를 Ionic사용하여 앱을 만들고 있습니다. 이것은 내 설정입니다.es6 modulesTypeScriptSystemJS

tsconfig.json :

{
  "compilerOptions": {
    ...
    "target": "es5",
    "module": "system",
    ...
  }
}

index.html :

<script src="lib/system.js"></script>
<script src="systemjs.config.js"></script>
<script>System.import('js/app.js')</script>

예제 스크립트 (TypeScript) :

import {IConfig} from "./app-config";

export class ConfigLoader {
    ...
}

모든 것이 Chrome에서 훌륭하게 실행됩니다. 그러나 Safari의 Web Inspector를 사용하여 디버깅 할 때 Web Inspector는 HTML에서 직접로드 된 스크립트 (스크립트 태그를 통해) 만 표시하고 XHR (내 경우에는 SystemJS)에서로드 한 스크립트 만 표시하기 때문에 스크립트에 중단 점을 배치 할 수 없습니다. . 이것은 당연히 받아 들일 수없는 내 스크립트를 디버깅 할 수 없음을 의미합니다.

이전과 같이 SystemJS를 사용하여이 문제를 해결하려고 시도했지만 다음과 같이 html에 스크립트 태그를 배치했습니다.

<script src="lib/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="js/app-config.js"></script>
 ... other app scripts
<script>System.import('js/app.js')</script>

그러나 SystemJS가 이것에 대해 만족하지 않기 때문에 이것은 작동하지 않습니다.

System.register 호출이 잘못되었습니다. 익명의 System.register 호출은 스크립트 태그가 아닌 SystemJS.import에 의해로드 된 모듈에 의해서만 가능합니다.

SystemJS를 어떻게 사용하고 동시에 Safari에서 디버깅 할 수 있습니까? '각 스크립트에 디버거 문을 넣는 것'보다 조금 더 정교한 솔루션을 찾고 있습니다.

글쎄, 아마도 WebStorm 과 같은 IDE를 강력한 웹 및 노드 용 디버거와 함께 사용할 수 있습니다 .

예 :

여기에서 WebStorm 디버거에 대한 자세한 내용을 볼 수 있습니다 .

WebStorm의 몇 가지 대안 :

1. 아톰 (무료)
2. Intellij IDEA (커뮤니티 : 무료)
3. Visual Studio Code (무료)
4. ...

추신 : WebStorm : D로 Ionic 및 React 앱을 개발합니다.

당신은 같은 원격 디버거를 사용으로 봤어 https://github.com/google/ios-webkit-debug-proxy .

또한 ghostlab이 있습니다. 여기에 https://css-tricks.com/using-chrome-devtools-to-debug-javascript-in-any-browser-with-ghostlab-2/ 시작에 대한 멋진 기사가 있습니다.

js 파일 키워드에 쓰고 탐색기로 debugger열기inspect element

페이지를 새로 고침하고 모드를 디버깅 할 때 ...

그것을 즐기십시오 ;-)