前端断点调试

前端断点调试

前端dubug调试的俩种方法

1：直接在sources打dubug

• 如图
• 

1：下图在一个名为toggleTab的方法下打了两个断点，
2：当开始执行我们的点击切换tab行为后，代码会在执行的断点出停下来，
3：并把相关的数据展示一部分，此时可以在已经执行过得代码处，把鼠标放上去，即可查看相关的具体数据信息，
4：同时我们可以使用右侧的功能键进行调试.

• 调试按钮

右侧最上面一排分别是：暂停/继续(F8)、单步执行(新版浏览器F9、F10)、单步跳入此执行块(F11快捷键)、单步跳出此执行块(shift+F11)、禁用/启用所有断点。下面是各种具体的功能区

注意：
如果未进入我们打的断点，说明程序块为被调用；

在需要调试的那一行代码前加上console.log(666),然后运行一次，到控制台查看结果输出，点击右边的链接会自动跳转到源码，这样就可以直接断点了

2：加debugger关键字

在需要调试的地方加debugger关键字，代码运行到的时候会自动停下，进入调试模式

此方法不需要手动断点，但是麻烦的是可能你调试一次就不用再调试了，但是每次运行到那里都会停下，必须移除这个代码才行

最后记得移除debugger

熟练调试对定位问题非常重要，高效率作业

番茄工作法原理：每次专注一段时间（一般是 25 分钟）结束搭配一次休息（一般是 5 分钟），多次专注（一般为 4
次）结束搭配一次长休息（一般为 15 分钟）。劳逸结合，有助于提高工作效率。

前端调试以及断点总结参考

https://www.cnblogs.com/soyxiaobi/p/9598761.html
https://www.imooc.com/article/246860