2

Is there a way to debug a bundled javascript in WebStorm setting breakpoints in the files that are source for bundling, instead of the bundle itself?

I use browserify as bundling package, but I can consider using other ones. The only limitation is that I use grunt as a task runner. Seems there is something that could be a solution here, but it us for gulp. There mentioned vinyl-source-stream as a part of the solution, but I am not sure if it is worth trying with grunt.

What I tried is

  • using browserify: { options: { debug: true; } }
  • using mold-source-map and some other related things found here on SO
  • using uglify as source map generator
  • some other things that are not worth mentioning

Any one- or two-step things I tried just did not work.

Seems it is too sophisticated to search the way consciously, only try-and-error would work, but I don't have enough time for it.

What I hope to find is a working example of the web storm project where I can set a breakpoint in source js before debugging. But any hint or direction would be appreciated.

Well, if nobody helps me and I find the solution later, I'll surely blog it out as step-by-step instruction. But I am not sure that this is possible due to people who understand more than me in browser debugging told that source map cannot be generated so as to point to the files other that actually executing in browser js engine. So the answer with more detailed explanation why it is not possible can also be accepted.

Community
  • 1
  • 1
moudrick
  • 2,148
  • 1
  • 22
  • 34
  • see http://stackoverflow.com/questions/23949262/generating-source-maps-from-browserify-using-grunt - does any of mentioned solutions help? – lena Feb 13 '15 at 18:17
  • Started my search with them. They don't. Even looks like prevent debugging from WebStorm even bundle. I could not set breakpoints there so I had to turn off those options to get the bundle debugging back. Nevertheless, the breakpoints in non-bundles source javascript do not work. – moudrick Feb 13 '15 at 19:28
  • To continue the struggle. All of mentioned solutions suppose setting debug to true. this makes sourceMappingUrl appear at the bottom of my bundle. Once it is present, it and leads to the error `Failed to load resource: the server responded with a status of 404 (Not Found)`. I can attach the screenshots of such behavior. – moudrick Feb 16 '15 at 11:30
  • This error is mentioned at the following link, but no suitable solution found there. * http://stackoverflow.com/questions/19769069/webstorm-7-yeoman-angular-missing-sourcemaps-failed-to-load-resource-the-ser * http://stackoverflow.com/questions/20727802/jetbrains-webstorm-debugger-doesnt-work-since-upgrading-for-7-0-1-and-7-0-2 – moudrick Feb 16 '15 at 11:33
  • If the messages refer to missing map files, they can just be ignored. See the answer there: "These messages are just the debug output: the Jetbrains IDE Chrome extension checks for presence of js.map files, and, if not found, prints a message. The reason for this checking is that some tools used to compress/transpile code don't generate required //sourceMapUrl comment the debugger needs to locate sourcemaps, so it checks some default locations for maps presence. So, these messages don't indicate any errors and don't do any harm, they can be safely ignored. " – lena Feb 16 '15 at 12:45

0 Answers0