自打编程小白到全栈开发:寻找代码中之问题。详解使用Visual Studio Code对Node.js进行断点调试。

by admin on 2018年9月19日

良少有人能转便形容来了无问题之代码。工作好的次序,都是通过同任何整个的多次测试运行、发现题目、剔除问题(也不怕是我们所说的找Bug和修Bug)过后之产物,经过了当下无异于进程,程序才能够最终上一个相对稳定之状态。

当开发之历程被,几乎不可能一次性就会写有毫无破绽的次,断点调试代码是一个泛的需要。

针对编程初家的话,可能还起了如此的经验:你照网上或者书本上的科目文章,在大团结之代码编辑器中一字一句的抄写下教程被的代码,然后抱感动之运行代码,期待出现同科目被平等模一样的出口结果。然而,一挺簇错误信息向你扑面而来……你心慌意乱,口中念念有词:怎么肥事,怎么肥事……

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

自我遇到过许多程序员(不管是初学的或曾经从多年底),一看到代码报错,第一感应就是:代码报错了!怎么处置?怎么解决?!谁来辅助拉我……

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

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

betway必威 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上开展断点调试之办法。

总结

熟运用查看报错信息及代码调试功能,可以于您对代码的喻变得尤其深刻,你编码的工作效率也会就升级。遇到题目,不要再胡乱的猜测问题之来由啦,赶紧将起工具,去调节一番吧!

毋庸置疑用工具,加速你的生产力。
接关注同斤代码的一连串课程《从编程小白及全栈开发》

betway必威 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

假如见到下图所展示之消息,说明已经装成功了。

betway必威 3

2.生成express下目录,假要这个用的名号也myapp

每当极限输入

express myapp

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

betway必威 4

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

3.运行express应用

a.于极端中输入指令

cd myapp && npm install

便可进去项目目录并安装有因,这无异步可能要比较长之日,耐心等安装完成。

b.然后输入指令

npm start

即便好启动以。

此时我们于浏览器中访问localhost:3000,即可看出如下页面:

betway必威 5

就虽说明express应用可以正常运转,接下我们就算可应用VScode调试代码了。

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

调试express应用

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

betway必威 6

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

betway必威 7

3.选择Node.js环境。

betway必威 8

4.选择好后,在品种之绝望目录中会生成一个.vscode的目录,这个目录中存放了五花八门的VScode编辑器的配置。现在此目录中尽管含了一个文书称也lanuch.json的布文件,配置文件的内容如下:

betway必威 9

其中最为要紧之布局起就是“Program”字段,这个字段定义了上上下下应用之进口,开启调试器的当儿会由夫进口启动以。

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

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

betway必威 10

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

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

betway必威 11

8.咱之所以鼠标在行号6底左手单击左键,就可以装一个断点。注意,添加断点之前要事先关调试,关闭的道是点击界面上面的调试控制面板中之停止按钮(红色正方形)。

betway必威 12

9.装完毕断点之后,重新启航调试,然后在浏览器被走访localhost:3000,这时候,断点的样来了转,程序停留在了断点,调试控制面板的按钮也起了变化,从左到右依次是单步跳过,单步调试,单步跳出,重开,停止调试。这几乎单还是普遍的断点调试指令。设置完断点之后,重新启航调试,然后在浏览器中访问localhost:3000,这时候,断点的形制来了转移,程序停留于了断点,调试控制面板的按钮也产生了别,从左到右依次是单步跳过,单步调试,单步跳出,重开,停止调试。这几只都是广阔的断点调试指令。

betway必威 13

10.以界面的左,可以查阅时齐下文环境,也得以设置变量监听。

betway必威 14

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

betway必威 15

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

不行console.log的同室,你得说了…

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

卿或许感兴趣的文章:

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

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图