JS实用技巧断点调试

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. “逐语句执行”或者“逐步执行”按钮：

1. 意思就是，每点击它一次，js语句就会往后执行一句

2. 快捷键F10

2. “逐过程执行”按钮：

1） 常用在一个方法调用多个js文件时，涉及到的js代码比较长，则会使用到这个按钮(相当于从一个断点调到下一个断点)

2） 快捷键F8

直接在窗口打断点

1. 如果我们在javascript中写debugger，当然可以完成断点调试的需求，但是每次都需要写debugger，然后删除，很麻烦。然而和调整样式时一样，我们也可以在调用窗口打断点。

  1）首先在左侧期望行位置左键点击

  2）然后刷新页面就会生效了

  3） 最后在右侧通过调试按钮或者快捷键即可调试。