chrome DevTools调试技巧

chrome DevTool调试技巧

调试是代码开发、定位问题的重要手段。作为前端开发人员，学会利用Chrome开发者工具调试，快速定位问题，也是我们一项必备技能。

启动

• F12
• 右键–>检查
• 右上角设置->更多工具->开发者工具(有时候以上两种会被页面屏蔽)

基本布局

• 快速选择元素(ESC退出选择状态)
  
• 模拟设备分辨率
  
• 通过右上角三个点，调整布局位置
  

Element

该页签下是浏览器界面的元素情况。重点介绍一下右边的各个页签。

• Style

1. 该页签显示了元素的所有样式(可以手动修改)
2. 模拟元素状态(悬停、聚焦等等)查看样式
3. 查看某个类样式

• Event Listener
  元素事件监听器，一般去勾选祖先(Ancestors)的事件，只查看当前元素是否绑定事件。

• 元素断点DOM Breakpoints(较有用)

顾名思义，DOM断点，Chorme开发者工具支持我们监听元素移除、子树更新和属性更新三种断点。
打断点方式：Element选中元素–>右键–>Break on->选择断点。

Source

该页签下是页面请求的所有资源。

说明：
一个资源一旦被请求了，就会按照路径在这里显示。
比如请求一个图片，即使后台没有这份资源，该资源也会在这里显示，只是没有数据。

• 作用域空间
  一个页面可能会划分不同的作用域，比如iframe、content-stript，注意要先选对作用域空间
  
• 快速查找文件: CTRL+P ->输入文件名
• 美化代码
  有时候遇到被压缩过的代码，可以点击花括号来美化代码。
  

• 条件断点（较好用）

1. 打断点大家都会，debug状态下，也给我们提供了很多信息：调用栈Call Stack(快速熟悉代码流程)、Scope、Breakpoints、Global Listeners等等。
   
2. 有时候会根据需要打断点，比如循环到某个变量的时候才执行断点。这时候条件断点派上用场：右键蓝色断点–>Edit breakpoint–>输入JavaScript表达式(当表示式返回true的时候执行断点)，条件断点显示为橙色

   注意:

   1. 关于JavaScript表达式的返回值，可以直接在控制台进行测试
   2. console.log()的返回值是undefined，结合条件断点，可以用来快速打印日志
   3. 使用IIFE立即执行函数可以巧妙地修改变量进行测试

• 黑箱脚本(blackbox script)(较有用)

在调试的时候，有时候会进入我们无需关注的三方件源码，此时blackbox script就派上用场了。简单地说，黑箱脚本就是在调试时可以直接绕过的脚本(脚本内的断点也会被跳过哦)。设置也比较简单，右键脚本–>Blackbox script即可。

以上是个人在使用Chrome DevTool中的一些分享，如果错误，欢迎指正~
另外有其他技巧，欢迎补充~