在前端开发中，调试是非常重要的一个环节，能够帮助我们快速解决问题并提高工作效率。而 Node.js 平台自带的调试工具 Node Inspector 可以帮助我们进行调试，但是使用起来不太方便。今天介绍一下 npm 包 grunt-node-inspector 的使用，它能够让我们更加方便地使用 Node Inspector 进行调试。
1. 安装 grunt-node-inspector
使用 npm 安装 grunt-node-inspector：
npm install grunt-node-inspector --save-dev
--save-dev 表示安装为开发依赖，因为调试只是在开发阶段用到。
2. 配置 Gruntfile.js
在 Gruntfile.js 中添加以下代码：
-- -------------------- ---- ------- ------------------ ----------------- - ------- - -------- - ----------- ------------ ------------ ----- ----------------- ------ ---------- ------ --------- ------ --------- --- -------------------- --- ---------- --- ----------- --- -------- --- ---------- --- ------------ --- --------- ------ ------- ----- --------- ----- -------------------- -- - - - --展开代码
这里我们使用了 grunt 的配置方式来配置 grunt-node-inspector，其中 options 指定了 Gruntfile.js 的一些配置项，具体含义可以参考官方文档。
3. 添加任务
在 Gruntfile.js 中添加以下代码：
grunt.registerTask('debug', [ 'node-inspector', 'default' ])
这里注册了一个名为 debug 的任务，当 grunt debug 命令执行时会先启动 node-inspector，然后执行默认的任务（如拷贝文件、编译代码等等）。
4. 启动调试
执行命令 grunt debug，grunt-node-inspector 会自动启动 node-inspector 并在浏览器中打开调试页面。在调试页面中我们可以选择需要调试的文件、添加断点等等。下面是一份使用 Express.js 的示例代码：
-- -------------------- ---- ------- --- ------- - ------------------ --- --- - --------- ------------ ------------- ---- - --------------- ------- -- ---------------- ---------- - -------------------- --- --------- -- ---- ------- --展开代码
执行 grunt debug 后，浏览器会打开类似于 http://localhost:8080/debug?port=5858 页面，如下图所示：
我们可以在代码中添加断点，点击 "Resume script execution" 按钮，然后访问 http://localhost:3000，就会看到断点被命中了。
总结
grunt-node-inspector 可以让我们更加方便地使用 Node Inspector 进行调试，它的安装、配置和使用都比较简单。同时也推荐大家深入研究一下 Node Inspector，它是一款非常好的调试工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/74371
