Question

I am using IntelliJ 14.1.4 for creating a JavaScript application. For debugging, I fire up a webserver using Gulp. I then fire up the JavaScript debugging and connect with Chrome (via the plugin). I can debug "normal" JavaScript this way but when using source maps (created by browserify), IntelliJ does not trigger the break points anymore. If I use Chrome's debugging tools, everything works as expected but IntelliJ does not seem to being able to translate its break points.

Is there any way to make this work? I have spent quite some time researching the issue and as far as I understand it, IntelliJ supports source maps. Also, I was able to debug GWT generated JavaScript using this approach which uses source maps, as well.

Update: It seems like there is a current issue for this problem. If any workarround is know, I am happy to hear a solution.

The answer below solves the problem. Here is how I set up my gulp build:

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

with ./build being my build folder and ../src being the root of the JavaScript source files, relative to the build folder.

Answer 1

目前的解决方法是使用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'

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

Enable JavaScript debugging with IntelliJ and source maps

1 个答案: