使用 IntelliJ 和源映射启用 JavaScript 调试

Enable JavaScript debugging with IntelliJ and source maps

我正在使用 IntelliJ 14.1.4 创建 JavaScript 应用程序。为了进行调试,我使用 Gulp 启动了一个网络服务器。然后我启动 JavaScript 调试并连接 Chrome(通过插件)。我可以通过这种方式调试 "normal" JavaScript 但是当使用源映射(由 browserify 创建)时,IntelliJ 不再触发断点。如果我使用 Chrome 的调试工具,一切都按预期工作,但 IntelliJ 似乎无法翻译其断点。

有什么方法可以实现吗?我花了很多时间研究这个问题,据我所知,IntelliJ 支持源映射。此外,我还能够使用这种使用源映射的方法来调试生成的 GWT JavaScript。

更新:好像有一个current issue for this problem。如果知道任何解决方法,我很高兴听到解决方案。


下面的答案解决了这个问题。以下是我如何设置 gulp 构建:

bundler.bundle()
    .pipe(exorcist('./build/bundle.js.map', null, null, '../src'))

./build 是我的构建文件夹,../src 是 JavaScript 源文件的根目录,相对于构建文件夹。

当前的解决方法是使用 exorcist 生成外部源映射。您可以设置基本路径以使用 -b 参数评估路径,更多信息在他们的文档中。

例如,我对 watchify 的调用如下所示:

bin/watchify -d -v -p [tsify --target es5] -t debowerify js/tests/karma/**/*.ts -o 'bin/exorcist -b "js/compiled/" js/compiled/tests.js.map > js/compiled/tests.js'

请注意,当管道连接在一起时,插件和转换可能会输出奇怪的路径;如果您的源地图不起作用,请确保 browserify 或 watchify 正确输出路径。我曾经使用 browserify 输出 "../../js/tests/karma/unit/js/tests/karma/unit/Calculator.spec.ts" 而不是 "../../js/tests/karma/unit/Calculator.spec.ts",导致我的地图无用。