调试

在为核心仓库贡献代码、编写加载器/插件，甚至在处理复杂项目时，调试工具可能是工作流程的核心。无论是大型项目上的性能缓慢问题，还是无用的回溯，以下工具可以使解决问题变得不那么痛苦。

• 通过 stats 数据，可通过 Node 和 CLI 获得。
• Chrome 开发者工具 和最新的 Node.js 版本。

统计信息

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

• 每个模块的内容。
• 每个块中包含的模块。
• 每个模块的编译和解析统计信息。
• 构建错误和警告。
• 模块之间的关系。
• 等等...

最重要的是，官方的 分析工具 和 其他各种工具 将接受这些数据并以各种方式将其可视化。

开发者工具

虽然 console 语句在简单的情况下可能效果很好，但有时需要更强大的解决方案。正如大多数前端开发人员已经知道的那样，Chrome 开发者工具在调试 Web 应用程序时非常有用，但它们不必止步于此。从 Node v6.3.0+ 开始，开发人员可以使用内置的 --inspect 标志在开发者工具中调试 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来指定要调试的配置。