debug调试入门,快速找出代码bug,代码逻辑研究

|||||故事:
我为什么要讲这个呢,这段时间,我在公司,有几个人对我使用debug调试的效果眼前一亮


|||||作用:
debug意译为调试。不知道你有没有这样一种情况,明明有bug,却找不到原因,一直控制台输出日志,苦苦不得结果。这个时候你就有必要认识一下debug这个东西了

|||||背景:
我个人一开始很拒绝debug,因为用起来比较复杂,不知道咋用,网上教程也说不明白,所以我对控制台输出调试情有独钟。后来,随着项目的复杂化,你对项目的了解便成了盲人摸象,解决bug,理清逻辑,光靠控制台就显得捉襟见肘了。一开始我主要做前端,用的是chrome debug,你可以在chrome中的代码上直接打断点,也可以在编辑器中通过debug语句打断点,这样就能一行一行执行代码,看哪里出了问题。后来主要做nodejs后端,chrome调试就不行了,就使用vscode做debug了。

|||||用法:
debug执行过程为,启动debug-->运行代码到断点停止运行-->你通过继续、单步跳过、单步调试按钮调试代码-->代码运行结束
debug模式有两个视图,一个是变量监视视图,这个视图会列出当前全局变量值和当前作用域变量值。另一个是代码视图,有一个游标指向当前正在执行的语句。
debug调试按钮介绍,继续按钮会放开当前断点,如果下边有断点,代码直接到下一个断点停止执行,如果下边没有断点,则代码执行完毕。单步跳过按钮为跳过断点这个语句,停止到下一语句,这个过程也叫代码一行一行调试。单步调试按钮会进入当前语句子环境,假设这一语句是调了一个函数,那么单步调试就会进入这个函数。单步跳过按钮,会退出子环境。


|||||示例:
假设你定义了一个全局变量,这个变量在代码运行过程中报了TypeError错误,代码很复杂,怎么去解决这个问题呢
笨方法:打断点到变量定义的地方,然后单步调试,一行一行执行,查看视图中这个变量值的变化
缩小调试范围法:打断点到变量定义的地方,在到结束的区间中多打几个断点,用继续按钮,去确定那个区间出了问题,缩小区间后,再在区间内一行一行调试
视图变量追踪:视图中,你可以定义监视报错的变量,这样单步调试就能清晰的查看变量值的情况

|||||其他用途
debug最重要的功能是调试代码bug,此外也能用作代码过程研究,例如你要了解控制台输出语句是怎么输出的,就可以把断点打到输出语句上,用单步调试进入输出函数,一步一步去看内在实现逻辑。同样也可以研究第三方库的API,以便修改掉第三方库不符合我方需求的逻辑

posted @ 2021-09-29 10:30  中国计算机技术研究员  阅读(123)  评论(0编辑  收藏  举报