CODEWITHSUNDEEP
javascriptintellij-ideabrowserifysource-maps
Rafael Winterhalter
Rafael Winterhalter

Reputation: 43972

Enable JavaScript debugging with IntelliJ and source maps

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.

Upvotes: 8

Views: 3344

Answers (1)

gCardinal
gCardinal

Reputation: 676

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.

Upvotes: 2

Related Questions