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

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

好吧，也许您可​​以将诸如WebStorm之类的 IDE 与强大的Web和Node调试器一起使用。

例子：

您可以在此处查看有关WebStorm调试器的更多信息。

WebStorm的一些替代方法：

1. 原子（免费）
2. Intellij IDEA（社区：免费）
3. Visual Studio代码（免费）
4. ...

PS：我使用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资源管理器

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

好好享受 ;-）