社区编辑申请
注册/登录
Chrome调试工具的一些高阶功能
系统 浏览器
本文主要介绍Chrome调试工具的一些高阶功能。在浏览器地址栏输入 chrome://net-internals/#events ,即可打开自带的抓包工具。
  • Chrome 内置抓包工具
  • Block requests
  • 截取长图
  • 代码的覆盖率分析
  • Make site better
  • 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。

责任编辑:未丽燕 来源: 百度EUX
相关推荐

2021-07-06 11:25:20

2022-07-29 09:01:20

2022-08-02 08:01:09

开发插件Chrome前端技术

2022-07-13 14:40:50

Chrome前端日常开发

2022-03-27 20:52:41

Chrome插件开发

2020-12-15 11:05:21

JavascriptChrome浏览器

2017-10-09 10:04:48

JavaScriptChrome DevT调试

2022-01-25 12:41:31

2019-02-15 15:15:59

ChromeJavascriptHtml

2019-11-14 14:44:32

开发者工具

2020-12-08 09:28:26

Chrome函数代码

2020-04-14 09:26:43

开发工具Chrome

2009-05-04 09:11:28

GoogleChrome浏览器

2016-03-23 10:51:53

2020-11-10 07:31:01

Chrome

2009-09-14 10:07:21

2020-09-24 11:25:18

Chrome 浏览器 Windows

2019-10-08 16:24:33

Chrome浏览器

2009-05-25 08:52:47

GoogleChrome浏览器

2020-03-08 16:58:51

Chrome浏览器代码

同话题下的热门内容

谷歌 Chrome 浏览器 104 正式版发布:加快网页加载,蓝牙 API 改进Chrome 插件开发指南请不要再下载这些Vscode插件了苹果 M2 MacBook Pro Safari 浏览器性能测试:有史以来最快速度比各种清理大师靠谱!Edge浏览器新技术大幅提速Firefox 火狐浏览器 105 工具栏正测试统一管理扩展按钮浏览器瞬间变成相册 教你开启Chrome隐藏新功能

编辑推荐

如何通过Google Chrome远程控制你的Windows 10系统五大浏览器,四大内核,指的都是什么?2018年改善上网浏览体验的10款安卓浏览器Chrome的防重定向跳转机制PC浏览器凌冬已至,移动端才是未来
我收藏的内容
点赞
收藏

51CTO技术栈公众号