前端调试技巧（PC调试）

theme: healer-readable

前端工作中，不仅编码很重要，重现bug，解决bug的能力同样重要。而这些都离不开代码调试。本文就一些调试技巧做出总结，不足之处，欢迎大家多多补充。

1. console.log()

在你觉得有问题的代码处，加上一句 console.log() 就好了。然后在开发者工具控制台就可以看到你打印出来的东西了。

2. 断点调试

debugger 语句
在代码中添加 debugger 语句，当代码执行到该语句的时候就会自动断点。

我们需要关注上图红色方框内的七个按钮。从左到右依次标记为a,b,c,d,e,f,g。

  a: Pause/Resume script execution：暂停/恢复脚本执行（程序执行到下一断点停止）
b: Step over next function call：逐语句执行（跳到下一行），快捷键F10
c: Step into next function call：进入当前函数，快捷键F11
d: Step out of current function：跳出当前执行函数，快捷键F11+Shift
e: Step 和b的作用一致，快捷键F9
f: Deactive/Active all breakpoints：关闭/开启所有断点
g: Pause on exceptions：异常情况自动断点设置

此时，我们在 Scope 面板中可以看到该作用域下变量和函数的信息（鼠标悬浮在对应的变量上也可以看到）方便我们排查问题。

（1）手动断点

打开开发者工具的 source 面板，在左侧目录树中找到对应的JS文件，在右侧对应文件的行号上单击即可实现断点的添加和删除。在添加断点之后，代码就会在断点处停止执行。

（2）事件断点

在上图中点击 Event Listener Breakpoints ，然后选择我们需要监听的事件。之后当该事件被触发时，浏览器会帮我们自动在相应的js文件代码处打上断点。

举个例子：我想在百度首页输入框中输入时，进行断点调试，就可以使用该功能。

（3）请求断点

在上图中点击 XHR/fetch breakpoints ，然后添加对应的请求URL，之后当该请求发送的时候，就会自动断点。

还是用百度举例：添加一个请求URL断点，然后刷新页面。

（4）Dom 断点

我们还可以对指定的 dom 节点进行断点设置，根据设置类型的不同，浏览器会在 dom 节点属性变化，子树变化，节点被移除三个时机帮我们进行断点。

还是用百度举例：在指定 dom 节点上右击，选择 Break on ，选择对应的时机进行设置

3. 动画调试

工作中肯定会遇到调试动画的场景，为了调试动画，经常一遍又一遍的刷新页面，其实大可不必，有更简单的办法。

1. 打开开发者面板，开启命令行（Mac: Command+Shift+P ，Windows： Control+Shift+P ）
2. 输入 Animations ，选择 Show Animations，打开动画检查器

3. 之后在页面发生的动画都会被其捕获，我们就可以在动画检查器中调试动画了

  区域1：控制动画的速度和播放；  
区域2：捕获的页面动画；  
区域3：动画的时间线；  
区域4：动画的实现细节；  

我们可以很方便的在这里将动画调试到满意的程度，然后复制对应的动画属性参数到代码中。