JS****实用技巧断点调试详解
https://juejin.cn/post/6931889145916702734
为什么要调试？
程序就是函数堆砌起来的，程序的运行就是函数的执行过程。而通过JS调试，我们可以更为直观的追踪到在程序运行中，函数的执行顺序，以及各个参数的变化。这样我们就可以快速的定位到问题所在。
1 什么是JS调试？
在程序运行中，我们总会遇到各种bug，而通过代码的追踪代码的运行顺序从而定位到问题的过程就叫做JS****调试。
首先我们需要知道如何进入调试的界面，此处我们以谷歌为例，通过F12和右键检查，找到Sources就可以进入调试界面。具体界面显示如下：
[图片上传失败...(image-3dbffd-1645004617529)]
红框所标示的就是我们调试常用的按键。下面我们会在实际应用场景中详细讲述每一个按键的作用。
[图片上传失败...(image-68a572-1645004617529)]
1.resume/pause script execution
恢复/暂停脚本执行
2.step over next function call
步过函数，实际表现是不遇到函数时，执行下一步。遇到函数时，不进入函数直接执行下一步。即把函数当做一条语句执行不向内展开
3.step into next function call
步入函数，表现是不遇到函数时，执行下一步。遇到到函数时，进入函数执行上下文。
4.step out of current function
步出当前函数
5.step
执行下一步
6.deactivate breakpoints
使所有断点暂时失效
7.don‘t pause on exceptions
出现异常不暂停
① 单步调试F8:pause script execution普通调试，又叫单步调试。F12找到Sources后，在左侧文件夹中找到你想运行的文件，然后点击pause script execution按钮再刷新页面（F5），就可以进入单步调试断点调试F8 resume script execution
② 单步调试F10:Step over next function call程序逐步调试，每点击一次，就会按照代码执行顺序，向下执行一句代码。
③ 函数调试F11:Step into next function call按钮，我们就可以进入函数体内，在单步调试过程中，当经过函数调用时，点击Step into就可以进入该函数体内
④ Shift+F11:step out of current function call跳出当前函数体
⑤ F9:Step
⑥ CTRL+F8:Deactivate breakpoints使所有断点临时失效，快捷键【Ctrl + F8】
⑦ Don't Pause on exceptions不要在表达式处暂停，还有一个可选项【Pause On Caught Exceptions– 若抛出异常则需要暂停在那里】
https://www.jb51.net/article/123340.htm
2 单步调试
首先是普通调试，又叫单步调试。F12找到Sources后，在左侧文件夹中找到你想运行的文件，然后点击pause script execution按钮再刷新页面（F5），就可以进入单步调试
点击Step over next function call就是程序逐步调试，每点击一次，就会按照代码执行顺序，向下执行一句代码。
3 函数调试
如果亲手尝试过单步调试的小伙伴就会发现，单步调试其实并不能满足我们找bug的需求，因为单步调试是不能进入函数体内，我们也就不能跟踪函数体内变量的变化。
所以我们接下来就来学习下第三个按钮，step into next function call按钮
使用Step into按钮，我们就可以进入函数体内，在单步调试过程中，当经过函数调用时，点击Step into就可以进入该函数体内。
进入函数体内之后，继续点击Step over按钮，就可以进行函数体内的单步调试。如图所示，函数体内的变量变化就一目了然了。
但是在我们已经追踪到想要的变量变化时，函数体内的内容又很多，单步调试到函数结束就很浪费时间。这里就可以使用我们今天学习的第四个按钮，step out of current function call跳出当前函数体，跳出到之前进入函数体的代码位置。
4 断点调试
在实际项目代码量是很大的，使用单步调试就过于的浪费时间。而且有时我们是想要定位某一处的代码是否有错，所以就没有必要调试所有的代码。所以我们就可以使用断点调试，那么什么是断点调试呢？
首先，在想要定位问题的代码处，打断点，也就是代码停止执行的位置。如图所示点击红框处打该行的断点。（由于谷歌版本的不同，断点图标略有不同）
然后刷新页面（F5），就可以进入断点调试页面。点击Resume script execution按钮就可以调到下一个断点。（注意：当调到断点处时，此行代码为蓝色背景，表示此行代码即将执行但并未执行）
5 事件调试
首先我们要来明确一个概念，就是同步与异步，当代码执行时，自上而下运行的为同步代码，而异步代码其中一类就是需要事件来触发。所以在代码调试中，事件体内的函数，需要在打断点后，通过该事件的行为，才能进入函数体。
如以下代码：打断点后在刷新，其实没有效果
必须通过事件才能触发调试
利用****Watch****监视变量的值
在Source中选择变量，然后点击右键，在右键菜单中选择"Add selected text in watches"，就会将当前选择的文本内容加到Watch中了，这里的内容会随着代码的执行而动态变化。
TODO..
https://www.jb51.net/article/221929.htm
https://www.jianshu.com/p/12109ca49b9c
hrome****开发者工具（调试）
引言
绝大多数前端开发使用的是chrome浏览器，所以我也将自己的使用心得总结一下，有错望指正，侵删。和使用idea或者eclipse一样，在前端编写的js代码同样可以进行debug调试。相对与使用console或者alert。使用debugger，可以完成更多的功能，比如查看作用域变量、函数参数、函数调用堆栈以及代码整个的执行过程，对于我们的调试是有很大的帮助的。
调试菜单栏介绍
1.（等号）pause script execution
–>暂停脚本执行
2.（半弧箭头）step 快捷键：F9
–>单步执行 注意：遇到子函数会进去继续单步执行
3.（下箭头）step into 快捷键：F11 全称：step into next function call
–>单步执行，遇到子函数就进去继续单步执行
4.（上箭头）step over 快捷键：F10 全称：step over next function call
–>单步执行，遇到子函数并不进去，将子函数执行完并将其作为一个单步
5.（右箭头）step out 快捷键：Shift + F11 全称：step out of current function
–>直接跳出当前的函数，返回父级函数
6.（右粗箭头，点击一下多一个斜线，再次点击就取消了）deactivate breakpoints or activate breakpoints
–>禁用断点/启用断点
7.（圆形等号）pause on execution
–>暂停执行
小按钮介绍
1. “逐语句执行”或者“逐步执行”按钮：
意思就是，每点击它一次，js语句就会往后执行一句
快捷键F10
- “逐过程执行”按钮：
1） 常用在一个方法调用多个js文件时，涉及到的js代码比较长，则会使用到这个按钮(相当于从一个断点调到下一个断点)
2） 快捷键F8
直接在窗口打断点
1. 如果我们在javascript中写debugger，当然可以完成断点调试的需求，但是每次都需要写debugger，然后删除，很麻烦。然而和调整样式时一样，我们也可以在调用窗口打断点。
1）首先在左侧期望行位置左键点击
2）然后刷新页面就会生效了
3） 最后在右侧通过调试按钮或者快捷键即可调试。