您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

Chrome 调试工具的一些高阶功能

时间:2019-09-09 13:13:10  来源:  作者:

Chrome 内置抓包工具

在浏览器地址栏输入chrome://net-internals/#events,即可打开自带的抓包工具。工具处于live状态,其他tab 页有请求刷新,列表会随之刷新请求的快照,点击快照可查看详细的请求信息,配合 network面板能看到一个完整的请求。

Chrome 调试工具的一些高阶功能

 

Block requests

network 面板右击请求即可看到 block 选项,这个选项能够使我们在请求和域的级别上打断点。

eg: 配合 Preserve log 可以监测请求在不同域之间转发跳转时状态变化(请求在不同域之间转发跳转,network面板会经常性地丢失 response)。

Chrome 调试工具的一些高阶功能

 

截取长图

切换 device 到其他模式(比如调试移动端)时,右边菜单栏提供了 capture full-page screenshots的选项。

eg: 配合这个选项可以做一些 module lazyload 的优化。

Chrome 调试工具的一些高阶功能

 

代码的覆盖率分析

通过coverage 面板可以找到没有用到的 css和 js 代码,点击单个文件可以查看详情,并且也是处于 live 状态,页面发生变化时,覆盖率报告也会随之刷新。通过右边菜单 more tools 或者通过快捷键 ctrl + shift +p (windows) 输入coverage 即可打开 coverage。

Chrome 调试工具的一些高阶功能

 


Chrome 调试工具的一些高阶功能

 

Make site better

Audits panel 提供了 PWA, performance, 无障碍,最佳实践四个维度的网站测试报告。提供了不是很常见的无障碍测试,配合报告我们可以进行更好的无障碍优化。

Chrome 调试工具的一些高阶功能

 

在每次发布版本时,Chrome Devtools Updates 会提示更新的内容。当然,最简单的方法就是保持chrome的版本更新,更新后 devtool 面板会自动推送 features && changes。

希望本文能帮助到您!

点赞+转发,让更多的人也能看到这篇内容(收藏不点赞,都是耍流氓-_-)

关注 {我},享受文章首发体验!

每周重点攻克一个前端技术难点。更多精彩前端内容私信 我 回复“教程”

原文链接:

http://eux.baidu.com/blog/fe/Chrome%E8%B0%83%E8%AF%95%E5%B7%A5%E5%85%B7%E7%9A%84%E4%B8%80%E4%BA%9B%E9%AB%98%E9%98%B6%E5%8A%9F%E8%83%BD

作者:苏迪



