Chrome DevTools 官方文档整理，发现了一些好用的小技巧，欢迎把玩~

dev_web
1,246 阅读6分钟

image.png

前言

Chrome在9月12号，发布了最新的版本117，更新了很多实用的DevTools 新特性，借着这个热度整理了一些鲜为人知，但非常实用的技巧，提升日常开发效率，希望大家能够得到 "咦，居然还能这样~" 的收获。

  1. 在尝试本文事例代码前，请保证chrome浏览器版本是最新版。
  2. 文章尾部含有事例文件。

commands 命令行

  • Control + ~ 可以快速在控制台获取焦点。
  • Control + L 清空控制台消息
  • command P 打开命令窗口 按?可获得提示

更多命令行操作请查看

Sources

snippets片段

开发过程中有没有一些自己在控制台使用的常用脚本？如果有，可以保存在snippets中。

打开路径 Sources> More tabs > Snippets

tip: 按Command+Enter 立即运行 tip: command+p后加!+文件名调用

使用说明：

  1. 片段的存储地址是本地，不会根据账号同步，无法通过文件系统访问。
  2. 存储是chrome账号隔离，一个账号多个tab和无痕模式都会同步(如果发现新增的没有，可以尝试关闭后重新开启开发者工具)
  3. 启用的方式有多种多样，command+Enter 或者用命令行command+p后+!脚本名 的方式去启动。

buy the way

  1. 这个功能可以当做开发人员的"工具箱"。
  2. 如果满足不了，可以尝试油猴或者chrome插件功能去增强。

更多性能相关的片段请参考这里

Overrides功能

这个功能可以说是chrome117版本最亮眼的功能~

通过本地覆盖，可以覆盖 HTTP 响应头和返回体（包括 XHR 和获取请求）以模拟远程资源，即使后端和 API 尚未准备好，也可以模拟 API 响应数据。

DevTools 目前支持以下请求类型的内容覆盖：图像（例如 avif、png）、字体、fetch 和 XHR、脚本（css 和 js）以及文档 (html)。 DevTools 现在将不支持的“Override content”选项灰色显示。

使用说明：

  1. 选择一个空文件夹即可。
  2. 同意文件访问询问完后，chrome会在你选择的文件夹中写入当前选中的文件，目录如下图
  3. 可以选择在本地编辑也可以选择在Sources>Overrides中点击对应的文件进行编辑。
  4. 点编辑器最左下角{}格式化后方便编辑，保存完后刷新浏览器看到小图标和页面更改的内容则表示覆盖成功。

tip: 留意Sources>Enable Local Overrides 的是否勾选

事例

  1. response覆盖

  1. fetch: overriders headers覆盖 scarlet-roasted-cannon.glitch.me/网站 访问coffee-cart.app/list.json fetch接口请求

  2. 点击需要覆盖的请求右键选中overriders headers功能

  3. add Hader功能添加响应头Access-Control-Allow-Origin:*

  4. 刷新即可正常访问

  5. 操作的头部信息会在Sources>Overrides>coffee-cart.app>.headers中保存

