chrome dev tools 使用大全

chrome 命令行快捷键打开

ctrl+shift+p

chrome 设置成中文

截图功能使用

screenshot

面板使用

element(元素) 面板

没啥子好讲的。。基本入门都会用
这里说下计算样式。。就是这个元素生效的样式

console(控制台面板) 面板

也没啥子好讲的。。入门都会使用
1 用下$符号进行dom节点筛选
2 ctrl+L清空全部信息
3 console.time() ---- console.timeEnd() 可以计算中间代码执行的时间
4 console.table([{“id”:“123”},{“name”:“nihao”}]) 以表格的形式打印出来

source(源代码面板) 面板

唯一就是可以利用snippet代码段去做一些简单的调试。

network(网络) 面板

没啥可讲的

发现了两个比较好的视频讲解：
https://www.bilibili.com/video/BV1KM4y1G7EF?spm_id_from=333.337.search-card.all.click

https://www.bilibili.com/video/BV1Pr4y1N7QZ?spm_id_from=333.337.search-card.all.click添加链接描述