betway官网

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

九月 19th, 2018  |  球星丑闻

好少有人能够瞬间便写来了无问题的代码。工作优良的顺序,都是经过同全方位所有的累测试运行、发现题目、剔除问题(也不怕是咱们所说的找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断点调试经验分享

相关文章

标签:,

Your Comments

近期评论

    功能


    网站地图xml地图