代码报错了。当我们用JavaScript开发运作在服务端的Node.js程序时。

颇少有人会瞬间就是描写起了没问题的代码。工作出色的顺序,都是由此同周整个的反复测试运行、发现题目、剔除问题(也便是咱所说的找Bug和修Bug)过后底结局,经过了马上等同进程,程序才能够最终上一个对立平稳之状态。

于付出之经过中,几乎无可能一次性就会写来毫无破绽的次序,断点调试代码是一个广阔的需。

对编程初家的话,可能还发出了这样的经历:你照网上或书本上的课文章,在好之代码编辑器中一字一句的剽窃写下教程被的代码,然后抱感动之运行代码,期待出现和课程被同样模一样的出口结果。然而,一可怜簇错误信息向您扑面而来……你心慌意乱,口中念念有词:怎么肥事,怎么肥事……

作为前端开发工程师,以往我们付出之JavaScript程序都运作于浏览器端,利用Chrome提供的开发者工具就是好一本万利之拓源码断点调试。其步骤有四,详情不说明,粗略概括如下:

自遇上了很多程序员(不管是初学的要就从多年底),一看到代码报错,第一影响就是是:代码报错了!怎么处置?怎么化解?!谁来支援拉自己……

  • 开辟Chrome开发者工具;
  • 点击上Sources标签页,在页面的左就能收看JS代码的目;
  • 找到需要装断点的源文件,在待暂停的哪行代码左侧单击鼠标左键,就可设置断点,如果你的代码是uglify过的,则需导入相应的source-map来映射源码。
  • 刷新页面(如果安断点的职位是一个事件处理函数,则直触及这个事件即可),代码运行到断点处的上,程序就算见面挂于,这时候用鼠标hover就好查看时逐一变量的数值,并是判断程序是否正常运行了。

吓吧,大可不必惊慌,冷静一下。

图片 1

  • 率先,你免是于写自爆程序。

  • 老二,你马上是以赤裸裸的无视放在前方的题材迎刃而解智!

可是,当我们用JavaScript开发运作在服务端的Node.js程序时,Chrome开发者工具暂时派不达用场了。虽然为闹措施落实以Chrome上调节,不过就不是今我们谈谈的限定。

这些扑面而来的错误信息可不是一致积聚无意义之文字,大多数时节,它们分明的来得了左产生的位置、导致错误的来由、甚至会见生不当的修补方式。你得之是精心读,它们是若的小天使,为你指出了平等漫长修复问题之明路。

还有,说之所以console.log的那位同学,请你先甭说话…

学会根据错误信息来定位代码错误

下我们即便来下手,试着执行一下眼看段发生题目的代码:

let a = 10;
let b = 2;
let c = a / d;

console.log(c);

执行及时段代码,如果是在浏览器被履行,那么可能结果碰头是这么的:

或是动命令行的方于Node.js下运行,则看起结果是这么的:

不论浏览器还是Node.js,出现的报错信息遭,都被有了相同截错误的叙说信息:

ReferenceError: d is not defined

有的程序员说,我未看报错信息,是因自见状英语就头昏。好吧,帮您翻一下:

援错误:d未定义

说之死明显了,代码中的变量d从不经过定义就是叫利用了。还好我们这次的代码比较少,我们一眼就找到以了这个不定义之变量d的地方:

let c = a / d;

哦,这或是公打代码的上不小心的输入错误,这个地方应当是前面定义之变量b,而不是d。哈哈,找到原因啦,改正改正。

一经我们的代码来诸多乎,从几千几乎万实施的代码里去摸索这段错误代码,如何快速稳定?还是从错误信息这里入手!

咱们再度回头看浏览器里的错误信息:

于点的错误信息里,原来还带有在错误产生的代码文件来以及错误在斯代码文件被所于的行数(test1.js:
3),而且若点击是文件称,就足以直接进入及者代码文件中翻,如下:

错让精准的永恒,这有利于的简直就是送货上门了。

相应的,命令行下的错误信息也是比较清楚的,也受您指明了错误所于的文书路径、哪一行那无异排:

一经您方利用VSCode编写和运转代码的话,可以进一步享受及她带来的利。在VSCode的菜单中选择“调试”>"开始调试"来运行而的代码,则你的错误代码会就被高亮显示:

