Chrome 调试技巧

比如我当前选中了【全部用例】这个元素，在控制台输入 $0 就会返回这个元素的 dom

如果想查看这个元素的一些 node 属性，比如： clientLeft 、 offsetTop 、 scrollTop 等，输入 console.dir($0) ，就会将这个元素转化为一个 node，不需要我们在代码里获取这个元素后打印了。

$0~$4 代表了最近5个你选择过的DOM节点，最多保存5个

当你在控制台中执行一个表达式或命令后，$_ 会保存该表达式的结果，以便在后续操作中引用，当我们想在控制台将表达式的执行结果保存为变量时，不需要再写 var a = xxx

当需要选中元素的时候，方便了很多

这个快捷键可以快速地打开【元素】面板，并激活【小箭头】

一般我们打断点直接点击目标代码所在到行即可，通过 command + 点击可唤出断点的类型配置；也可在已有断点上右键修改断点。其中条件断点非常有用，当输入的表达式为 true 时，断点生效；当有深度循环时，这简直是救星。

当代码运行到断点处时，右侧是断点处此时的信息面板，在【监视】区添加变量，可以方便的看到代码运行到此处该变量的值，无需将鼠标悬浮到变量查看了

在右侧面板中可以看到下图的 XHR提取断点，点击右侧的 '+'，可以添加一些api匹配字符串，如下图我添加了 '/statistics'，表示当api请求url包含该字符串时，断点到触发的地方

这在排查一些api请求时非常有用，如下图，发现在某个页面触发了2次一样的api

这时候按照上述方式打断点，可能会进入到第三方库的文件中，如果这个文件不是期望断点的文件，可右键左侧文件目录，点击【将目录添加到忽略列表】，后点击让断点继续执行；断点就会忽略该文件/文件夹

依此类推可以忽略多个，直到断在你的本地文件内

右侧断点的面板用于管理页面中所有的断点，在任一文件上右键，可移除所有断点。当在好多文件中都设置了断点时，在这里可以批量清除；

当然也可以点击禁用断点按钮来跳过所有断点，但断点并未被清除

当我们给一个元素设置了diaplay: flex 后，在样式面板flex属性后会有一个icon，点击会展示一个flex属性相关面板，展示这个元素设置了哪些属性；点击每个 icon 可快速设置对应属性

在【元素】面板下，对于flex布局的元素，会有一个flex的tag标志，点击tag，会给这个元素加上醒目的边框或背景色。