浅谈Node 调试工具入门教程


Posted in Javascript onMarch 20, 2018

JavaScript 程序越来越复杂,调试工具的重要性日益凸显。客户端脚本有浏览器,Node 脚本怎么调试呢?

浅谈Node 调试工具入门教程

2016年,Node 决定将 Chrome 浏览器的"开发者工具"作为官方的调试工具,使得 Node 脚本也可以使用图形界面调试,这大大方便了开发者。

本文介绍如何使用 Node 脚本的调试工具。

一、示例程序

为了方便讲解,下面是一个示例脚本。首先,新建一个工作目录,并进入该目录。

$ mkdir debug-demo
$ cd debug-demo

然后,生成 package.json 文件,并安装Koa 框架和 koa-route 模块。

$ npm init -y
$ npm install --save koa koa-route

接着,新建一个脚本 app.js ,并写入下面的内容。

// app.js
const Koa = require('koa');
const router = require('koa-route');

const app = new Koa();

const main = ctx => {
 ctx.response.body = 'Hello World';
};

const welcome = (ctx, name) => {
 ctx.response.body = 'Hello ' + name;
};

app.use(router.get('/', main));
app.use(router.get('/:name', welcome));

app.listen(3000);
console.log('listening on port 3000');

上面代码是一个简单的 Web 应用,指定了两个路由,访问后会显示一行欢迎信息。如果想详细了解代码的详细含义,可以参考Koa 教程。

二、启动开发者工具

现在,运行上面的脚本。

$ node --inspect app.js

上面代码中, --inspect 参数是启动调试模式必需的。这时,打开浏览器访问 http://127.0.0.1//3000,就可以看到 Hello World 了。

浅谈Node 调试工具入门教程

接下来,就要开始调试了。一共有两种打开调试工具的方法,第一种是在 Chrome 浏览器的地址栏,键入 chrome://inspect 或者 about:inspect ,回车后就可以看到下面的界面。

浅谈Node 调试工具入门教程

在 Target 部分,点击 inspect 链接,就能进入调试工具了。

第二种进入调试工具的方法,是在 http://127.0.0.1//3000 的窗口打开"开发者工具",顶部左上角有一个 Node 的绿色标志,点击就可以进入。

浅谈Node 调试工具入门教程

三、调试工具窗口

调试工具其实就是"开发者工具"的定制版,省去了那些对服务器脚本没用的部分。

它主要有四个面板。

  1. Console:控制台
  2. Memory:内存
  3. Profiler:性能
  4. Sources:源码

浅谈Node 调试工具入门教程

这些面板的用法,基本上跟浏览器环境差不多,这里只介绍 Sources (源码)面板。

四、设置断点

进入 Sources 面板,找到正在运行的脚本 app.js

浅谈Node 调试工具入门教程

在第11行(也就是下面这一行)的行号上点一下,就设置了一个断点。

ctx.response.body = 'Hello ' + name;

浅谈Node 调试工具入门教程

这时,浏览器访问 http://127.0.0.1:3000/alice ,页面会显示正在等待服务器返回。切换到调试工具,可以看到 Node 主线程处于暂停(paused)阶段。

浅谈Node 调试工具入门教程

进入 Console 面板,输入 name,会返回 alice。这表明我们正处在断点处的上下文(context)。

浅谈Node 调试工具入门教程

再切回 Sources 面板,右侧可以看到 Watch、Call Stack、Scope、Breakpoints 等折叠项。打开 Scope 折叠项,可以看到 Local 作用域和 Global 作用域里面的所有变量。

Local 作用域里面,变量 name 的值是 alice ,双击进入编辑状态,把它改成 bob

浅谈Node 调试工具入门教程

然后,点击顶部工具栏的继续运行按钮。

浅谈Node 调试工具入门教程

页面上就可以看到 Hello bob 了。

浅谈Node 调试工具入门教程

命令行下,按下 ctrl + c,终止运行 app.js

五、调试非服务脚本

Web 服务脚本会一直在后台运行,但是大部分脚本只是处理某个任务,运行完就会终止。这时,你可能根本没有时间打开调试工具。等你打开了,脚本早就结束运行了。这时怎么调试呢?

$ node --inspect=9229 -e "setTimeout(function() { console.log('yes'); }, 30000)"

上面代码中, --inspect=9229 指定调试端口为 9229,这是调试工具默认的通信端口。 -e 参数指定一个字符串,作为代码运行。

访问 chrome://inspect ,就可以进入调试工具,调试这段代码了。

浅谈Node 调试工具入门教程

代码放在 setTimeout 里面,总是不太方便。那些运行时间较短的脚本,可能根本来不及打开调试工具。这时就要使用下面的方法。

$ node --inspect-brk=9229 app.js

上面代码中, --inspect-brk 指定在第一行就设置断点。也就是说,一开始运行,就是暂停的状态。

六、忘了写 --inspect 怎么办?

打开调试工具的前提是,启动 Node 脚本时就加上 --inspect 参数。如果忘了这个参数,还能不能调试呢?

回答是可以的。首先,正常启动脚本。

$ node app.js

然后,在另一个命令行窗口,查找上面脚本的进程号。

$ ps ax | grep app.js 

30464 pts/11  Sl+  0:00 node app.js
30541 pts/12  S+   0:00 grep app.js

上面命令中, app.js 的进程号是 30464

接着,运行下面的命令。

$ node -e 'process._debugProcess(30464)'

上面命令会建立进程 30464 与调试工具的连接,然后就可以打开调试工具了。

还有一种方法,就是向脚本进程发送 SIGUSR1 信号,也可以建立调试连接。

$ kill -SIGUSR1 30464

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript与flash交互通信基础教程
Aug 07 Javascript
js模拟类继承小例子
Jul 17 Javascript
js自定义事件代码说明
Jan 31 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
js+jquery常用知识点汇总
Mar 03 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
Oct 30 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
AngularJS入门示例之Hello World详解
Jan 04 Javascript
php register_shutdown_function函数详解
Jul 23 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
Aug 08 Javascript
JS跨域请求的问题解析
Dec 03 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
Mar 20 #Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 #jQuery
关于vue面试题汇总
Mar 20 #Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
Mar 20 #Javascript
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 #Javascript
解决vue-cli + webpack 新建项目出错的问题
Mar 20 #Javascript
p5.js入门教程之图片加载
Mar 20 #Javascript
You might like
PHPShop存在多个安全漏洞
2006/10/09 PHP
ajax 的post方法实例(带循环)
2011/07/04 PHP
php MessagePack介绍
2013/10/06 PHP
php中生成随机密码的自定义函数代码
2013/10/21 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
安装docker和docker-compose实例详解
2019/07/30 PHP
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
vue不通过路由直接获取url中参数的方法示例
2017/08/24 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
vue elementui form表单验证的实现
2018/11/11 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
讲解python参数和作用域的使用
2013/11/01 Python
简单的编程0基础下Python入门指引
2015/04/01 Python
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
Python3爬虫学习入门教程
2018/12/11 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
linux环境中没有网络怎么下载python
2019/07/07 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
高中综合实践活动总结
2014/07/07 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
总经理检讨书范文
2015/02/16 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书
golang操作rocketmq的示例代码
2022/04/06 Golang