文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

几个一看就会的 Chrome Devtools 小技巧

2024-12-02 02:34

关注

今天我们再来学一些常用的小技巧吧,都是一看就会的那种。

Sources 切换分组方式

Sources 面板默认是按照域名来分组的,这样想找某个文件比较麻烦:

其实可以切换到不以域名分组的方式:

这样想找某个文件是不是就清爽多了。

Network 自定义展示列

Network 是可以修改展示的列的,比如我勾选 Cookie 和 Set-Cookie:

就会在 Network 列表里展示这两列:

这两列啥意思呢?

Set-Cookie 的意思就是这个请求的响应会设置几个 cookie。

点开请求的详情确实是这样的:

Cookies 的意思就是说这个请求会携带几个 cookie:

比如那个携带 17 个 cookie 的请求:

不用数,肯定是 17 个。

除此以外,你还可以自定义展示的 header:

想展示啥 header 都行。

有同学可能会问,请求详情里不是能看到所有 header 么?这里展示有什么意义么?

效率不一样呀,一个个点开看,和列表里直接展示这个 header,那效率肯定差很多呀。

样式快速复制

我们经常用 chrome devtools 来调试样式,然后把调好的样式复制到编辑器里。

大家是不是都是选中再复制的?其实不用,可以直接用这两个功能:

复制单个样式或者复制全部样式,效率更高一些。

快速查看计算后的样式

有的时候我们写的样式是要经过一些计算才能得到最终的样式的,比如 rem,calc 等:

怎么知道这里的 1rem 计算后是多少呢?

可以在右边的 computed 里找:

但是这样是也太多了吧,怎么快速找到我想看的那个 1rem 对应的是多少呢?

可以右键这个样式,点击 view computed value,就可以快速过滤出对应那条样式对应的计算后的样式了:

调试手机网页

很多人调试移动端的网页都是用 vconsole 来展示日志,这样效率是很低的。

chrome devtools 支持远程调试,可以调试安卓手机上的网页。

用 USB 连接手机和电脑就行(安卓手机上要在设置里打开允许 USB 调试)。

之后打开 chrome://inspect 就可以看到所有手机上的网页了,还有 APP 调试包的 webview 里的网页:

点击 inspect 就可以调试移动端网页了:

可以审查元素,可以在控制台执行一些 JS,可以用 Network 查看网络请求,大部分调试功能都能用。这不比 vconsole 香么?

浏览器里的网页,还有调试包 APP 的 webview 里的网页都能调试。当然,最好还是手机也用 chrome 浏览器打开,这样支持的功能是最多的。

总结

今天我们又学了一些 chrome devtools 的小技巧:

这几个小技巧看一遍就记住了,下次用 chrome devtools 的时候就试一下吧。

来源:神光的编程秘籍内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