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


Debugging in Safari's Web Inspector, when using a module loader like SystemJS

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

tsconfig.json：

1
2
3
4
5
6
7
8
{
 "compilerOptions": {
    ...
   "target":"es5",
   "module":"system",
    ...
  }
}

index.html：

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

示例脚本(TypeScript)：

1
2
3
4
5
import {IConfig} from"./app-config";

export class ConfigLoader {
    ...
}

Chrome一切正常。但是，在使用Safari的Web Inspector进行调试时，我无法在脚本中放置任何断点，因为Web Inspector仅显示直接从HTML(通过脚本标记)加载的脚本，而不显示XHR(在我的情况下是通过SystemJS)加载的脚本。这意味着我无法调试自己的脚本，这当然是不可接受的。

我试图像以前一样通过使用SystemJS来解决此问题，但也将脚本标签放在html中，如下所示：

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

但是，这不起作用，因为SystemJS对此并不满意：

Invalid System.register call. Anonymous System.register calls can only
be made by modules loaded by SystemJS.import and not via script tags.

如何使用SystemJS，同时又可以在Safari中进行调试？我正在寻找比"在每个脚本中放入调试器语句"更复杂的解决方案。

相关讨论

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

例子：

enter image description here
enter image description here
enter image description here

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

WebStorm的一些替代方法：

  • 原子(免费)
  • Intellij IDEA(社区：免费)
  • Visual Studio代码(免费)
  • ...

    • 附言：我使用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

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

    好好享受 ;-)

    相关讨论