详解使用Visual Studio Code对Node.js进行断点调试


Posted in Javascript onSeptember 14, 2017

在开发的过程中,几乎不可能一次性就能写出毫无破绽的程序,断点调试代码是一个普遍的需求。

作为前端开发工程师,以往我们开发的JavaScript程序都运行在浏览器端,利用Chrome提供的开发者工具就可以方便的进行源码断点调试。其步骤有四,详情不表,粗略概括如下:

  • 打开Chrome开发者工具;
  • 点击进入Sources标签页,在页面的左侧就能看到JS代码的目录;
  • 找到需要设置断点的源文件,在需要中断的哪行代码左侧单击鼠标左键,就可以设置断点,如果你的代码是uglify过的,则需导入相应的source-map来映射源码。
  • 刷新页面(如果设置断点的位置是一个事件处理函数,则直接触发这个事件即可),代码运行到断点处的时候,程序就会挂起,这时候用鼠标hover就可以查看当前各个变量的数值,并以此判断程序是否正常运行了。

详解使用Visual Studio Code对Node.js进行断点调试

但是,当我们用JavaScript开发运行在服务端的Node.js程序时,Chrome开发者工具暂时派不上用场了。虽然也有办法实现在Chrome上调试,不过这不是今天我们讨论的范围。

还有,说用console.log的那位同学,请你先不要说话...

实际上,许多IDE都集成了Debug的功能,包括较新版本的WebStorm就对Node.js调试支持得很好。

但是很多开发人员会觉得IDE太重,有没有更轻量级一些的工具来实现断点调试呢?今天就要给大家安利一下在VScode上进行断点调试的方法。

详解使用Visual Studio Code对Node.js进行断点调试

VScode除了out-of-box支持JavaScript和TypeScript,还支持Node.js调试,简直就是为前端工程师而生的,对不对...

要调试Node.js的前提是,你的电脑上已经安装了Node.js的环境。

什么?怎么安装Node.js?给你一点小提示:打开百度,搜索【安装Node.js】,好了,不能提示更多了。

本文以调试express应用为例,并假设您已经安装好了Node.js运行环境。

创建express应用

我们使用express-generator创建一个新的express应用。

1.在全局安装express-generator

a.打开终端,输入:

npm install express-generator -g

MacBook用户全局安装的时候记得在前面加上sudo

b.安装完成之后,在终端输入

express -v

如果看到下图所示的信息,说明已经安装成功了。

详解使用Visual Studio Code对Node.js进行断点调试

2.生成express应用目录,假设这个应用的名称为myapp

在终端输入

express myapp

在当前目录就生成了一个myapp目录,目录结构如下:

详解使用Visual Studio Code对Node.js进行断点调试

可以看到,这个小应用已经五脏俱全,有Node服务器配置,公共资源文件夹,师徒文件夹,以及路由配置。

3.运行express应用

a.在终端中输入指令

cd myapp && npm install

就可以进入项目目录并安装所有依赖,这一步可能需要比较长的时间,耐心等待安装完成。

b.然后输入指令

npm start

就可以启动应用。

这时我们在浏览器中访问localhost:3000,即可看到如下页面:

详解使用Visual Studio Code对Node.js进行断点调试

这就说明express应用可以正常运行,接下来我们就可以使用VScode调试代码了。

提示:为了避免调试时的端口冲突,我们先回到刚刚运行express应用的终端,ctrl+c关闭正在运行的express应用。

调试express应用

1.进入VScode界面,点击界面左边的第四个类似虫子的按钮,进入调试界面:

详解使用Visual Studio Code对Node.js进行断点调试

2.点击页面上方“没有配置”下拉菜单,选择“添加配置”。

详解使用Visual Studio Code对Node.js进行断点调试

3.选择Node.js环境。

详解使用Visual Studio Code对Node.js进行断点调试

4.选择完成之后,在项目的根目录中会生成一个.vscode的目录,这个目录中存放了各种各样的VScode编辑器的配置。现在这个目录中就包含了一个文件名为lanuch.json的配置文件,配置文件的内容如下:

