javascript - 如何调试 Gulp 任务？

Question

如何使用诸如 Google Chrome 调试器之类的调试器来调试在我的 gulpfile.js 中定义的 gulp 任务，逐行执行任务的代码？

Answer 1

使用 Node.js 6.3+ 版本，您可以使用 --inspect flag运行任务时。

调试名为 css 的 gulp 任务:

1. 找出你的 gulp 可执行文件在哪里。如果 gulp 安装在本地，它将位于 node_modules/.bin/gulp。如果 gulp 已全局安装，请在终端中运行 which gulp (Linux/Mac) 或 where gulp (Windows) 以找到它。

2. 根据您的 Node.js 版本运行这些命令之一。如果需要，请将 ./node_modules/.bin/gulp 替换为步骤 1 中 gulp 安装的路径。

   • Node.js 6.3+:node --inspect --debug-brk ./node_modules/.bin/gulp css
   • Node.js 7+:node --inspect-brk ./node_modules/.bin/gulp css

3. 使用 Chrome 浏览到 chrome://inspect。

--debug-brk (Node.js 6.3+) 和 --inspect-brk (Node.js 7+) 标志用于暂停代码执行在任务的第一行代码上。这让您有机会在任务完成之前打开 Chrome 调试器并设置断点。

如果您不希望调试器在第一行代码处暂停，只需使用 --inspect 标志。

您也可以安装 Node.js Inspector Manager (NIM) Chrome 的扩展程序以帮助完成第 3 步。这将自动打开一个 Chrome 选项卡，调试器准备就绪，作为手动浏览到 URL 的替代方法。