录了段视频放b站了，
https://www.bilibili.com/vide...
1,DOM面板
1，鼠标点击选中DOM元素，双击能够编辑
2，拖拽、复制、剪切、粘贴（ctrl c,ctrl v,ctrl x 快捷键）
3，搜寻 ctrl F (能够搜字符串、css选择器、xpath，)
比较复杂的css选择器也能够，比方： 相邻兄弟选择器 .my-button+.my-button、 属性选择器 [class^="nav"] 这个性能很实用，调试代码有时候用得着4，鼠标右键add attribute：增加属性force status：设置元素状态，能够用来调试不同状态的款式
(:hover、:active、:focus、:visited、:focus-within、:focus-visible) style面板也有一个中央能够设置元素状态break on：元素发生变化的时候，打断点
subtree modifacations: 子节点扭转 attribute modifications: 属性扭转 node removal: 节点被删除expand recursively：开展collapse children：收起capture node screenshot：截图
（留神滚动条） 比方 截b站首页https://www.bilibili.com/ 选中html标签，或者body标签，都只能截到一屏， 能够看左边的computed面板的height html标签的height只有864px。 #app高度有14048px,那就截图#app，能够截到残缺的页面。2，style 面板
filter：筛选过滤:hov：设置元素状态
样式表：
双击可编辑，
数值型的值 按高低方向键 会加1/减1，
关键词的 能够看到所有能够设置的值，按高低键可切换。
3,computed 面板
- 最初理论利用的值
- 相对值换算成绝对值（比方em、rem、百分比、vh、vw等，换成px）
filter：筛选show all： 显示全副（很多属性没有被样式表设置的，有默认值）group： 按布局、文字、外观等组合
4,Event Listeners
元素（和它的先人元素）的监听事件
如果把Ancestors勾选上，就显示本人+先人的，
如果不勾选，就只显示本人的
5,DOM Breakpointers
右键 break on 打的断点会显示在这里