buy the way

  1. Overrides功能在chrom65版本(18年)更新的功能，本次是优化使用体验，新增入口到NetWork处。
  2. 再也不需要mock数据，代码无缝衔接，开发期间再也不用求人造测试数据了😏
  3. Fetch/XHR的覆盖，目前只支持Response Header 和Response data 数据 不支持请求头和请求参数的覆盖。
  4. 代码已附在文尾 涉及网站 scarlet-roasted-cannon.glitch.me/ coffee-cart.app
  5. 更多详细内容请访问chrome[官方DevTools文档(developer.chrome.com/docs/devtoo…)

条件断点

当调试想进入特定的条件，避免多次跳过才进入可以使用条件断点。

该功能是17年70版本新增，近期23年7月115版本进行使用上的调整。

日志断点

dom断点

使用说明：在element上鼠标点击右键选中Break on> attribute modifications Dom有蓝色标记代表断点成功


attribute modifications：属性断点

subtree modifications：树节点断点

断点演示触发：

选中dom节点后，在控制台执行$0.setAttribute("a",1)即可断点成功

这对页面触发dom元素更改的交互溯源js是非常有用的，当然如果刷新页面加载会让断点丢失，也就是断点不到页面初始化的脚本对dom交互，需要留意下。

Network

Block request URL 阻止请求

当猜测页面某些资源不可用时候，页面会有什么变化？这个资源的加载是否对主体功能有影响？以下操作可以阻碍当前选中url(刷新也生效)。

具体说明

  1. Network request blocking编辑支持正则。

这对排查资源加载，做定量分析很有用。

replay XHR 重复发送网络请求

使用说明：

  1. 选中后按"R"健
  2. 右键单击后选择Replay XHR

这对单独调试请求来说十分的方便，不需要额外刷新整个页面。

过滤请求

按属性过滤请求

status-code: 状态码过滤

使用说明： 当输入 : 后这里会去重该网站的所有状态码变成可选

可用于快速定位到异常请求

is:from-cache 是否缓存

is:running 是否是webSocket资源

使用说明： 同样当输入 : 变成可选

按照类型过滤

mime-type:image/webp larger-than:500k:

使用说明：

  1. 筛选出是webp格式并且大于500k的图片
  2. 文件类型(mime-type:image/webp)也可以直接点击Img的标签(下图箭头icon)进行过滤

这对检查网站过大图片资源非常有用

按时间过滤请求

使用说明： 注意这里需要开启Settings>Overview功能才显示

使用说明： 右下角：蓝线(DOMContentLoaded) 红线(onload)

这对首屏资源加载时序的排查场景非常有用

更多属性过滤规则请看这里

添加自定义列

NetWork面板支持自定义列配置，包括可以外显自定义响应头，而不需要每个请求点进去查看。

查看资源和依赖项

查看请求的来源，可以按住Shift点击鼠标左键，可以看到来源项标记为绿色

使用说明： 通常情况请求链路过长，可以看 Initiator 选项中的请求链。

这对资源排查时溯源很有帮助。

Console

按消息来源过滤

当只想查看来自特定 URL 的消息时，可以使用侧边栏。

当调试指定文件的脚本非常有用。

脚本实时观察

当遇到动态的交互，需要通过脚本实时获取某个计算结果时可以用下面的脚本实时观察功能。

可以连续添加多个脚本

实际场景: 动画的临界点判断，当滚动条大于多少的时候才出现动画合适？

添加window.scrollY观察

demo.gif

使用说明: 固定表达式下方的值是其结果。结果每 250ms 更新一次。

控制台换行编写

Shift + Enter 另起一行，方便编写代码。

console中实用API

$_ 对结果的累加

$0 - $4

Elements面板最近选中的DOM元素或者js对象

$(selector [, startNode])

selector: css元素选择器

startNode: 可选 指定要从中搜索元素的“元素”或节点。参数的默认值为 document

相当于document.querySelector()

如果网站中有jqury会覆盖原本的$。

$$(selector [, startNode])

selector: css元素选择器

startNode: 可选 指定要从中搜索元素的“元素”或节点。参数的默认值为 document

相当于Array.from(document.querySelectorAll())

profile([name]) / profileEnd([name])

profile() 使用可选名称启动 JavaScript CPU 分析会话。 profileEnd() 完成配置文件并在“性能”>“主轨道”中显示结果。

//开始分析：
profile("Profile 1")
//结束分析
profileEnd("Profile 1")

使用说明：

  1. 名字要一样，可以支持嵌套。

这对针对特定交互分析对应脚本非常有用。

添加为全局变量

**使用说明：**在控制台内遇到dom或者debugger中的js对象点击右键可另存为一个临时变量，会以temp1+命名

可以临时保存下来做二次运算

Elements

DOM操作

DOM属性选择：

使用说明：

鼠标-双击 or 按键Enter

默认选中第一个属性，后按Tab选下切换属性，按Shift+Tab向上选中属性

DOM复制元素：

使用说明：

鼠标右键选择Duplicate element or 按键 Shift + Alt(option) + Down arrow

和vscode操作一样

dom操作包括方向键，拖拽，等都是可交互的，交互非常自然。 这些操作，在日常编写布局时，容器超出，文本模拟等场景非常有用。

更多操作请看这里

DOM隐藏

使用说明： 选中dom元素后按"H"建即可

它会在页面上添加visibility: hidden !important; 样式来隐藏，还是有占位，如果需要完全删除可以按删除键即可。

CSS操作

向元素添加 CSS 类

双击单独去改class属性会比较繁琐(尤其在class很多的时候)，可以直接使用.cls功能

这对调试一些需要class控制隐藏显示的场景非常有用

CSS值的修改

修改尺寸

使用“样式”窗格中的盒模型交互图来更改元素的宽度、高度、内边距、边距或边框长度。

使用说明： 单位默认是px，也可以接受其他单位

值的修改

  • Option + Up (Mac) 或 Alt + Up (Windows、Linux) 以 0.1 递增。(对opacity透明度非常有用)
  • Up 增加1
  • Shift + Up 增加 10。
  • Shift + Command + Up (Mac) 或 Control + Shift + Page Up
  • 鼠标hover到数字变成横向箭头双向箭头

test.gif 当要进行微调时非常有用。

记不住没关系，用的时候Control or option or shift + 方向键刻意尝试即可。

颜色转换

shift+鼠标左键

感兴趣可以阅读深入了解颜色，High Definition CSS Color Guide 解释了web网页会有这么多种颜色单位。

旋转角度

使用说明： 点击icon进行角度调整

shift+左键 同样可以切换单位

阴影

使用说明： 点击icon进行阴影调试

动画

使用说明： 点击icon进行贝塞尔曲线的调试

gird

使用说明： 点击icon进行gird布局调试


flex

使用说明： 点击icon进行flex布局调试

更多关于值的调试请看这里

写在最后

感谢您宝贵的时间看到这里，文中有疑问的地方欢迎评论交流，觉得对您有用，欢迎点赞分享让更多人看见~，也是对我最大的鼓励。

参考资料

chrome devtools官方文档: Chrome DevTools - Chrome for Developers

Chrome 117 DevTools 投喂指南: shopline.yuque.com/chkdwd/camv…

chrome发布日程：Chromium Dash

代码文件

gitee.com/biglove/dem…

执行override功能后选择后你会看到如下内容

avatar
文章
阅读
粉丝