Tags:Chrome   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
一. 配置yum源在目录 /etc/yum.repos.d/ 下新建文件 google-chrome.repovim /etc/yum.repos.d/google-chrome.repo按i进入编辑模式写入如下内容:[google-chrome]name=googl...【详细内容】
2021-12-23  Tags: Chrome  点击:(7)  评论:(0)  加入收藏
年末,又到了各大厂商盘点年度最佳的时候了。不过让世超感到意外的是 Google 竟然给自己 Chrome 的插件,做了一个 2021 年精选集锦,挑选出了 13 款今年最热门的 Chrome 插件。...【详细内容】
2021-12-13  Tags: Chrome  点击:(19)  评论:(0)  加入收藏
谷歌访问助手插件是专门针对chrome谷歌浏览器而开发的一款访问插件,可以为谷歌搜索,谷歌chrome商店,gmail邮箱提供加速服务,解决打不开的问题。这款插件可以帮助我们在使用谷歌...【详细内容】
2021-12-03  Tags: Chrome  点击:(13)  评论:(0)  加入收藏
你在用的浏览器又更新了——本次 Chrome 95 稳定版为标签页分组新增了保存功能,Edge 95 稳定版则带来了更适合笔记本用户的高效能模式和 PDF 阅读体验改进。除此之...【详细内容】
2021-10-27  Tags: Chrome  点击:(42)  评论:(0)  加入收藏
小编在这里为您提供帮助。通过以下几个步骤卸载 Google Chrome 并从 Mac 中删除其所有数据。以下是一些简单的说明。一起啦看看吧!卸载 Google Chrome 应用程序之前从 Mac 上...【详细内容】
2021-10-20  Tags: Chrome  点击:(64)  评论:(0)  加入收藏
尽管 Google Reader 已经被弃用,但是它的精神仍得以延续,Android 端 Chrome 浏览器现在可以使用 RSS 追踪功能了。该功能于今年 5 月开始测试,仅限于 Chrome Canary 频道版本,不...【详细内容】
2021-10-09  Tags: Chrome  点击:(43)  评论:(0)  加入收藏
Chrome F12 介绍 Chrome 开发者工具 F12 是前端开发、测试人员的利器,使用开发者工具可以非常方便地查看页面元素、源文件、控制台、网络等等。其中的 Network 类似与 fiddle...【详细内容】
2021-08-26  Tags: Chrome  点击:(155)  评论:(0)  加入收藏
出品|开源中国文|御坂弟弟Google 在最新发布的 Chrome 浏览器中增加了一批新的 Chrome Actions,以便对该功能进行早期测试。Chrome Actions 是其最近推出的一项实验性功能,它...【详细内容】
2021-05-28  Tags: Chrome  点击:(171)  评论:(0)  加入收藏
Chrome 浏览器快捷命令命令列表 不知道或者忘记了命令怎么办,别急下面这条命令就是来拯救你的,只要记住这一条,就相当于记住了所有的命令,在 地址栏 中 输入下面的指令便可看到...【详细内容】
2021-05-19  Tags: Chrome  点击:(145)  评论:(0)  加入收藏
谷歌去年在 Android 版 Chrome 浏览器上引入了对“往返缓存”的支持,当用户点击后退或前进按钮时,可以瞬时加载页面。据外媒 Windows Latest 报道,谷歌 Chrome 92 版本已添加了...【详细内容】
2021-05-14  Tags: Chrome  点击:(183)  评论:(0)  加入收藏
▌简易百科推荐
本文分为三个等级自顶向下地分析了glibc中内存分配与回收的过程。本文不过度关注细节,因此只是分别从arena层次、bin层次、chunk层次进行图解,而不涉及有关指针的具体操作。前...【详细内容】
2021-12-28  linux技术栈    Tags:glibc   点击:(3)  评论:(0)  加入收藏
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  项目与数据管理    Tags:Vue   点击:(2)  评论:(0)  加入收藏
程序是如何被执行的  程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  IT学习日记    Tags:程序   点击:(9)  评论:(0)  加入收藏
阅读收获✔️1. 了解单点登录实现原理✔️2. 掌握快速使用xxl-sso接入单点登录功能一、早期的多系统登录解决方案 单系统登录解决方案的核心是cookie,cookie携带会话id在浏览器...【详细内容】
2021-12-23  程序yuan    Tags:单点登录(   点击:(8)  评论:(0)  加入收藏
下载Eclipse RCP IDE如果你电脑上还没有安装Eclipse,那么请到这里下载对应版本的软件进行安装。具体的安装步骤就不在这赘述了。创建第一个标准Eclipse RCP应用(总共分为六步)1...【详细内容】
2021-12-22  阿福ChrisYuan    Tags:RCP应用   点击:(7)  评论:(0)  加入收藏
今天想简单聊一聊 Token 的 Value Capture,就是币的价值问题。首先说明啊,这个话题包含的内容非常之光,Token 的经济学设计也可以包含诸多问题,所以几乎不可能把这个问题说的清...【详细内容】
2021-12-21  唐少华TSH    Tags:Token   点击:(10)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Mason程    Tags:VUE   点击:(14)  评论:(0)  加入收藏
什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么时候来进行性能调优?(who) 怎么样进行性能调优?(How) 硬件配...【详细内容】
2021-12-16  软件测试小p    Tags:性能调优   点击:(20)  评论:(0)  加入收藏
Tasker 是一款适用于 Android 设备的高级自动化应用,它可以通过脚本让重复性的操作自动运行,提高效率。 不知道从哪里听说的抖音 app 会导致 OLED 屏幕烧屏。于是就现学现卖,自...【详细内容】
2021-12-15  ITBang    Tags:抖音防烧屏   点击:(25)  评论:(0)  加入收藏
11 月 23 日,Rust Moderation Team(审核团队)在 GitHub 上发布了辞职公告,即刻生效。根据公告,审核团队集体辞职是为了抗议 Rust 核心团队(Core team)在执行社区行为准则和标准上...【详细内容】
2021-12-15  InfoQ    Tags:Rust   点击:(25)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条