赞助 webpack,同时从官方商店购买衣服 所有收益将转到我们的 open collective

调试

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

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

stats

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

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

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

DevTools

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

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

从 v6.3.0 开始,--inspect 接口就一直可用,因此你可以尝试使用本地版本的 npm 包,但要注意某些功能和标记,可能与这里演示中的全局版本有所不同。

我们先在全局安装:

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 指定你想要调试的配置。


进一步阅读


贡献人员