从编程小白到全栈开发:寻找代码中的问题

很少有人能须臾间就写出完全没有问题的代码。工作不错的次序,都是透过一次遍的往往测试运行、发现问题、剔除问题(也就是大家所说的找Bug和修Bug)过后的产物,经过了这一进程,程序才能最后达到一个争持平稳的情况。

对编程初学者的话,可能都有过那样的经验:你遵照网上或书本上的学科作品,在协调的代码编辑器中一字一句的抄写下教程中的代码,然后满怀感动的运作代码,期待出现和科目中一模一样的出口结果。可是,一大坨错误音信向你扑面而来……你无所适从,口中念念有词:怎么肥事,怎么肥事……

自身赶上过不少程序员(不管是初学的或已从业多年的),一看到代码报错,第一影响就是:代码报错了!肿么办?怎么化解?!谁来帮帮我……

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

  • 首先,你不是在写自爆程序。

  • 其次,你这是在赤裸裸的掉以轻心放在前方的题材解决方法!

这个扑面而来的错误信息可不是一堆无意义的文字,大多数时候,它们显著的来得了错误爆发的岗位、导致错误的案由、甚至会有荒唐的修补形式。你需要的是仔细阅读,它们是你的小天使,为您指出了一条修复问题的明路。

学会依照错误信息来定位代码错误

下边我们就来动手,试着执行一下那段有问题的代码:

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的菜单中接纳“调试”>"开始调试"来运作你的代码,则你的错误代码会跟着被高亮呈现:

哪些?神器在手,编码无忧啊!

学会单步调试你的代码

上边我们谈论的始末,是什么样依照错误信息,定位明确的一无是处。可是,正所谓:明枪易躲,暗箭难防。还有大量根本就是不会报错的错误,比如由于代码逻辑或是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中的代码就会在事先安装的断点处暂停下来,随之你可以因此编辑器顶部的调剂工具栏上的按钮,举办和浏览器中类似的单步调试啦!

总结

在行使用查看报错信息以及代码调试功用,可以让你对代码的理解变得愈加深切,你编码的工作功用也会跟着升级。碰到题目,不要再胡乱的揣度问题的原故啦,赶紧拿起工具,去调节一番吧!

是的使用工具,加速你的生产力。
Ajax,欢迎关注一斤代码的千家万户课程《从编程小白到全栈开发》

相关文章