Debug with Source Maps for Javascript

I'm using Browserfiy for front-end development and would like to be able to debug using the generated source map info in WebStorm.  Is this possible?

6 comments

Sure. You don't need to do anything special to debug using sourcemaps - just  create breakpoints in your original files and run your code in  debugger... But your map files have to conform to Source Map Spec (
https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit?hl=en_US), and the generated js file should have the properly formatted //@ sourceMappingURL comment

0

Browserify uses inline source maps, at the end of the file, base64 encoded (I think its v3 compatible, at least Chrome is able to debug into the actual files).  Maybe Webstorm can't handle inline?

0

Not sure if this format is compatible with specification. Please can you provide a sample project (with original .js file and the file(s) generated from it) so that I can see what it looks like?

0

Attached is a sample project.  There is a readme included, but the basics is that Chrome is able to use the source map to debug, but WebStorm is not.



Attachment(s):
webstorm_js_sourcemaps.zip
0

Thanks for update:) Such sourcepaths are not currently supported. I've logged a feature request for inline base64-encoded source maps support, please vote for it: http://youtrack.jetbrains.com/issue/WEB-9232

0

Done -- thanks for creating the issue.

0

Please sign in to leave a comment.