chrome dev tools 使用大全

本文介绍了Chrome浏览器的命令行快捷键、中文设置、截图功能以及开发者工具的四大面板:元素面板、控制台面板、源代码面板和网络面板的使用。重点讲解了控制台面板中的DOM节点筛选、信息清空、代码执行时间测量和数据表格打印,以及源代码面板的snippet调试功能。同时推荐了两个B站视频教程,帮助深入理解Chrome开发者工具的运用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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添加链接描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李卓书

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值