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.
答案 0 :(得分:2)
目前的解决方法是使用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"
,导致我的地图无用。