调试

在为核心仓库贡献代码、编写 loader/plugin，甚至处理一个复杂项目时，调试工具可能成为你工作流程的核心。无论是大型项目中的性能问题还是无益的堆栈跟踪，以下实用工具都能让你轻松解决问题。

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

统计信息

无论是想手动筛选这些数据，还是使用工具处理它们，stats 数据在调试构建问题时都非常有用。我们在这里不深入探讨，因为有专门的页面详细介绍了其内容，但请注意，你可以使用它来查找以下信息：

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

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

开发工具

虽然 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://node.org.cn/en/docs/inspector

现在在浏览器中跳转到 chrome://inspect，你应该会在“远程目标”标题下看到所有已检查的活动脚本。点击每个脚本下的“检查”链接以打开一个专用调试器，或者点击“打开 Node 专用 DevTools”链接以连接一个自动连接的会话。你还可以查看 NiM 扩展，这是一个方便的 Chrome 插件，每次你 --inspect 一个脚本时，它都会自动打开一个 DevTools 标签页。

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