在开辟的过程当中，险些不能够一次性就能够写出毫无马脚的顺序，断点调试代码是一个广泛的需求。
作为前端开辟工程师，以往我们开辟的JavaScript顺序都运转在阅读器端，运用Chrome供应的开辟者东西就能够够轻易的举行源码断点调试。其步骤有四，概况不表，大略归纳综合以下：
翻开Chrome开辟者东西；
点击进入Sources标签页，在页面的左侧就能够看到JS代码的目次；
找到须要设置断点的源文件，在须要中缀的哪行代码左侧单击鼠标左键，就能够够设置断点，假如你的代码是uglify过的，则需导入响应的source-map来映照源码。
革新页面（假如设置断点的位置是一个事宜处置惩罚函数，则直接触发这个事宜即可），代码运转到断点处的时刻，顺序就会挂起，这时候刻用鼠标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 -gMacBook用户全局装置的时刻记得在前面加上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调试之旅吧！！
谁人console.log的同砚，你能够措辞了…
作者：方浩，转载请说明出处！！！
我的微信民众号：webcoding ,迎接扫码关注
