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

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

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

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

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

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

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

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 如果看到下图所示的信息,说明已经安装成功了。

2.生成express应用目录,假设这个应用的名称为myapp 在终端输入 express myapp 在当前目录就生成了一个myapp目录,目录结构如下:

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

3.运行express应用

a.在终端中输入指令

`cd myapp && npm install`

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

b.然后输入指令

`npm start`

就可以启动应用。

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

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

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

调试express应用

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

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

3.选择Node.js环境。

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

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

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

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

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

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

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

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

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

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

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

转自:https://cnodejs.org/topic/58f376fec749f63d48fe9548

vscode 调试node.js的更多相关文章

  1. 用node-inspector调试Node.js(转自NOANYLOVE'S BLOG)

    原文地址:http://www.noanylove.com/2011/12/node-the-inspector-debugging-node-js/ 用node-inspector调试Node.js ...

  2. 使用Chrome DevTools直接调试Node.js与JavaScript(并行)

    Good News: 现在我们可以用浏览器调试node.js了!!! 前提 Node.js 6.3+, 这个可上Node.js官网自行下载: Chrome 55+. 如果您本地的chrome升级到最新 ...

  3. 调试 node.js 程序

    调试 node.js 程序 在程序开发中,如何快速的查找定位问题是一项非常重要的基本功.在实际开发过程中,或多或少都会遇到程序出现问题导致无法正常运行的情况,因此,调试代码就变成了一项无法避免的工作. ...

  4. centos 下使用vscode 调试egg.js 注意事项

    这两天在centos下,直接用vscode运行egg.js的例子.遇到个问题就是当安装了vscode-egg插件,会遇到一个现象.就是同样的代码,Windows下调试可以顺利进行,但是centos有时 ...

  5. 【译】在 Chrome 开发者工具中调试 node.js

    原文链接 : Debugging Node.js in Chrome DevTools 原文作者 : MATT DESLAURIERS 译文出自 : 掘金翻译计划 译文链接 : https://git ...

  6. 使用 node-inspector 调试 Node.js

    大部分基于 Node.js 的应用都是执行在浏览器中的, 比如强大的调试工具 node-inspector. node-inspector 是一个全然基于 Node.js 的开源在线调试工具,提供了强 ...

  7. 用 Visual Studio Code 调试 Node.js

    环境: Visual Studio Code  Node.js 1. 关闭运行中的程序 2.打开入口文件,我这里的入口文件为 app.js 3.点击左侧菜单栏的 debug 按钮 4.点击运行按钮 5 ...

  8. node.js系列:(调试工具)node-inspector调试Node.js应用

    如果你在编写Node.js代码,node-inspector是必备之选,比Node.js的内置调试器好出许多.使用起来跟Chrome的javascript调试器很相似. 使用npm安装: $ npm ...

  9. WebStorm远程调试Node.js

    1.服务启动IP及端口,如果是云服务,IP选用服务器内网IP.同时需要防火墙需要添加端口. #添加端口 $ firewall-cmd --zone=public --add-port=9229/tcp ...

随机推荐

  1. ssm介绍

    1.Spring     Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作Expert One-On-One J2EE ...

  2. 异常检测(Anomaly Detection)

    十五.异常检测(Anomaly Detection) 15.1 问题的动机 参考文档: 15 - 1 - Problem Motivation (8 min).mkv 在接下来的一系列视频中,我将向大 ...

  3. nim博弈

    尼姆博弈 1.问题模型:有三堆各若干个物品,两个人轮流从某一堆取任意多的物品,规定每次至少取一个,多者不限,最后取光者得胜. 2.解决思路:用(a,b,c)表示某种局势,显证(0,0,0)是第一种奇异 ...

  4. 简单理解RNA-seq

    简单理解RNA-seq 刘小泽 已关注 2018.10.17 23:51* 字数 1518 阅读 46评论 0喜欢 3 今天就当一个小故事看吧,看了statQuest,感觉讲的很棒,于是分享给大家原版 ...

  5. MFC窗口位置和大小的获取

    最近在做一个项目,需要控件随对话框大小的变化而变化,因此需要准确获取对话框窗口.控件的大小和位置. 经过好一番查寻.测试,终于看到了希望.下面是一些获取窗口位置和大小的函数,示例如下: 1.获取屏幕分 ...

  6. 论坛:设计实体-->分析功能-->实现功能 之 《分析功能》

    其中 管理文章 的功能没有做,以下做的设计 浏览与参与 功能的步骤 分析功能   5个功能.   7个请求. 实现功能   Action, 7个方法   Service   Dao   Jsp For ...

  7. DataTable表连接

    public static System.Data.DataTable TableJoin(System.Data.DataTable dt, System.Data.DataTable dtDeta ...

  8. velocity 框架

    Java模板引擎 Velocity是一个基于java的模板引擎(template engine).它允许任何人仅仅使用简单的模板语言(template language)来引用由java代码定义的对象 ...

  9. Scrapy的安装和基本使用方法

    Scrapy的安装 1. Windows下安装流程: 方法一: 命令行执行pip install scrapy 安装scrapy 注意:如果有anaconda,也可以打开“Anaconda promp ...

  10. SQL判断如果一列值为null则取另一列值代替 isnull()

    [chClientCode] ,[nvcClientName] ,[chRegionCode] ,isnull(chUltimateHeadClientCode,[chClientCode]) as ...