Debug JavaScript code in Visual Studio bundled wit

Question

I'm new to JS development and experience issues with debugging JS code in Visual Studio 2013. JS part of our web app is bundled into a single app.bundle.js file by WebPack, this file is automatically updated everytime any js file changes (we use special watch script which uses npm).

I'm able to debug JS code using Chrome and debugger; derecitve. It shows correctly mapped file under such kind of paths "webpack:///./Scripts/". It means that WebPack creates mapping correctly. But I'd like to debug directly from VS using Call Stack, break points, etc.

Any ideas?

Thanks in advance!

Answer 1

There is a a series of ongoing issues with Debugging webpack bundles Visual Studio. Depending on your webpack configuration and your dependency versions, this Webpack plugin may work for you. Be sure to check out the issues where can you see the ongoing conversation. If you are doing anything with Babel / ES2015+, you probably will want to upgrade to Visual Studio 2015 for syntax support.