在使用像SystemJS这样的模块加载器时，如何在Safari的Web Inspector中进行调试

Question

我正在使用es6模块、TypeScript和SystemJS作为模块加载器创建一个Ionic应用程序。这是我的设置：

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

- fikkatra

---

这可能听起来是一个奇怪的建议，而且问题自1月11日以来一直存在，但我建议你可能要深入了解webpack。我一直在研究SystemJS，但我觉得它可能无法满足你的需求。 - DevNebulae

可能是在JavaScript中动态设置断点的重复问题。 - Paul Sweatte

可能是如何在浏览器的调试器中调试动态加载的JavaScript（带有jQuery）？的重复问题。 - Mikayla Maki

使用 debugger 关键字进行 JavaScript 调试。 - Kamil Kiełczewski

@KamilKiełczewski 这个问题明确说明了“我正在寻找比‘在每个脚本中放置调试器语句’更复杂的解决方案……” - fikkatra

Answer 1

嗯，也许你可以使用像WebStorm这样的集成开发环境，它具有强大的 Web 和 Node 调试器。

示例：

您可以在此处了解更多关于WebStorm调试器的信息。

WebStorm的一些替代品：

1. Atom（免费）
2. Intellij IDEA（社区版：免费）
3. Visual Studio Code（免费）
4. ...

P.S：我使用WebStorm开发Ionic和React应用程序:D

- Jorge Olaf

---

我一直在尝试使用Webstorm，但是由于VS Code的扩展系统提供了许多有用的功能，而这些功能Webstorm并没有，所以很难转换过来。 - Stephen M Irving

Answer 2

你有考虑过使用远程调试器吗，比如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/

- rexfordkelly