title: 调试 webpack
sort: 7
contributors:

• skipjack
• tbroadley
• madhavarshney
• bhavya9107
• akaustav
  related:
• title: Learn and Debug webpack with Chrome DevTools!
  url: https://medium.com/webpack/webpack-bits-learn-and-debug-webpack-with-chrome-dev-tools-da1c5b19554
• title: Debugging Guide | Node
  url: https://nodejs.org/en/docs/guides/debugging-getting-started/
• title: Debugging Node.js with Chrome DevTools
  url: https://medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27

调试 webpack

在为核心仓库做贡献、编写 loader/plugin，甚至是在复杂项目上工作时，调试工具都可能是你工作流程的核心。无论问题是大型项目上的性能缓慢，还是无用的 traceback，以下工具都可以让排查问题变得不那么痛苦。

• 通过 Node 和 CLI 提供的 stats 数据。
• Chrome DevTools 和最新的 Node.js 版本。

Stats

无论你是想手动筛选这些数据，还是使用工具来处理它，stats 数据在调试构建问题时都非常有用。我们不会在这里深入介绍，因为已有专门页面介绍其内容，但你需要知道，你可以用它来找到以下信息：

• 每个模块的内容。
• 每个 chunk 中包含的模块。
• 每个模块的编译和解析统计。
• 构建错误和警告。
• 模块之间的关系。
• 以及更多……

此外，官方的 analyze 工具 和其他各种工具 都接受这些数据，并以各种方式将其可视化。

DevTools

虽然 console 语句在简单场景中可能效果不错，但有时需要更强大的解决方案。正如大多数前端开发者已经知道的，Chrome DevTools 在调试 Web 应用时是救星，但它们不必止步于此。从 Node v6.3.0+ 开始，开发者可以使用内置的 --inspect 标志在 DevTools 中调试 Node 程序。

让我们先用 node --inspect 调用 webpack。

请注意，我们不能运行 npm scripts，例如 npm run build，因此我们必须指定完整的 node_modules 路径：

node --inspect ./node_modules/webpack/bin/webpack.js

这应该会输出类似这样的内容：

Debugger listening on ws://127.0.0.1:9229/c624201a-250f-416e-a018-300bbec7be2c
For help see https://nodejs.org/en/docs/inspector

现在在浏览器中打开 chrome://inspect，你应该会在 Remote Target 标题下看到你检查过的任何活动脚本。点击每个脚本下方的 "inspect" 链接以打开专用调试器，或者点击 Open dedicated DevTools for Node 链接，该会话将自动连接。你还可以查看 NiM 扩展，这是一个方便的 Chrome 插件，每当你 --inspect 一个脚本时，它会自动打开一个 DevTools 标签页。

我们建议使用 --inspect-brk 标志，它会在脚本的第一条语句处中断，允许你浏览源代码以设置断点，并可以按照你的需要启动/停止构建。另外，别忘了你仍然可以向脚本传递参数。例如，如果你有多个配置文件，可以传递 --config webpack.prod.js 来指定你想要调试的配置。