在使用诸如SystemJS之类的模块加载器时，在Safari的Web检查器中调试

Question

我正在使用Ionic，es6 modules和TypeScript作为模块加载器来创建SystemJS应用。这是我的设置：

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中进行调试？我正在寻找比“在每个脚本中放入调试器语句”更复杂的解决方案...

Answer 1

写入js文件关键字debugger，并在资源管理器中打开inspect element

当刷新页面和调试模式时...

享受它;-）