何以?神器在手,编码无忧啊!

实质上,许多IDE都围拢成了Debug的力量,包括于新本子的WebStorm就本着Node.js调试支持得不得了好。

学会单步调试你的代码

地方我们谈谈的情节,是何许根据错误信息,定位明确的缪。但是,正所谓:明枪易躲,暗箭难防。还有大量根本就是不见面报错的错,比如由于代码逻辑或是js弱类型转换赋值不科学导致的失实,它们不见面造成代码报错,但是却能要您的先后得不交是的运作结果。

从来不报错信息的导,我们该怎么来搜寻错误根源?

一致种比较古老的法门,是用console或alert在你的代码的各个一个关键部位打印出输入或输出结果,然后以代码执行的下观察打印出来的始末,判断代码到底是在谁地方时有发生了预期之外的结果。这种办法现在还是会见给利用,但是之所以起还是生接触困难的。随着浏览器和支撑Node.js的代码编辑器的调剂功能更是好用,它已好退居二三四五线了。

任何一样栽艺术,就是指浏览器与代码编辑器的断点调试功能,实现对咱的代码进行单步执行。这种调试方式可以给我们清楚的观到代码的实施流程手续,执行过程遭到各一个变量的价值,以及变量值的变型情况。

人生苦短,快用断点调试。

接通下我们来拘禁一下怎么样分别以浏览器与编辑器里单步调试我们的代码。我们还是以之前的学科里之大概计算器代码吧。

于VSCode中开拓这大概计算器的代码目录,并开拓
server.js文本,然后于VSCode菜单中选择“调试”>"开始调试",这样,你的代码就运行于调试模式了。

而期间弹出这样一个吃您安排launch.json的界面,请将此launch.json里的program的价值改化${workspaceFolder}/server.js,因为我们的Node.js程序主入口文件是server.js

进去调试模式的VSCode界面就比如如下的旗帜:

连接下去,在浏览器里输入
http://localhost:8888/calculator.html,打开我们的计算器页面,并开拓浏览器的开发者工具,通过开发者工具的Source选项卡,找到我们当下页面calculator.html的网页源代码:

以浏览器开发者工具被开拓的网页代码界面及,我们可以点击JavaScript代码的行号部分,设置断点(顾名思义,表示代码执行到这边会见临时平息下来):

我们在calc函数里面安装了3个断点,如果代码执行并跻身calc函数,则会相继以此三独断点处停下来。如果当计算器界面上输入些简单数值并点击计算按钮,我们可以窥见调试界面会高亮显示当前代码暂停的职:

随即,我们好透过调试界面右侧上面的一律解按钮,控制代码的实行,主要功能来:

  • 继续执行,直到遇见下一个断点
  • 继续执行下一行代码
  • 跳入到手上代码行上正在调用的函数内部
  • 跳出当前函数
  • 启用/禁用所有断点
  • 启用/禁用代码在来很(Exception)的下进行暂停

于左边的代码窗口被,你可望实行过之代码行右侧,显示了各级变量的价;如果用鼠标悬停在变量名及,更可看到该变量的事无巨细内容信息。这样,你尽管好轻易的论断出目前实施结果是否要您预期。

当调节工具的下手面板上,提供了重复多效益选项,用于对诸如变量、Ajax请求、DOM事件、以及各种浏览器功能API的调用进行跟踪,使您对先后的履细节产生重新深刻的垂询及掌控,感兴趣之爱侣可自行挖掘。

交者,我们知道怎么调试浏览器里的代码了,回过头来再看于VSCode里调试Node.js后端平代码,就觉得不那么陌生了,因为大之一般。同样在您想暂停的代码行号前点击,设置好断点,并以编辑器的左手面板切换至调试界面:

下一场,重新去浏览器那边的计算器网页中开展同样破计算操作,当点击计算按钮的时,网页代码中会通过Ajax调用后端平的/calc劳动,因此,VSCode中的代码就会于之前设置的断点处暂停下来,随之而得透过编辑器顶部的调节工具栏上的按钮,进行和浏览器中近乎之单步调试啦!

唯独过多开发人员会当IDE太重,有无起更轻量级一些底家伙来兑现断点调试呢?今天且让大家安利一下当VScode上展开断点调试之法。

