How to debug web applications efficiently?

Question

I am trying to accept the webpack dev server in my project. I know that it is quite widely accepted, so I was surprised that debugging the application seems rather complicated. Since webpack by default creates a single giant package, source maps are required. I have a big problem with them:

Depending on the devtool mode devtool source maps are either slow for parsing ( eval ) or not used to map some stack traces ( eval-source-map ), for example, times when the entire stack trace looks like this:
at eval (eval at <anonymous> http://localhost:8082/js/app.js:2004:2), <anonymous>:43:67) .
In addition, when manually calling console.trace or console.error, the output is not displayed. Therefore, you should use tools like sourcemapped-stacktrace - it is slow and error prone.

I am currently using require.js for development because it allows me to easily debug the application - each stack trace points to the correct file and line.

How to achieve the same result using webpack?

EDIT:
A related issue in google chrome: https://code.google.com/p/chromium/issues/detail?id=376409

Firefox related issue: https://bugzilla.mozilla.org/show_bug.cgi?id=583083

Answer 1

What devtools do you use? Millage may be different, but Chrome (and IE / Edge, yes ... IE and Edge) tend to use sourcemaps best. Although at the moment all major browsers support them, I had the worst experience with Firefox.

We have very large packages, and sourcemaps did not cause slowness in devtools. What mode are you using? For webpack, using "eval" will make a built-in source map that displays the files, but not the source (so you see the generated code, but the ratio is 1: 1 with the source files). Since many ES6, Typescript, and Coffeescript constructors do not display well (for example: generators or understanding methods), this is usually the easiest way to use, as well as the fastest. Using eval, it "just works" in Chrome devtools without any developer action (your files will be under webpack: // pseudo-folder)

For the stack trace, I don't know if this is a specific browser or what. We use Mocha for the unit test, which is not like it does something special for sourcemaps, and it captures stack traces to display them correctly on the test runner web package (it even includes the webpack: // prefix along with the source file name and the correct line number), so maybe the need for this library depends on the browser or is it outdated?

Answer 2

I found it useful to add the npm run watch task, which launches the web package as follows:

webpack -w --devtool eval

This leads to the source cards, which at least have the correct module name. This is somewhat confusing, although the original mapped source is some processing (babel)? So you will see in the source something like:

import react from 'react';

But the name of the actual variable will be changed to _react2 or the like. I would like the displayed source to be a processed version with ugly variable names or for the scope to have definitions, as shown in the mapped source.

The actual line specified in my package.json for the above task:

  "scripts": { // other lines edited out "watch": "node ./node_modules/webpack/bin/webpack.js -w --devtool eval" }