本文介绍了Chrome浏览器的命令行快捷键、中文设置、截图功能以及开发者工具的四大面板：元素面板、控制台面板、源代码面板和网络面板的使用。重点讲解了控制台面板中的DOM节点筛选、信息清空、代码执行时间测量和数据表格打印，以及源代码面板的snippet调试功能。同时推荐了两个B站视频教程，帮助深入理解Chrome开发者工具的运用。
文章目录
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添加链接描述
扫一扫
531
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
