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

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   点击:()  评论:()
声明:本站部分内容来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除,谢谢。
▌相关评论
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
▌相关推荐
作者:大侠学JAVA转发链接:https://mp.weixin.qq.com/s/kIaykD2zpGJEGgAjRDLKgg前言如果要说用的最多的软件是什么,那浏览器肯定是当仁不让,而浏览器中,chrome浏览器应该是大家用...【详细内容】
2020-07-10   Chrome  点击:(0)  评论:(0)  加入收藏
Chrome凭借着快速的网页加载速度和丰富的扩展插件,一直是网上冲浪选手的首选浏览器之一。除了好用之外,Chrome也是知名的内存吞噬者和耗电大户,之前就有过网友抱怨使用Chrome浏...【详细内容】
2020-07-06   Chrome  点击:(0)  评论:(0)  加入收藏
自从2010年谷歌退出中国市场后,谷歌旗下的大多数网站,在国内基本上无法正常访问。但是由于chrome浏览器有着扩展插件这个强大的功能,让我们在使用过程享用了更多的方便,所以还是...【详细内容】
2020-06-28   Chrome  点击:(0)  评论:(0)  加入收藏
之前就粉丝跟小编说,想要推荐几款程序员使用的插件,所以小编就去找了找,发现了这4款当下比较热门且实用的,也是程序员经常用到的,这几款插件也可以提高工作效率,难怪隔壁小哥哥程...【详细内容】
2020-06-28   Chrome  点击:(3)  评论:(0)  加入收藏
谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器。伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chrome变成了一个必须掌握的工具。大多数前端开发者...【详细内容】
2020-06-27   Chrome  点击:(2)  评论:(0)  加入收藏
近日,据路透社报道,安全公司Awake Security的研究人员新发现,浏览器市场的老大Chrome成了间谍软件的“批发市场”,大量包含间谍软件的Chrome扩展插件已经被下载了超过3200万次。...【详细内容】
2020-06-22   Chrome  点击:(0)  评论:(0)  加入收藏
SEO专业人员可以更改其浏览器的用户代理,以识别与隐藏或审核不同设备上的网站有关的问题。   无论您是SEO,营销人员还是Web开发人员,通常都可能需要更改浏览器的用户代理以测...【详细内容】
2020-06-18   Chrome  点击:(1)  评论:(0)  加入收藏
在升级 Windows 10 May 2020(20H1/Version 2004)功能更新之后,部分 Chrome 用户反馈称谷歌会不断登出用户账号,并强迫用户再次登录。一旦你关闭Chrome浏览器,然后再次打开它,这个...【详细内容】
2020-06-16   Chrome  点击:(1)  评论:(0)  加入收藏
主流浏览器通常七个模块组成:包括用户界面、浏览器引擎、渲染引擎、网络、JS解释器、UI后端、数据持久化存储等,其内核普遍认为是渲染引擎,通常是指用来解析DOM文档和CSS规则...【详细内容】
2020-06-16   Chrome  点击:(0)  评论:(0)  加入收藏
对于电脑浏览器来说,好用的浏览器插件确实方便不少,浏览器插件功能各异,但确实都能满足不少需求。而现在的浏览器市场,几乎就是Chrome或者基于Chromium内核浏览器的天下,这不微软...【详细内容】
2020-06-15   Chrome  点击:(1)  评论:(0)  加入收藏
Chrome可以说是很受欢迎的浏览器了,简洁的设计以及快速、稳定的性能,真是让人拍手叫好,当然很多人成为他的忠粉还是因为它强大的拓展性,大家都说Chrome插件是Chrome的灵魂,无插件...【详细内容】
2020-06-15   Chrome  点击:(0)  评论:(0)  加入收藏
无论你是想要设计高性能 Web 应用,还是要优化现有的 Web 应用,你都需要了解浏览器中的网络流程、页面渲染过程,JavaScript 执行流程,以及 Web 安全理论,而这些功能是分散在浏览...【详细内容】
2020-06-03   Chrome  点击:(2)  评论:(0)  加入收藏
给你的Google Chrome浏览器增加一点压力,从而提高你的工作效率,还能提高上网安全性。谷歌浏览器是全球最受欢迎的浏览器之一,尽管它占用系统资源足够多,但它是一个公认的、非常...【详细内容】
2020-06-02   Chrome  点击:(7)  评论:(0)  加入收藏
以下仅代表个人的体验感受1.Infinity新标签页小编第一个接触到的谷歌浏览器插件,个性化十足,省去了去书签栏寻找的时间。每日背景,给你带来不一样的体验。Infinity设置界面 nfi...【详细内容】
2020-05-21   Chrome  点击:(0)  评论:(0)  加入收藏
在2019年的浏览器市场份额统计中,Chrome 以 46.28% 的市场占有率稳居第一,其后IE9占有 8.38%, QQ浏览器占据了市场份额的5.60%,搜狗4.63%的市场份额。根据这份报告,我国网民,有差...【详细内容】
2020-04-19   Chrome  点击:(5)  评论:(0)  加入收藏
之前一直用 cVim,与 Vimium 功能类似,但是之后不在更新了,故转战到 Vimium。简介官网:http://vimium.github.io/Vimium 是 Google Chrome 浏览器的扩展程序,它提供了 Vim 编辑器...【详细内容】
2020-04-06   Chrome  点击:(4)  评论:(0)  加入收藏
这场突如其来的疫情让不少企业都受到波及,上个周谷歌Chrome小组宣布受疫情影响,停止更新Chrome浏览器和Chrome OS操作系统。不仅仅是谷歌宣布停更,微软等巨头也宣布停更系统,并...【详细内容】
2020-03-29   Chrome  点击:(5)  评论:(0)  加入收藏
滚动截屏通常需要装第三方软件,又要面临到底装哪个截图软件最好用,其实谷歌浏览器就自带滚动截屏功能。使用快捷键打开浏览器的控制台 Ctrl + Shift + I (Windows) || Option...【详细内容】
2020-03-16   Chrome  点击:(1)  评论:(0)  加入收藏
基于Chromium内核的微软新一代Edge浏览器已经上市,和老版Edge相比,新版最大的看点就是它的Chromium内核。除了速度更快以外,能够与Google Chrome扩展互通是吸引很多人的亮点之...【详细内容】
2020-02-04   Chrome  点击:(7)  评论:(0)  加入收藏
今天分享几款谷歌浏览器插件,这次呢,把我压箱底的几款可以分享的,拿出来给大家分享一下。 第一款是网页样式管理——Stylus它可以让你浏览的网页改变网页布局,让它更...【详细内容】
2020-01-13   Chrome  点击:(5)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条