总结

纯运用查看报错信息和代码调试功能,可以为您针对代码的喻变得更为深,你编码的工作效率也会见跟着升级。遇到问题,不要再次胡乱的怀疑问题之来由啦,赶紧用起工具,去调节一番咔嚓!

没错采取工具,加速你的生产力。
接关注同斤代码的系列课程《从编程小白及全栈开发》

图片 2

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

设若看下图所展示之信,说明已经设置成功了。

图片 3

2.生成express运用目录,假要这个利用的称号也myapp

当极限输入

express myapp

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

图片 4

得视,这个有些应用已五脏俱全,有Node服务器配置,公共资源文件夹,师徒文件夹,以及路由配置。

3.运行express应用

a.以极限中输入指令

cd myapp && npm install

就得入项目目录并设置有因,这同步可能要比较长之日子,耐心等安装到位。

b.然后输入指令

npm start

即便足以启动以。

这我们于浏览器中做客localhost:3000,即可见到如下页面:

图片 5

就就是说明express应用可正常运作,接下去我们就算得使VScode调试代码了。

提示:为了避免调试时的端口冲突,我们先返回刚刚运行express应用之顶峰,ctrl+c关闭着运作的express应用。

调试express应用

1.跻身VScode界面,点击界面左边的季单近乎虫子的按钮,进入调试界面:

图片 6

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

图片 7

3.选择Node.js环境。

图片 8

4.增选好之后,在路之绝望目录中会变一个.vscode的目录,这个目录中存放了五花八门的VScode编辑器的配置。现在此目录中不怕含有了一个文件称吧lanuch.json的布文件,配置文件之情节如下:

图片 9

个中最为着重之布局起就是“Program”字段,这个字段定义了全体应用之输入,开启调试器的时刻会起之进口启动以。

我们发现时夫字段已经有价了,不要怪,那是以VScode于初始化这个布局文件的下,会翻动package.json中是否发含了键名为start的scripts,如果有的话,就会见拿start配置的始末作为“program”字段的值。

5.点碰上开调剂按钮(绿色三角形),就足以起调试。这时界面上面就是会冒出一个调试控制的面板,页面右侧下方会起一个调剂控制台,可以查阅你输出的信,在界面下放会产出一个状态栏,当前的橘黄色表示用在常规运行,如下图所示:

图片 10

6.我们又于浏览着走访localhost:3000,会发现页面可以打开,应用都见怪不怪启动了。

7.接下来我们初步于使用设置断点。我们开辟myapp/routes/index.js文件,这个文件配置了运用到底路径的路由,当前底处理是返回一个页面,传入字符串”Express”作为视图的参数。

图片 11

8.我们之所以鼠标在行号6之左手单击左键,就好装一个断点。注意,添加断点之前如果先关调试,关闭的法子是点击界面上面之调试控制面板中的告一段落按钮(红色正方形)。

图片 12

9.安装完断点之后,重新启航调试,然后以浏览器被访问localhost:3000,这时候,断点的样子来了变动,程序停留在了断点,调试控制面板的按钮也发出了扭转,从左到右依次是单步跳过,单步调试,单步跳出,重开,停止调试。这几乎独还是大面积的断点调试指令。设置结束断点之后,重新启航调试,然后在浏览器中访问localhost:3000,这时候,断点的貌来了变动,程序停留在了断点,调试控制面板的按钮也产生了扭转,从左到右依次是单步跳过,单步调试,单步跳出,重开,停止调试。这几乎单还是大规模的断点调试指令。

图片 13

10.在界面的左侧,可以翻时齐下文环境,也足以装变量监听。

图片 14

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

图片 15

Well,开启VScode的Node.js调试的一起吧!!

老大console.log的同室,你可以说了…

上述就是是本文的全部内容,希望对大家之上抱有帮助,也期待大家多支持脚本的小。

你或许感兴趣的文章:

  • Chrome调试折腾记之JS断点调试技巧
  • chrome浏览器如何断点调试异步加载的JS
  • javascript断点调试心得分享
  • javascript调试之DOM断点调试法使用技术分享
  • 下Firebug对js进行断点调试之图文方法
  • js断点调试经验分享