Enable JavaScript debugging with IntelliJ and source maps

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.

this did not work for me. If I checked the scripts tag in the debugger in webstorm, it shows the scripts and the urls seen there actually work also in the browser. (.bundle().pipe(exorcist('./dist/bundle.js.map', null, "/src", ".")) is my call). But the breakpoints are never hit. I use the internal server from WebStorm. — thst
– thst, Commented Jan 2, 2016 at 17:25

gCardinal · Accepted Answer · 2015-07-17 20:42:10Z

2

The current workaround is to use exorcist to generate external source maps. You can set the base path to evaluate paths from with the -b parameter, more info in their docs.

As an example, here's what my call to watchify looks like:

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'

Be aware that plugins and transforms might output weird paths when piped together; if your sourcemaps don't work, make sure browserify or watchify output the path properly. I once had browserify output "../../js/tests/karma/unit/js/tests/karma/unit/Calculator.spec.ts" instead of "../../js/tests/karma/unit/Calculator.spec.ts", causing my maps to be useless.

edited Jul 17, 2015 at 20:42

answered Jul 17, 2015 at 17:48

gCardinal

6762 gold badges9 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Enable JavaScript debugging with IntelliJ and source maps

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related