Enable JavaScript debugging using IntelliJ and source maps

Question

I am using IntelliJ 14.1.4 to create a JavaScript application. For debugging, I start the web server using Gulp. Then I run JavaScript debugging and connect to Chrome (via the plugin). I can debug "normal" JavaScript this way, but when using the source maps (created using the browser) IntelliJ no longer causes breakpoints. If I use the Chrome debugging tools, everything works as expected, but IntelliJ doesn't seem to be able to translate its breakpoints.

Is there any way to make this work? I spent quite a bit of time studying the problem, and as far as I understand, IntelliJ supports source maps. In addition, I was able to debug the generated JavaScript GWT using this approach, which also uses the source maps.

Update. There seems to be a current issue for this issue . If any desktop is known, I am glad to hear a solution.

---

The answer below solves the problem. This is how I created my gulp construct:

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

c ./build is my build folder, and ../src is the root of the JavaScript source files in relation to the build folder.

Answer 1

The current workaround uses exorcist to create external source maps. You can set a base path for evaluating paths using the -b option, more information in your docs.

As an example, here my observation call is as follows:

 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' 

Remember that plugins and transformers can take strange paths when connected together; if your source maps do not work, make sure that you are viewing or tracking the exit from the path correctly. I once browsed the conclusion "../../js/tests/karma/unit/js/tests/karma/unit/Calculator.spec.ts" instead of "../../js/tests/karma/unit/Calculator.spec.ts" , making my cards useless.