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,会给这个元素加上醒目的边框或背景色。
