调试

在为核心仓库贡献代码,编写 loader/plugin,又或是处理复杂的项目时,调试工具将会成为工作流程的重心。无论问题是大型项目的性能下降还是无用追溯,以下工具都可以使这些问题变得不那么痛苦。

  • NodeCLI 提供的 stats 数据
  • node-nightly 和 Node.js 最新版本提供的 Chrome DevTools

Stats

无论你是想手动还是使用工具来筛选 这些数据stats 数据在调试构建的问题时都非常有用。我们不会在此处深入介绍,请参阅 此页面 以了解详细内容。但应该知道可以使用它来查找以下信息:

  • 每个模块的内容。
  • 每个 chunk 中包含的模块。
  • 每个模块编译(compilation)和解析的 stats。
  • 构建错误和警告。
  • 模块之间的关系。
  • 其他更多……

最重要的是,官方分析工具各种其他分析工具 会将这些数据展示为多种形式的可视化图表。

DevTools

虽然在简单场景中,可能 console 语句会表现良好,然而有时还需要更加强大的解决方案。正如大多数前端开发人员已经知道的,将 Chrome DevTools 用在调试 web 应用程序,是一个能够解救我们的实用工具,但它并没有局限于调试 web 应用程序。从 Node v6.3.0+ 开始,开发人员可以使用内置的 --inspect 标记以使用 DevTools 调试 Node.js 应用程序。

这可以帮助轻松创建断点、调试内存使用情况、在控制台中暴露和检查对象等。在这个简短的演示中,我们将利用 node-nightly 包,它提供最新和强大的检测能力。

首先在全局安装:

npm install --global node-nightly

现在,需要运行一次以结束安装:

node-nightly

现在,我们可以直接使用带有 --inspect 标记的 node-nightly,在任何基于 webpack 的项目中开始构建。注意,我们不应该运行 NPM scripts,例如 npm run build,所以需要指定完整的 node_modules 路径:

node-nightly --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)的活动脚本。单击每个脚本下自动连接会话的“inspect”链接,会打开一个专门用于 debugger 或 Open dedicated DevTools for Node 链接。除此之外还可以看到 NiM 扩展程序,这是一个方便的 Chrome 插件。每当通过 --inspect 调试某个脚本时,都会自动打开 DevTools 标签页。

我们推荐使用 --inspect-brk 标记,此标记将在脚本的第一条语句处断开,以便你可以在源代码中设置断点,并根据需要启动/停止构建。此外不要忘记仍然可以向脚本传递参数。例如,如果你有多个配置文件,你可以通过 --config webpack.prod.js 指定想要调试的配置。

5 位贡献者

skipjacktbroadleymadhavarshneybhavya9107akaustav