How to efficiently debug webpack applications?

Question

I am trying to adopt webpack dev server in my project. I know it\'s quite widely adopted, so it surprised me that debugging the application seems to be quite hard. Since webpack

Answer 1

Which devtools do you use? Millage may vary, but Chrome (and IE/Edge, yes...IE and Edge) tend to handle sourcemaps the best. While at this point all the major browsers support them, I've had the worse experience with Firefox.

We have very very large bundles and sourcemaps have not caused any slowness in devtools. Which mode are you using? For webpack, using "eval" will do an inline sourcemap that maps files, but not source (so you see the generated code, but 1:1 correlation with the original files). Since a lot of ES6, Typescript and Coffeescript constructs don't map well (eg: generators or comprehensions), this is usually the easiest mode to use, and is also the fastest. Using eval alsoensure it "just works" in Chrome devtools without any action from the developer (your files will be under the webpack:// pseudo-folder)

For the stack trace, I don't know if it is browser specific or what. We use Mocha for unit test, which doesn't look like it's doing anything special for sourcemaps, and it captures stack traces to render them on the test runner's webpack properly (it even includes the webpack:// prefix along with the original file name and proper line number), so maybe the need for that library is browser specific or outdated?