chrome|chrome 开发者工具使用教程-01-element面板
录了段视频放b站了，
https://www.bilibili.com/vide...
1,DOM面板
【chrome|chrome 开发者工具使用教程-01-element面板】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： 按布局、文字、外观等组合
文章图片
元素（和它的祖先元素）的监听事件
如果把
Ancestors勾选上，就显示自己+祖先的，如果不勾选，就只显示自己的
5,DOM Breakpointers
文章图片
右键
break on 打的断点会显示在这里推荐阅读
- Mac安装Chromedriver
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 孩子不是实现父母欲望的工具——林哈夫
- 最有效的时间管理工具（赢效率手册和总结笔记）
- 工具|后天就是七夕节，你准备好了吗（送上几个七夕代码，展示你技能的时候到了！）
- 工具分享｜5个有趣好玩的网站，拒绝无聊！
- www和https://又被Chrome地址栏隐藏了
- 工具人的一天
- jvm常见分析工具
- docker镜像探索----dive工具