如何高效调试 webpack 应用程序? [英] How to efficiently debug webpack applications?

问题描述

我正在尝试在我的项目中采用 webpack 开发服务器.我知道它被广泛采用，所以让我惊讶的是调试应用程序似乎非常困难.由于 webpack 默认生成一个巨大的包，因此必须使用源映射.我有一个大问题:

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 by default produces a single giant bundle, source maps are a must. I have a big problem with them:

根据 devtool 模式，源映射要么解析缓慢(eval)，要么不用于映射一些堆栈跟踪(eval-source-map)，例如有时整个堆栈跟踪如下所示:
at eval (eval at http://localhost:8082/js/app.js:2004:2), :43:67).
此外，当您手动调用 console.trace 或 console.error 时，不会映射输出.所以你必须使用像 sourcemapped-stacktrace 这样的工具——这既慢又容易出错.

Depending on devtool mode, source maps are either slow to parse (eval) or not used to map some stack traces (eval-source-map), e.g there are times the entire stack trace looks like this:
at eval (eval at <anonymous> http://localhost:8082/js/app.js:2004:2), <anonymous>:43:67).
Also, when you manually call console.trace or console.error the output is not mapped. So you have to use tools like sourcemapped-stacktrace - this is both slow, and error-prone.

目前我使用 require.js 进行开发，因为它允许我非常轻松地调试应用程序 - 每个堆栈跟踪都指向正确的文件和行.

Currently I use require.js for development because it allows me to debug the application very easily - each and every stack trace points to the correct file and line.

如何使用 webpack 实现相同的结果?

How do I achieve the same result with webpack?

谷歌浏览器中的相关问题:https://code.google.com/p/chromium/issues/detail?id=376409

Firefox 中的相关问题:https://bugzilla.mozilla.org/show_bug.cgi?id=583083

Related issue in firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=583083

推荐答案

您使用哪些开发工具?Millage 可能会有所不同，但 Chrome(和 IE/Edge，是的...IE 和 Edge)倾向于最好地处理源地图.虽然此时所有主要浏览器都支持它们，但我对 Firefox 的体验更差.

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.

我们有非常非常大的包和源映射并没有导致开发工具的任何缓慢.你用的是哪种模式?对于 webpack，使用eval"会做一个内联的源映射来映射文件，而不是源(所以你会看到生成的代码，但与原始文件 1:1 相关).由于很多 ES6、Typescript 和 Coffeescript 结构不能很好地映射(例如:生成器或推导式)，这通常是最容易使用的模式，也是最快的.使用 eval 还可以确保它在 Chrome devtools 中正常工作"，而无需开发人员进行任何操作(您的文件将位于 webpack://伪文件夹下)

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)

对于堆栈跟踪，我不知道是浏览器特定的还是什么.我们使用 Mocha 进行单元测试，它看起来并没有为 sourcemaps 做任何特别的事情，它捕获堆栈跟踪以正确地在测试运行程序的 webpack 上呈现它们(它甚至包括 webpack://前缀以及原始文件名和正确的行号)，那么该库的需求可能是特定于浏览器的还是过时的?

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?

这篇关于如何高效调试 webpack 应用程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！