Console
$0 会返回当前被选中的元素
比如我当前选中了【全部用例】这个元素，在控制台输入 $0 就会返回这个元素的 dom
如果想查看这个元素的一些 node 属性，比如： clientLeft 、 offsetTop 、 scrollTop 等，输入 console.dir($0) ，就会将这个元素转化为一个 node，不需要我们在代码里获取这个元素后打印了。
$0~$4 代表了最近5个你选择过的DOM节点，最多保存5个
$_ 是指向上一个表达式的结果的引用
当你在控制台中执行一个表达式或命令后，$_ 会保存该表达式的结果，以便在后续操作中引用，当我们想在控制台将表达式的执行结果保存为变量时，不需要再写 var a = xxx
$$ == querySelectorAll
当需要选中元素的时候，方便了很多
Command+Shift+C (mac)
这个快捷键可以快速地打开【元素】面板，并激活【小箭头】
Sources
条件断点
一般我们打断点直接点击目标代码所在到行即可，通过 command + 点击 可唤出断点的类型配置；也可在已有断点上右键修改断点。其中条件断点非常有用，当输入的表达式为 true 时，断点生效；当有深度循环时，这简直是救星。
查看断点处到变量
当代码运行到断点处时，右侧是断点处此时的信息面板，在【监视】区添加变量，可以方便的看到代码运行到此处该变量的值，无需将鼠标悬浮到变量查看了
XHR断点
在右侧面板中可以看到下图的 XHR提取断点，点击右侧的 ‘+’，可以添加一些api匹配字符串，如下图我添加了 ‘/statistics’，表示当api请求url包含该字符串时，断点到触发的地方
这在排查一些api请求时非常有用，如下图，发现在某个页面触发了2次一样的api
这时候按照上述方式打断点，可能会进入到第三方库的文件中，如果这个文件不是期望断点的文件，可右键左侧文件目录，点击【将目录添加到忽略列表】，后点击让断点继续执行；断点就会忽略该文件/文件夹
依此类推可以忽略多个，直到断在你的本地文件内
管理断点
右侧断点的面板用于管理页面中所有的断点，在任一文件上右键，可移除所有断点。当在好多文件中都设置了断点时，在这里可以批量清除；
当然也可以点击禁用断点按钮来跳过所有断点，但断点并未被清除
css layout
快速设置 / 查看flex系列属性
当我们给一个元素设置了diaplay: flex 后，在样式面板flex属性后会有一个icon，点击会展示一个flex属性相关面板，展示这个元素设置了哪些属性；点击每个 icon 可快速设置对应属性
在【元素】面板下，对于flex布局的元素，会有一个flex的tag标志，点击tag，会给这个元素加上醒目的边框或背景色。