详解使用Visual Studio Code对Node.js进行断点调试

其中最重要的配置项就是“Program”字段,这个字段定义了整个应用的入口,开启调试器的时候会从这个入口启动应用。

我们发现当前这个字段已经有值了,不要慌,那是因为VScode在初始化这个配置文件的时候,会查看package.json中是否有包含了键名为start的scripts,如果有的话,就会把start配置的内容作为“program”字段的值。

5.点击开始调试按钮(绿色三角形),就可以开始调试。这时界面上方就会出现一个调试控制的面板,页面右下方会出现一个调试控制台,可以查看你输出的信息,在界面下放会出现一个状态栏,当前的橘黄色表示应用在正常运行,如下图所示:

详解使用Visual Studio Code对Node.js进行断点调试

6.我们再次在浏览中访问localhost:3000,会发现页面可以打开,应用已经正常启动了。

7.接下来我们开始给应用设置断点。我们打开myapp/routes/index.js文件,这个文件配置了应用根路径的路由,当前的处理是返回一个页面,传入字符串"Express"作为视图的参数。

详解使用Visual Studio Code对Node.js进行断点调试

8.我们用鼠标在行号6的左边单击左键,就可以设置一个断点。注意,添加断点之前要先关闭调试,关闭的方法是点击界面上方的调试控制面板中的停止按钮(红色正方形)。

详解使用Visual Studio Code对Node.js进行断点调试

9.设置完断点之后,重新启动调试,然后在浏览器中访问localhost:3000,这时候,断点的形状发生了变化,程序停留在了断点,调试控制面板的按钮也发生了变化,从左到右依次是单步跳过,单步调试,单步跳出,重启,停止调试。这几个都是常见的断点调试指令。设置完断点之后,重新启动调试,然后在浏览器中访问localhost:3000,这时候,断点的形状发生了变化,程序停留在了断点,调试控制面板的按钮也发生了变化,从左到右依次是单步跳过,单步调试,单步跳出,重启,停止调试。这几个都是常见的断点调试指令。

详解使用Visual Studio Code对Node.js进行断点调试

10.在界面的左边,可以查看当前上下文环境,也可以设置变量监听。

详解使用Visual Studio Code对Node.js进行断点调试

11.将鼠标防止在断点前的变量或者参数上,也可以查看该变量当前的数值,体验与Chrome开发者工具的调试一致。

详解使用Visual Studio Code对Node.js进行断点调试

Well,开启VScode的Node.js调试之旅吧!!

那个console.log的同学,你可以说话了...

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

Javascript 相关文章推荐
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
Apr 02 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
Apr 01 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
Dec 25 Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
Oct 28 Javascript
vue路由切换时取消之前的所有请求操作
Sep 01 Javascript
react 父组件与子组件之间的值传递的方法
Sep 14 #Javascript
分分钟学会vue中vuex的应用(入门教程)
Sep 14 #Javascript
JS中跳出循环的示例代码
Sep 14 #Javascript
JS验证码实现代码
Sep 14 #Javascript
快速将Vue项目升级到webpack3的方法步骤
Sep 14 #Javascript
浅谈vue中数据双向绑定的实现原理
Sep 14 #Javascript
JavaScript动态绑定详解
Sep 14 #Javascript
You might like
php生成随机密码的三种方法小结
2010/09/04 PHP
php计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
JS字符串处理实例代码
2013/08/05 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
js实现TAB切换对应不同颜色的代码
2015/08/31 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
javascript基本常用排序算法解析
2017/09/27 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
2019/05/07 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
python3监控CentOS磁盘空间脚本
2018/06/21 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
Python实现FTP文件传输的实例
2019/07/07 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
Oracle的内存结构(Memory structures)
2015/06/10 面试题
大学自我鉴定
2013/12/20 职场文书
酒店总经理助理岗位职责
2014/02/01 职场文书
公司担保书范文
2014/05/21 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
学期个人自我总结
2015/02/13 职场文书
员工试用期工作总结
2019/06/20 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书
Python多线程实用方法以及共享变量资源竞争问题
2022/04/12 Python