详解使用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 相关文章推荐
xmlHTTP实例
Oct 24 Javascript
javascript中简单的进制转换代码实例
Oct 26 Javascript
js 数组操作之pop,push,unshift,splice,shift
Jan 29 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
Oct 15 Javascript
Boostrap入门准备之border box
May 09 Javascript
浅谈Javascript数组(推荐)
May 17 Javascript
React Native实现简单的登录功能(推荐)
Sep 19 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 Javascript
JavaScript实现三级级联特效
Nov 05 Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 Javascript
angular6开发steps步骤条组件
Jul 04 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遍历目录函数opendir()、readdir()、closedir()、rewinddir()总结
2014/11/18 PHP
php生成唯一的订单函数分享
2015/02/02 PHP
PHP数据库编程之MySQL优化策略概述
2017/08/16 PHP
番茄的表单验证类代码修改版
2008/07/18 Javascript
JS array 数组详解
2009/03/22 Javascript
JQuery UI皮肤定制
2009/07/27 Javascript
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
基于jquery的inputlimiter 实现字数限制功能
2010/05/30 Javascript
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
总结几道关于Node.js的面试问题
2017/01/11 Javascript
WebSocket的简单介绍及应用
2019/05/23 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
python正则表达式抓取成语网站
2013/11/20 Python
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
flask 使用 flask_apscheduler 做定时循环任务的实现
2019/12/10 Python
pyqt5 QlistView列表显示的实现示例
2020/03/24 Python
python os模块在系统管理中的应用
2020/06/22 Python
python获取整个网页源码的方法
2020/08/03 Python
使用 css3 实现圆形进度条的示例
2017/07/05 HTML / CSS
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
来自圣地亚哥的实惠太阳镜:Knockaround
2018/08/27 全球购物
英国女装网上商店:I Saw It First
2018/10/18 全球购物
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
军训自我鉴定怎么写
2014/02/13 职场文书
表决心的诗句大全
2014/03/11 职场文书
初中学校军训方案
2014/05/09 职场文书
经理任命书模板
2014/06/06 职场文书
售后客服工作职责
2014/06/16 职场文书
军训通讯稿范文
2015/07/18 职场文书
JavaScript继承的三种方法实例
2021/05/12 Javascript
浅谈@Value和@Bean的执行顺序问题
2021/06/16 Java/Android
基于docker安装zabbix的详细教程
2022/06/05 Servers