在 Safari 的 Web Inspector 中调试，当使用 SystemJS 等模块加载器时

javascript ecmascript-6 safari systemjs web-inspector

2022-08-30 05:18:26

我正在使用和模块加载器创建应用程序。这是我的设置：Ionices6 modulesTypeScriptSystemJS

tsconfig.json：

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

索引.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 检查器进行调试时，我无法在脚本中放置任何断点，因为 Web 检查器仅显示直接从 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似乎对此并不满意：