前言
📫 大家好，我是南木元元，热爱技术和分享，欢迎大家交流，一起学习进步！
🍅 个人主页：南木元元
目录
为什么要使用断点调试
控制台打印是前端开发最常用的调试手段，它简单直接解决一部分问题。但当遇到十分复杂的问题， 就会变得不趁手。比如：
- 一个逻辑复杂的算法。leetcode算法某个测试用例报错了，有时很难光靠目测找出有问题的那个方法。
- 一个复现步骤十分繁琐的bug。花了10分钟好不容易复现了，但是只跟踪到某行代码，需要第二次添加 log 才能继续寻找问题。查看log -> 添加log -> 查看log... 这个过程重复几遍，效率低下。
- 一段运行流程冗长的代码
- 一段没有注释、起名随意的代码
源代码面板简介
顾名思义，管理网页所有的源代码文件，包括JS、CSS、图片等资源，经常就是在这里断点调试JS代码。
在调试模式下可以查看（鼠标悬浮在变量上）变量值、上下文作用域、函数调用堆栈信息。
页面资源目录：页面涉及的所有资源（树）。
源代码：文件源代码，可以在这里添加断点调试JS代码。
Debug工具栏：断点调试的操作工具，用于控制代码的执行，包括暂停、继续、单步执行等操作。
断点调试器：这里包含多个断点调试器：
- 监视（Watch）：可添加对变量的监视。为目前断点添加表达式，使得每次断点往下走一步都会执行你的代码。
- 断点（Breakpoints）：代码行断点。所有添加的断点，可在这里编辑、删除管理。
- 作用域（Scope）：当前代码上下文的作用域，含闭包。
- 调用堆栈（Call Stack）：当前函数的调用堆栈。
- XHR/提取断点：可以在这里添加对AJAX请求（XHR、Fetch）的断点，添加URL地址即可。
- DOM断点：在元素页面添加的DOM断点会在这里显示。
- 全局监听器：全局监听。
- 事件监听器断点
- CSP违规断点
Debug工具栏
工具栏作为断点调试的操作工具，包含了6个按钮：
按钮1：让代码继续执行，运行到下一个断点会中断执行，如果没有设置断点会直接运行完代码
按钮2：跳过下一个函数调用。即不遇到函数时，执行下一步；遇到函数时，不进入函数直接执行下一步。
按钮3：跳进下一个函数上下文。即不遇到函数时，执行下一步；遇到函数时，进入函数上下文，查看函数具体内容。
按钮4：跳出当前函数调用
按钮5：单步调试，当前断点的下一步
按钮6：停用/激活全部断点
如何进行断点调试
下面我们以一个简单的谷歌官方示例展示如何进行断点调试。
在这个例子中，实现的功能是：输入两个数字，点击按钮进行相加。
显然，上述相加的示例存在问题，我们需要通过断点调试找到问题原因。
设置断点
设置断点是断点调试的第一步，设置断点可以让代码在断点处停下来，从而观察函数的运行过程。
设置断点前，需要找到相应方法的位置。可以通过Elements面板找到当前元素，然后在Event Listeners中找到当前事件触发的位置。
就能够定位到事件触发的函数。
在函数第一行打上断点，该断点也称代码行断点。
这时会发现，右侧的断点调试器区域，Breakpoints中出现了当前的断点信息，显示15行有一个断点（如果打多个断点，Breakpoints也会显示所有的断点信息）。
点击相加按钮，程序停在了第15行。
此时红色区域内会显示当前所能使用的所有局部变量、全局变量以及闭包产生的东西。
step over & step into
继续往下调试，这里有两个选择：
1.step over next function call
2.step into next function call
点击step over按钮，执行完该行代码，并且跳过inputsAreEmpty的函数调用，即不进入该函数。
此时，程序停留在第19行，也就说明inputsAreEmpty方法的执行结果为false。
如果在第15行时，点击step into按钮，会发生什么？程序会执行该行代码，并且会进入该函数。
在这个inputsAreEmpty函数中可以使用step over或step into继续进行调试，直到该函数执行完，程序才会重新回到第15行。
思考一下，这个函数的作用是判断输入是否为空，不可能导致上述问题的出现，问题应该出现在后面第19行的方法中，这时想要快速进入第19行去调试。现在nputsAreEmpty函数是比较简单的，但如果该函数代码很长有几十行几百行，也要一步步执行下去吗？
这时，就D这个按钮了。
step out of current function
上面已经提到过，这个按钮的作用就是立即执行完当前函数，回到上一层的调用。
点击step out of current function后，会发现程序已经跳出了当前函数，进入第19行。
Resume script execution
除了使用step out of current function跳出函数外，其实还有种方式能够快速进入第19行，就是使用工具栏的第一个按钮Resume script execution。
在第19行也打上断点，然后点击Resume script execution，恢复脚本的执行，程序就会直接运行到第19行的断点处。
定位问题与修复
接下来就可以使用step into进入updateLabel方法中去调试找问题。
显然，这个函数就是执行相加的逻辑。
函数里两数相加前分别调用了getNumber1()和getNumber2()两个方法，这里想知道调用方法后变量的值，可以使用step over不进入函数直接下一步，调用后的结果会显示在每行的后面以及右侧调试器中的Scope中。
其实到这里，已经发现了问题：由于两个函数返回的是字符串，导致相加会变成字符串拼接（在 JavaScript 中，如果两个操作数都是字符串，使用+运算符时，会进行字符串拼接，而不是进行数学加法运算）。
找到问题后，改起来就很方便了，利用js的类型转换，在getNumber1()和getNumber2()两个方法的前面添加+号，将后面的字符串转换成数字。修改完后进行保存。
临时表达式
上述错误的原因很简单，但有时在调试时遇到不太明显的错误，这时就需要写一些临时的表达式，对变量进行运算。有两种方式：
1.使用控制台
在控制台中写表达式来查看变量的运算结果，控制台可以使用Scope中的任何变量，因为当前断点已经停在这里了。
2.在Watch中添加表达式
点击Watch中的+号添加表达式后，会自动计算表达式的值，并且当其中任何一个变量发生变化时计算的值也会实时更新。
Deactivate breakpoints
现在想要验证BUG是否被修复，可以使用工具栏的最后一个按钮Deactivate breakpoints。
点击它后，会停用所有断点。可以看到，下面断点的颜色状态已经发生变化。
此时，再点击第一个按钮Resume script execution，恢复程序执行。
左侧两数相加已经能得到正确的结果，BUG被修复，至此，调试就完成了。
结语
🔥如果此文对你有帮助的话，欢迎💗关注、👍点赞、⭐收藏、✍️评论，支持一下博主~
扫一扫
2722
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
