chrome下的Grunt插件断点调试——基于node-inspector

简介:

之前调试grunt插件时,都是通过人肉打log来调试。不仅效率低,而且会产生一堆无用的代码。于是简单google了下node断点调试的方法,总结了下。

借助node-inspector,我们可以通过Chrome浏览器的调试工具来调试。

一、安装node-inspector

npm install -g node-inspector

 

二、监听Nodejs的debug调试端口

node-inspector &

见到输出下面log,http://127.0.0.1:8080/debug?port=5858 很关键,后面我们会用到

[1] 2123
casperchenMacBookPro:demo casperchen$ Node Inspector v0.6.1
   info  - socket.io started
Visit http://127.0.0.1:8080/debug?port=5858 to start debugging.

三、调试grunt任务

输入如下命令,将task替换成你要运行的命令

node --debug-brk $(which grunt) task

得到如下输出,说明grunt已经进入调试模式

debugger listening on port 5858

将上一步的http://127.0.0.1:8080/debug?port=5858帖到地址栏,回车,如果你看到下面场景,恭喜~

Alt text

 

补充:2014.02.12

三、windows下调试 

之前写这篇博文是在mac上做的调试,当回到公司日常开发用的机器上就傻眼了,因为用的是windows系统。瞎倒腾了一下,改成下面命令也勉强可用

"c:\Program Files\nodejs\node.exe" --debug-brk C:\Users\casperchen\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt task

简单介绍下上面的命令,由于对dos命令是睁眼瞎,求路过的兄弟优化~

复制代码
"c:\Program Files\nodejs\node.exe" # node的安装路径

--debug-brk # 表示要进入调试模式,且在第一行断点

C:\Users\casperchen\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt # grunt的安装路径

task # grunt路径
复制代码

 

相关文章
|
1月前
|
Web App开发 JSON 前端开发
30个Chrome 灵魂插件!
30个Chrome 灵魂插件!
|
1月前
|
Web App开发 前端开发 JavaScript
手摸手教你,从0到1开发一个Chrome浏览器插件
开发 Chrome 插件既有趣又具成就感。本教程将引导你从零开始,逐步创建一个简单的 Chrome 插件。首先了解 Chrome 插件是可增强浏览器功能的小程序。以一个基础示例开始,你将学习如何设置开发环境,包括安装 Chrome 和准备文本编辑器,并掌握 HTML、CSS 和 JavaScript 的基础知识。接着,我们将构建插件的基本结构,涉及 `manifest.json` 配置文件、`background.js` 后台脚本、`popup.html` 用户界面以及 `style.css` 样式表。
174 8
|
1月前
|
Web App开发
Chrome 护眼模式 - 黑暗模式 - 夜眼(Night Eye) 插件
Chrome 护眼模式 - 黑暗模式 - 夜眼(Night Eye) 插件
33 0
Chrome 护眼模式 - 黑暗模式 - 夜眼(Night Eye) 插件
|
2月前
|
Web App开发 JavaScript 前端开发
Chrome插件实现问题之最新的 Chrome 浏览器架构有什么新的改变吗
Chrome插件实现问题之最新的 Chrome 浏览器架构有什么新的改变吗
|
2月前
|
JavaScript 前端开发 Web App开发
Chrome插件实现问题之单进程浏览器的不稳定主要体现在什么地方
Chrome插件实现问题之单进程浏览器的不稳定主要体现在什么地方
|
2月前
|
Web App开发 数据可视化 前端开发
Chrome插件实现问题之content-scripts能访问哪些Chrome API
Chrome插件实现问题之content-scripts能访问哪些Chrome API
|
2月前
|
Web App开发 前端开发 JavaScript
Chrome插件实现问题之用户在浏览器中输入URL后,浏览器进程会进行什么操作
Chrome插件实现问题之用户在浏览器中输入URL后,浏览器进程会进行什么操作
|
2月前
|
Web App开发 JavaScript 前端开发
Chrome插件实现问题之在Manifest V2中,设置插件的图标要如何解决
Chrome插件实现问题之在Manifest V2中,设置插件的图标要如何解决
|
2月前
|
缓存 安全 Web App开发
Chrome插件实现问题之网络进程接收到URL请求后会如何解决
Chrome插件实现问题之网络进程接收到URL请求后会如何解决
|
2月前
|
Web App开发 存储 JavaScript
Chrome插件实现问题之Manifest V2切换MV3会带来什么问题,如何解决
Chrome插件实现问题之Manifest V2切换MV3会带来什么问题,如何解决