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

Question

我正在使用 IntelliJ 14.1.4 创建 JavaScript 应用程序。为了进行调试，我使用 Gulp 启动了一个网络服务器。然后我启动 JavaScript 调试并连接到 Chrome(通过插件)。我可以通过这种方式调试“普通”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 源文件的根目录，相对于构建文件夹。

Answer 1

当前的解决方法是使用 exorcist生成外部源 map 。您可以设置基本路径以使用 -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'

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