在为核心仓库贡献代码(例如,编写 loader/plugin,又或是在处理复杂的项目)时,调试工具将会成为工作流程的重心。无论问题是大型项目的性能下降还是无用追溯,以下工具都可以使这些问题变得不那么痛苦。
无论你是想手动还是使用工具来筛选这些数据,stats
数据在调试构建的问题时都非常有用。这里我们不会深入,因为有这整个页面专门介绍这些内容,但你应该知道,可以使用它来查找以下信息:
最重要的是,官方分析工具和各种其他分析工具会将这些数据,展示为多种形式的可视化图表。
虽然在简单场景中,可能 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
指定你想要调试的配置。