该篇只会讲述使用过程中某部分实用技巧或知识点，并不会每一个面板基础点都介绍，如 Console 面板中可以输入执行代码片段等。

---

Elements

DOM元素断点调式，右击元素「Break on」→ 「subtrees modifications」子节点树监听、「attribut modifications」属性监听。

---

Console

• $：document.querySelector 缩写。
• getEventListeners(document)： 返回在指定对象上注册的事件侦听器。
• $0 当前在 Elements 选中的节点，$1 对应上一次选择的节点，以此类推到 $4。
• $_ ：对上次执行结果的引用。

---

Network

如果想要禁止加载某个资源，不一定需要在源码去注释修改，可以右击请求→「Block request URl」 ，刷新测试。

---

Performance

Chrome Performance常见名词解释(FP, FCP, LCP, DCL, FMP, TTI, TBT, FID, CLS)

😫性能调试后期补上…【2023-02-14】

---

Run Command

在开发工具进入命令行面板快捷键： Command + Shift + P，可通过输入 ? 查看可以的命令行类型，如 Open File、Run Command等。

部分命令：

• Capture full size screenshot 截全图
• Show Animations [Drawer] 动画调式，相当于进入 Animations 面板（每播放一个动画都会添加到该面板）