“性能”面板中会弹出网页指标信息
将鼠标悬停在性能面板中的网页指标标记上,即可了解指标内容:是良好、需要改进还是不佳。
Chromium 问题:1147872
直观呈现 CSS 滚动贴靠
现在,您可以在 Elements 面板中切换 scroll-snap
标记,以检查 CSS 滚动贴靠对齐情况。
当您网页上的某个 HTML 元素(例如此演示页面)应用了 scroll-snap-type
后,在元素面板中,该元素旁边就会显示一个 scroll-snap
标志。点击该标志可切换页面上是否显示滚动贴靠叠加层。
在上例中,您可以在贴靠边缘上看到点标记。滚动端口有实线轮廓,贴靠项有虚线轮廓。滚动内边距为绿色,而滚动外边距为橙色。
Chromium 问题:862450
新的内存检查器
使用新的内存检查器检查 JavaScript 中的 ArrayBuffer
以及 Wasm 内存。
打开此演示页面。在 Sources 面板中,打开 demo-js.js 文件,并在第 18 行设置一个断点。
刷新页面。 展开右侧 debugger 窗格中的 Scope 部分。请注意 buffer 值旁边的新图标。点击它以显示 Memory Inspector。
请查看相关文档,详细了解如何使用这款全新的内存检查器检查 JavaScript ArrayBuffer
和 WebAssembly.Memory
。
Chromium 问题:1166577
“元素”面板中的新标记设置窗格
现在,您可以通过元素面板中的标记设置有选择地启用或停用徽章。在检查网页时使用此功能可自定义并重点关注重要标记。
在元素面板中,右键点击任意元素。从上下文菜单中选择徽章设置,徽章设置窗格会显示在顶部。选中或取消选中任何复选框,即可显示/隐藏徽章。
Chromium 问题:1066772
包含宽高比信息的增强型图片预览
现在,元素面板中的图片预览会显示有关图片的更多信息 - 渲染尺寸、渲染宽高比、固有尺寸、固有宽高比和文件大小。
这些信息有助于您更好地了解您的图片,并在需要时应用优化。
当您点击预览图片时,网络面板中也会看到图片的宽高比信息。
“新建网络条件”按钮,其中包含用于配置 Content-Encoding
的选项
网络面板中新增了一个网络状况按钮。点击该条目以打开网络状况标签页。
网络条件标签页中新增了接受的内容编码选项。您可以对其进行配置,以测试在不支持 gzip、brotli 或其他未来 Content-Encoding
的浏览器中,服务器响应是否能够正确编码。
Chromium 问题:1162042
“样式”窗格增强功能
用于在“样式”窗格中查看计算值的新快捷方式
现在,您可以右键点击 Styles 窗格中的 CSS 属性,然后选择查看计算的值,以查看计算出的 CSS 值。
Chromium 问题:1076198
支持 accent-color
关键字
现在,“Styles”窗格的自动补全界面会检测 accent-color
CSS 关键字,这可让网站开发者为相应元素生成的界面控件(例如复选框、单选按钮)指定强调色。
accent-color
CSS 属性目前处于实验阶段。请启用 chrome://flags/#enable-experimental-web-platform-features
以进行测试。
Chromium 问题:1092093
使用颜色和图标对问题类型进行分类
现在,问题标签页会将问题分类为网页错误、即将进行的破坏性更改以及可能的改进,以便更好地指明严重程度。在控制台中点击问题数按钮,即可打开问题标签页。
- 网页错误(红色)。会对网页功能产生直接影响的问题,例如未正确设置正确的 CORS 标头等。
- 即将发生的重大变更(黄色)。表明网络平台即将发生不兼容的变更,可能会导致网页功能丢失的问题(例如,警告即将实施 CORS RFC 1918 变更)。
- 可能的改进(蓝色)。可能会改进网页,但目前不影响网页的基本功能(例如无障碍功能问题)
Chromium 问题:1183241
删除信任令牌
现在,您可以使用应用面板下的信任令牌窗格中的新删除按钮删除信任令牌。
信任令牌是一种新的 API,可帮助打击欺诈行为并将机器人与真人区分开来,而无需被动跟踪。了解如何开始使用信任令牌。
Chromium 问题:1126824
在“帧详情”视图中查看被屏蔽的功能的详细信息
现在,您可以在“框架详情”视图中的权限政策部分下查看被屏蔽功能的详细信息。
打开此演示页面。转到应用面板,然后选择一个框架。在权限政策部分,滚动到已停用的功能属性。点击显示详细信息可查看该功能遭禁用的原因。点击各项政策旁边的图标,即可前往屏蔽相应功能的 iframe 或网络请求。
权限政策是一种网络平台 API,可让网站在其自身的框架或嵌入的 iframe 中允许或禁止使用浏览器功能。
Chromium 问题:1158827
在“实验”设置中过滤实验
使用新的实验过滤条件,更快找到实验。例如,依次前往设置 > 实验,在过滤条件文本框中,输入“对比”以过滤出包含“对比”一词的所有实验。
“Cache storage”窗格中新增了 Vary Header
列
您可以使用 Cache Storage 窗格中新的 Vary Header
列来查看 Vary HTTP 响应标头。
Chromium 问题:1186049
“来源”面板的改进
支持新的 JavaScript 功能
现在,开发者工具支持新的自有品牌检查 JavaScript 语言功能(也称为 #foo in obj
)。
此专用品牌检查功能扩展了 in 运算符,以支持任何给定对象的私有类字段测试。
您可以在控制台和来源面板中试用此功能。您也可以检查 debugger 窗格下的 Scope 部分中的不公开字段。
Chromium 问题:11374
增强了对断点调试的支持
现在,开发者工具现在可以在多个脚本中正确设置断点了。新型 JavaScript 捆绑器(例如 Webpack、Rollup)支持代码拆分功能 - 在某些情况下,一个共享组件可以包含在多个路由(代码拆分)中。
以前,开发者工具只能在一个原始位置设置断点。得益于这项最新改进,开发者工具可以在所有相关位置正确设置断点。
Chromium 问题:1142705、979000、1180794
支持采用 []
表示法的悬停预览
现在,开发者工具支持在 Sources 面板中使用 []
表示法的 JavaScript 成员表达式上进行悬停预览。
Chromium 问题:1178305
改进的 HTML 文件大纲
现在,开发者工具可以更好地为 HTML 文件提供大纲支持。在来源面板中,打开一个 HTML 文件。您可以在 Mac 中使用键盘 Cmd + Shift + O 或者在 Windows 中使用 Ctrl + Shift + O 来切换代码大纲。
在下面的示例中,开发者工具现在可以正确列出概览中的所有函数。以前,开发者工具仅显示部分函数。
用于 Wasm 调试的适当错误堆栈轨迹
现在,开发者工具可以解析内联函数调用,并为 Wasm 调试显示正确的错误堆栈轨迹。
以前,开发者工具仅在错误堆栈轨迹中显示通用 Wasm 引用。
左侧的旧版 Chrome 不会在错误堆栈轨迹中显示来源位置(例如 dsquare
),而右侧则显示新版本。
Chromium 问题:1189161
下载预览渠道
您可以考虑将 Chrome Canary 版、Dev 版或 Beta 版用作默认开发浏览器。通过这些预览渠道,您可以使用最新的开发者工具功能,测试先进的网络平台 API,并在用户采取行动之前发现网站上的问题!
与 Chrome 开发者工具团队联系
使用以下选项讨论博文中的新功能和变化,或讨论与开发者工具有关的任何其他内容。
- 通过 crbug.com 提交建议或反馈。
- 使用开发者工具中的更多选项 > Help > Report a DevTools issues来报告开发者工具问题。
- 发推文:@ChromeDevTools。
- 请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。
开发者工具的新变化
开发者工具的新变化系列中涵盖的所有内容的列表。
Chrome 126
- 改进了“性能”面板
- 使用更新后的轨道配置模式移动和隐藏轨道
- 忽略火焰图中的脚本
- 将 CPU 降低 20 倍
- 性能数据分析面板将弃用
- 使用堆快照中的新过滤器查找过多的内存用量
- 在“应用”>“存储”中检查存储分区
- 使用命令行标志停用自 XSS 警告
- Lighthouse 12.0.0
- 其他亮点内容
Chrome 125
- 借助 Gemini 更好地了解控制台中的错误和警告
- “元素”>“样式”中支持@position-try 规则
- “来源”面板的改进
- 配置自动美观输出和括号关闭功能
- 已处理的遭拒 promise 被识别为捕获了
- 控制台中的错误原因
- 网络面板改进
- 检查 Early Hints 标头
- 隐藏“瀑布流”列
- 改进了“性能”面板
- 获取 CSS 选择器统计信息
- 更改顺序并隐藏轨道
- “Memory”面板中的忽略保留器
- Lighthouse 11.7.1
- 其他亮点内容
Chrome 124
- 新的“自动填充”面板
- 针对 WebRTC 的增强型网络节流
- “动画”面板中的滚动驱动动画支持
- 改进了“元素”>“样式”中的 CSS 嵌套支持
- “增强型性能”面板
- 在火焰图中隐藏函数及其子项
- 箭头从所选发起者指向他们发起的活动
- Lighthouse 11.6.0
- 有关内存 > 堆快照中特殊类别的提示
- 应用 > 存储空间更新
- 共享存储空间使用的字节数
- Web SQL 已完全弃用
- “覆盖率”面板改进
- “图层”面板可能已弃用
- JavaScript 性能分析器弃用:第四阶段,最终阶段
- 其他亮点内容
Chrome 123
- 寻找复活节彩蛋
- 元素面板更新
- 依次前往“元素”>“样式”模拟聚焦的页面
var()
回退中的颜色选择器、角度时钟和加/减速编辑器- CSS 长度工具已弃用
- “Performance”>“Main track”中所选搜索结果的弹出式窗口
- 网络面板更新
- “网络”>“EventStream”标签页中的“清除”按钮和搜索过滤器
- “广告联盟”>“Cookies”中有关第三方 Cookie 豁免原因的提示
- 启用和停用“来源”中的所有断点
- 在适用于 Node.js 的开发者工具中查看已加载的脚本
- Lighthouse 11.5.0
- 无障碍功能改进
- 其他亮点内容
Chrome 122
- 录音机扩展程序官方系列已发布
- 网络改进
- “状态”列中的失败原因
- 改进的“复制”子菜单
- 性能提升
- 时间轴中的面包屑导航
- 主轨道中的事件发起者
- Node.js DevTools 的 JavaScript 虚拟机实例选择器菜单
- “来源”中新增了快捷方式和命令
- 元素改进
- 现在,可在“Styles”中修改 ::view-transition 伪元素
- 对块容器的 align-content 属性支持
- 针对模拟可折叠设备的折叠状态支持
- 动态主题
- “网络和应用”面板中的第三方 Cookie 逐步淘汰警告
- Lighthouse 11.4.0
- 无障碍功能改进
- 其他亮点内容
Chrome 121
- 元素改进
- “网络”面板中经过简化的过滤栏
@font-palette-values
支持- 支持的情况:自定义属性作为另一个自定义属性的后备
- 改进了源代码映射支持
- 改进了“性能”面板
- “增强型互动”跟踪
- “Bottom-Up”“Call Tree”和“Event Log”标签页中的高级过滤
- “来源”面板中的缩进标记
- 关于“网络”面板中已替换标题和内容的实用提示
- 用于添加和移除请求屏蔽模式的新命令菜单选项
- CSP 违规行为实验已移除
- Lighthouse 11.3.0
- 无障碍功能改进
- 其他亮点内容
Chrome 120
- 第三方 Cookie 逐步淘汰
- 使用 Privacy Sandbox 分析工具分析网站的 Cookie
- 增强的忽略列表
- node_modules 的默认排除模式
- 现在,如果捕获的异常被捕获或通过未忽略的代码传递,则会停止执行
x_google_ignoreList
在源代码映射中已重命名为ignoreList
- 远程调试期间新增了输入模式切换开关
- “元素”面板现在会显示 #document 节点的网址
- “Application”面板中的有效内容安全政策
- 改进了动画调试
- Sources 和控制台中的 self XSS 警告中的“Do you trust this code?”对话框
- Web Worker 和 Worklet 中的事件监听器断点
<audio>
和<video>
的新媒体徽章- “预加载”已重命名为“推测加载”
- Lighthouse 11.2.0
- 无障碍功能改进
- 其他亮点内容
Chrome 119
- 改进了“元素”>“样式”中的 @property 部分
- 可修改的 @property 规则
- 系统会报告 @property 规则无效的问题
- 更新了要模拟的设备列表
- 在“Sources”的脚本标记内美观输出内嵌 JSON
- 在控制台中自动补全私密字段
- Lighthouse 11.1.0
- 无障碍功能改进
- Web SQL 弃用
- 在“应用”>“清单”中验证屏幕截图宽高比
- 其他亮点内容
Chrome 118
- 在“元素”>“样式”中新增了自定义属性部分
- 更多本地替换项改进
- 增强型搜索功能
- 经过改进的“来源”面板
- 简化了“Sources”面板中的工作区
- 对“Sources”中的窗格重新排序
- 支持更多脚本类型的语法突出显示和美观输出
- 模拟“首选降低透明度”的媒体功能
- Lighthouse 11
- 无障碍功能改进
- 其他亮点内容
Chrome 117
Chrome 116
- 改进了针对缺少样式表的调试功能
- “元素”>“样式”>“加/减速编辑器”中的线性时间支持
- 存储分区支持和元数据视图
- Lighthouse 10.3.0
- 无障碍功能:键盘命令和改进的屏幕阅读功能
- 其他亮点内容
Chrome 115
- 元素改进
- 全新 CSS subgrid 徽章
- 提示中的选择器特异性
- 提示中自定义 CSS 属性的值
- 来源改进
- CSS 语法突出显示
- 用于设置条件断点的快捷方式
- 应用 > 跳出跟踪缓解措施
- Lighthouse 10.2.0
- 默认忽略内容脚本
- 网络 > 响应改进
- 其他亮点内容
Chrome 114
- WebAssembly 调试支持
- 改进了 Wasm 应用中的步进行为
- 使用“元素”面板和“问题”标签页调试自动填充
- 录音机中的断言
- Lighthouse 10.1.1
- 性能提升
- performance.mark() 在“性能”>“计时”中显示悬停时间
- profile() 命令填充“Performance”>“Main”
- 有关用户互动缓慢的警告
- 网页指标更新
- JavaScript 性能分析器弃用:第三阶段
- 其他亮点内容
Chrome 113
- 替换网络响应标头
- Nuxt、Vite 和 Rollup 调试方面的改进
- “元素”>“样式”中的 CSS 改进
- CSS 属性和值无效
- 动画简写属性中指向关键帧的链接
- 新的控制台设置:按 Enter 键时自动补全
- 命令菜单重点显示已创建的文件
- JavaScript 性能分析器弃用:第二阶段
- 其他亮点内容
Chrome 浏览器 112
- 录音机更新
- 录音机重放扩展程序
- 使用穿孔选择器录音
- 使用 Lighthouse 分析功能将录制内容导出为 Puppeteer 脚本
- 获取“录音机”扩展程序
- 元素 > 样式更新
- “Styles”窗格中的 CSS 文档
- CSS 嵌套支持
- 在控制台中标记日志点和条件断点
- 在调试期间忽略不相关的脚本
- 开始弃用 JavaScript 性能分析器
- 模拟对比度下降
- Lighthouse 10
- 其他亮点内容
Chrome 111
Chrome 浏览器 110
- 重新加载时清除性能面板
- 录音机更新
- 在“录音机”中查看并突出显示用户流代码
- 自定义录音的选择器类型
- 在录制时修改用户体验流程
- 自动就地打印
- 改进了 Vue、SCSS 等项目的语法突出显示和内嵌预览功能
- 控制台中符合人体工学且一致的自动补全功能
- 其他亮点内容
Chrome 入门指南
- 录音机:作为步骤选项、页内重放、步骤的上下文菜单进行复制
- 在性能录制内容中显示实际函数名称
- “控制台和来源”面板中新增了键盘快捷键
- 改进的 JavaScript 调试功能
- 其他亮点内容
- [实验性] 增强管理断点的用户体验
- [实验性] 自动就地打印
Chrome 入门指南
Chrome 入门指南
- 在开发者工具中自定义键盘快捷键
- 使用键盘快捷键切换浅色和深色主题
- 在内存检查器中突出显示 C/C++ 对象
- 支持 HAR 导入的完整发起者信息
- 按
Enter
后启动 DOM 搜索 - 为
align-content
CSS flexbox 属性显示start
和end
图标 - 其他亮点内容
Chrome 入门指南
- 在“Sources”面板中按“已编写”/“已部署”对文件进行分组
- 针对异步操作的关联堆栈轨迹
- 自动忽略已知的第三方脚本
- 改进了调试期间的调用堆栈
- 在“来源”面板中隐藏已列入忽略名单的来源
- 在命令菜单中隐藏已忽略列表的文件
- “效果”面板中的新互动跟踪
- “Performance Insights”面板中的 LCP 时间明细
- 在“记录器”面板中为录制内容自动生成默认名称
- 其他亮点内容
Chrome 入门指南
- “录音机”中的分步重放
- 在“记录器”面板中支持鼠标悬停事件
- “性能数据分析”面板中的 Largest Contentful Paint (LCP)
- 识别闪光灯(FOIT、FOUT)是导致布局偏移的潜在根本原因
- “Manifest”窗格中的协议处理程序
- “元素”面板中的顶层标志
- 在运行时附加 Wasm 调试信息
- 支持在调试期间进行实时编辑
- 在“样式”窗格中在规则中查看和修改 @scope
- 源代码映射改进
- 其他亮点内容
Chrome 入门指南
- 调试期间重启帧
- “Recorder”面板中的慢速重放选项
- 为“Recorder”面板构建扩展程序
- 在“Sources”面板中按“已编写”/“已部署”对文件进行分组
- “性能数据分析”面板中的“新用户计时”轨道
- 显示为元素分配的槽位
- 为性能记录模拟硬件并发
- 在自动填充 CSS 变量时预览非颜色值
- 在往返缓存窗格中识别阻塞帧
- 改进了针对 JavaScript 对象的自动补全建议
- 源代码映射改进
- 其他亮点内容
Chrome 入门指南
- 在“Recorder”面板中捕获双击和右键点击事件
- Lighthouse 面板中新的时间跨度和快照模式
- 改进了“性能数据分析”面板中的缩放控件
- 确认删除表演录音
- 在“元素”面板中对窗格重新排序
- 选择浏览器之外的颜色
- 改进了调试期间的内嵌值预览
- 支持为虚拟身份验证器使用大型 blob
- “来源”面板中的新键盘快捷键
- 源代码映射改进
Chrome 入门指南
- 预览版功能:新的“效果数据分析”面板
- 用于模拟浅色主题和深色主题的新快捷方式
- 提升了“网络预览”标签页的安全性
- 改进了在断点处的重新加载
- 管理中心更新
- 在开始时取消用户流记录
- 在“Styles”窗格中显示继承的突出显示伪元素
- 其他亮点内容
- [实验性] 复制 CSS 更改
- [实验性] 在浏览器之外选择颜色
Chrome 入门指南
- 以 JSON 文件的形式导入和导出记录的用户流
- 在“样式”窗格中查看级联层
- 支持
hwb()
颜色函数 - 改进了私有属性的显示方式
- 其他亮点内容
- [实验性] Lighthouse 面板中新增了时间跨度和快照模式
Chrome 100
Chrome 99
- 限制 WebSocket 请求
- “Application”面板中的“New Reporting API”窗格
- 支持等待元素在“记录器”面板中可见/可点击
- 优化了控制台样式、格式和过滤功能
- 使用源映射文件调试 Chrome 扩展程序
- 改进了“Sources”面板中的源代码文件夹树
- 在“Sources”面板中显示工作器源文件
- Chrome 的自动深色主题更新
- 易于轻触的颜色选择器和拆分窗格
- 其他亮点内容
Chrome 98
- 预览功能:整页无障碍树
- “更改”标签页中的更改更精准
- 为用户体验流程记录设置较长的超时
- 使用“往返缓存”标签页确保您的网页可缓存
- 新建“属性”窗格过滤条件
- 模拟 CSS forced-colors 媒体功能
- 悬停命令时显示标尺
- 在 Flexbox 编辑器中支持
row-reverse
和column-reverse
- 新增了用于重放 XHR 和展开所有搜索结果的键盘快捷键
- Lighthouse 面板中的 Lighthouse 9
- 经过改进的“来源”面板
- 其他亮点内容
- [实验性] Reporting API 窗格中的端点
Chrome 97
Chrome 96
- 预览功能:新的“CSS 概览”面板
- 恢复并改进了 CSS 长度编辑和复制体验
- 模拟 CSS Preferencess-contrast 媒体功能
- 模拟 Chrome 的自动深色主题功能
- 在“Styles”窗格中以 JavaScript 形式复制声明
- Network 面板中的新载荷标签页
- 改进了“属性”窗格中的属性显示方式
- 可以在控制台中隐藏 CORS 错误
- 在控制台中预览和评估适当的
Intl
对象 - 一致的异步堆栈轨迹
- 保留控制台边栏
- Application 面板中已废弃的 Application Cache 窗格
- [实验性] Application 面板中的 New Reporting API 窗格
Chrome 95
- 全新 CSS 长度制作工具
- 在“问题”标签页中隐藏问题
- 改进了属性显示
- Lighthouse 面板中的 Lighthouse 8.4
- 在“Sources”面板中对代码段进行排序
- 添加了指向翻译版版本说明和报告翻译 bug 的新链接
- 改进了开发者工具命令菜单的界面
Chrome 94
- 以您的首选语言使用开发者工具
- “设备”列表中的新 Nest Hub 设备
- “帧详情”视图中的源试用
- 全新“CSS 容器查询”徽章
- 用于反转网络过滤器的新复选框
- 即将弃用控制台边栏
- 在“Issues”(问题)标签页和“Network”(网络)面板中显示原始
Set-Cookies
标头 - 在控制台中一致地将原生访问器显示为自己的属性
- 带有 #source网址 的内嵌脚本的适当错误堆栈轨迹
- 在“Computed”窗格中更改颜色格式
- 将自定义提示替换为原生 HTML 提示
- [实验性] 在“问题”标签页中隐藏问题
Chrome 93
- “样式”窗格中可修改的 CSS 容器查询
- “网络”面板中的 Web 软件包预览
- Attribution Reporting API 调试
- 改进了控制台中的字符串处理
- 改进的 CORS 调试
- Lighthouse 8.1
- 在“清单”窗格中新建备注网址
- 修复的 CSS 匹配选择器
- “网络”面板中的整齐打印 JSON 响应
Chrome 92
- CSS 网格编辑器
- 在控制台中支持
const
重复声明 - Source Order Viewer
- 用于查看画面详细信息的新快捷方式
- 增强型 CORS 调试支持
- 将 XHR 标签重命名为 Fetch/XHR
- 在“网络”面板中过滤 Wasm 资源类型
- “网络状况”标签页中的设备用户代理客户端提示
- 在“问题”标签页中报告怪异模式问题
- 在“性能”面板中添加计算交集
- Lighthouse 面板中的 Lighthouse 7.5
- 废弃了调用堆栈中的“重启帧”上下文菜单
- [实验性] 协议监控器
- [实验性] 木偶演奏器
Chrome 91
- 网页指标信息弹出式窗口
- 新的内存检查器
- 直观呈现 CSS 滚动贴靠
- 新建徽章设置窗格
- 包含宽高比信息的增强型图片预览
- “新建网络条件”按钮,其中包含用于配置
Content-Encoding
的选项 - 用于查看计算值的快捷方式
accent-color
关键字- 使用颜色和图标对问题类型进行分类
- 删除信任令牌
- “帧详情”视图中被屏蔽的功能
- 在“实验”设置中过滤实验
- “Cache storage”窗格中新增了
Vary Header
列 - 支持 JavaScript 自有品牌检查
- 增强了对断点调试的支持
- 支持使用
[]
表示法的悬停预览 - 改进的 HTML 文件大纲
- 适用于 Wasm 调试的错误堆栈轨迹
Chrome 90
- 全新 CSS flexbox 调试工具
- 新增了 Core Web Vitals 叠加层
- 将问题数量移到了控制台状态栏
- 报告 Trusted Web Activity 问题
- 在控制台中将字符串的格式设置为(有效)JavaScript 字符串字面量
- “Application”面板中的“New Trust Tokens”窗格
- 模拟 CSS color-gamut 媒体功能
- 经过改进的渐进式 Web 应用工具
- 在“网络”面板中新增了
Remote Address Space
列 - 性能提升
- 在“帧详情”视图中显示允许/禁止的功能
- 在“Cookies”窗格中新增了
SameParty
列 - 已废弃的非标准
fn.displayName
支持 - 弃用“设置”菜单中的
Don't show Chrome Data Saver warning
- [实验性] 在“问题”标签页中自动报告低对比度问题
- [实验性] 元素面板中的完整无障碍功能树状视图
Chrome 89
- 针对“受信任类型”违规行为的调试支持
- 在视口以外截取节点屏幕截图
- 适用于网络请求的新“信任令牌”标签页
- Lighthouse 面板中的 Lighthouse 7
- 支持强制使用 CSS
:target
状态 - 用于复制元素的新快捷方式
- 适用于自定义 CSS 属性的颜色选择器
- 用于复制 CSS 属性的新快捷键
- 用于显示经过网址解码的 Cookie 的新选项
- 仅清除可见的 Cookie
- 用于在“存储”窗格中清除第三方 Cookie 的新选项
- 修改自定义设备的用户代理客户端提示
- 保留“记录网络日志”设置
- 在“网络”面板中查看 WebTransport 连接
- “在线”已重命名为“无节流”
- “控制台”、“来源”面板和“样式”窗格中的新复制选项
- Frame 详情视图中的新 Service Worker 信息
- 在“帧详情”视图中测量内存信息
- 通过“问题”标签页提供反馈
- “性能”面板中的丢帧数
- 在 Device Mode 下模拟可折叠设备和双屏设备
- [实验性] 使用 Puppeteer 记录器自动执行浏览器测试
- [实验性]“样式”窗格中的字体编辑器
- [实验性] CSS flexbox 调试工具
- [实验性] 全新的 CSP 违规行为标签页
- [实验性] 新的色彩对比度计算 - 高级感知对比度算法 (APCA)
Chrome 88
- 开发者工具启动速度更快
- 全新 CSS 角度可视化工具
- 模拟不支持的图片类型
- 在“存储”窗格中模拟存储配额大小
- “性能”面板中新增了“网页指标”通道
- 在“网络”面板中报告 CORS 错误
- “帧详情”视图中的跨域隔离信息
- “框架详情”视图中的新 Web Worker 信息
- 显示已打开窗口的 Opener 框架详细信息
- 从“Service Workers”窗格打开“网络”面板
- 复制属性值
- 复制网络发起者的堆栈轨迹
- 在鼠标悬停时预览 Wasm 变量值
- 在控制台中评估 Wasm 变量
- 为文件/内存大小使用一致的测量单位
- 在“元素”面板中突出显示伪元素
- [实验性] CSS Flexbox 调试工具
- [实验性] 自定义和弦键盘快捷键
Chrome 87
- 新的 CSS 网格调试工具
- 新的 WebAuthn 标签页
- 在顶部和底部面板之间移动工具
- “样式”窗格中新的“已计算”边栏窗格
- 在“Computed”窗格中对 CSS 属性进行分组
- Lighthouse 面板中的 Lighthouse 6.3
- “计时”部分中的
performance.mark()
个事件 - “Network”面板中新增了
resource-type
和url
过滤器 - 帧详情视图更新
- 废弃了“更多工具”菜单中的
Settings
- [实验性] 在“CSS 概览”面板中查看并修正色彩对比度问题
- [实验性] 在开发者工具中自定义键盘快捷键
Chrome 86
- 新建“媒体”面板
- 使用“元素”面板上下文菜单截取节点屏幕截图
- “问题”标签页更新
- 模拟缺少的本地字体
- 模拟非活跃用户
- 模拟
prefers-reduced-data
- 支持新的 JavaScript 功能
- Lighthouse 面板中的 Lighthouse 6.2
- 弃用了“Service Workers”窗格中列出的“其他源”
- 显示被滤除的项的覆盖率摘要
- “Application”面板中新增了框架详细信息视图
- “样式”窗格中的无障碍颜色建议
- 在“元素”面板中恢复 Properties 窗格
- “Network”面板中直观易懂的
X-Client-Data
标头值 - 在“样式”窗格中自动填充自定义字体
- 在“网络”面板中始终显示资源类型
- “元素”和“网络”面板中的清除按钮
Chrome 85
- CSS-in-JS 框架的样式修改
- Lighthouse 面板中的 Lighthouse 6
- 废弃首次有效渲染时间 (FMP)
- 支持新的 JavaScript 功能
- “Manifest”窗格中的新应用快捷方式警告
- “时间”标签页中的 Service Worker
respondWith
事件 - 一致显示“Computed”窗格
- WebAssembly 文件的字节码偏移量
- “Sources”面板中的逐行复制和剪切
- 管理中心设置更新
- 性能面板更新
- 断点、条件断点和日志点的新图标
Chrome 84
- 利用新的“问题”标签页解决网站问题
- 在“检查模式”提示中查看无障碍功能信息
- 性能面板更新
- 控制台中使用更准确的 promise 术语
- “样式”窗格更新
- 弃用“元素”面板中的属性窗格
- “Manifest”窗格中对应用快捷方式的支持
Chrome 83
- 模拟视觉缺陷
- 模拟语言区域
- 跨域嵌入器政策 (COEP) 调试
- 断点、条件断点和日志点的新图标
- 查看设置了特定 Cookie 的网络请求
- 从“命令”菜单固定到左侧
- 主菜单中的“设置”选项移动了
- “审核日志”面板现已更名为“Lighthouse”面板
- 删除文件夹中的所有本地覆盖设置
- 更新了长时间运行的任务界面
- “Manifest”窗格中支持可遮盖图标的图标
Chrome 82
Chrome 81
- 设备模式下支持 Moto G4
- 与 Cookie 相关的更新
- 更精确的 Web 应用清单图标
- 将鼠标悬停在 CSS
content
属性上,可查看未转义的值 - 控制台中的源代码映射错误
- 用于停用滚动范围超出文件末尾的设置
Chrome 80
- 在控制台中支持
let
和class
重复声明 - 改进了 WebAssembly 调试
- “发起者”标签页中的请求发起者链
- 在“概览”中突出显示所选的网络请求
- “网络”面板中的网址列和路径列
- 已更新的用户代理字符串
- 新版 Audits 面板配置界面
- 按函数或按块代码覆盖模式
- 代码覆盖率现在必须通过页面重新加载启动
Chrome 79
- 调试 Cookie 被屏蔽的原因
- 查看 Cookie 值
- 模拟不同的首选配色方案和首选减少动作偏好设置
- 代码覆盖率更新
- 调试请求网络资源的原因
- “控制台”和“来源”面板再次遵循缩进偏好设置
- 光标导航的新快捷键
Chrome 78
- “ Audits”面板中的多客户端支持
- 付款处理程序调试
- “审核”面板中的 Lighthouse 5.2
- “Performance”面板中的 Largest Contentful Paint
- 通过主菜单提交开发者工具问题
Chrome 77
- 复制元素样式
- 直观呈现布局偏移
- “审核”面板中的 Lighthouse 5.1
- 操作系统主题同步
- 用于打开断点编辑器的键盘快捷键
- 在“网络”面板中预提取缓存
- 查看对象时的不公开属性
- “Application”面板中的通知和推送消息
Chrome 76
- 使用 CSS 值自动补全
- 广告联盟设置的新界面
- HAR 导出文件中的 WebSocket 消息
- HAR 导入和导出按钮
- 实时内存用量
- Service Worker 注册端口号
- 检查后台提取和后台同步事件
- 适用于 Firefox 的 Puppeteer
Chrome 75
- 自动填充 CSS 函数时的有意义的预设
- 通过命令菜单清除网站数据
- 查看所有 IndexedDB 数据库
- 悬停鼠标时查看资源的未压缩大小
- “Breakpoints”窗格中的内嵌断点
- IndexedDB 和缓存资源计数
- 用于停用详细检查提示的设置
- 在编辑器中切换制表符缩进的设置
Chrome 74
- 突出显示受 CSS 属性影响的所有节点
- “ Audits”面板中的 Lighthouse v4
- WebSocket 二进制消息查看器
- 在命令菜单中截取区域屏幕截图
- “网络”面板中的 Service Worker 过滤条件
- 性能面板更新
- “性能”面板录制内容中的耗时较长任务
- “时间”部分中的“First Paint”
- 额外提示:用于查看 RGB 和 HSL 颜色代码的快捷方式(视频)
Chrome 73
- 日志点
- 检查模式下的详细提示
- 导出代码覆盖率数据
- 使用键盘浏览控制台
- 颜色选择器中的 AAA 对比度线
- 保存自定义地理位置覆盖设置
- 代码折叠
- “帧”标签页已重命名为“消息”标签页
- 额外提示:按资源过滤“网络”面板(视频)
Chrome 72
- 在“效果”面板中直观呈现效果指标
- 突出显示 DOM 树中的文本节点
- 将 JS 路径复制到 DOM 节点
- “审核”面板更新,包括检测 JS 库的新审核以及用于通过命令菜单访问“审核”面板的新关键字
- 额外提示:使用 Device Mode 检查媒体查询(视频)
Chrome 71
- 将鼠标悬停在实时表达式结果上,突出显示 DOM 节点
- 将 DOM 节点存储为全局变量
- HAR 导入和导出现可显示发起方和优先级信息
- 从主菜单访问命令菜单
- 画中画断点
- 额外提示:使用
monitorEvents()
在控制台中记录节点的触发事件(视频)
Chrome 70
- 控制台中的实时表达式
- 在 Eager 评估期间突出显示 DOM 节点
- 性能面板优化
- 更可靠的调试功能
- 通过命令菜单启用网络节流功能
- 自动补全条件断点
- 在 AudioContext 事件发生时中断
- 使用 ndb 调试 Node.js 应用
- 额外提示:使用 User Timing API 衡量实际的用户互动
Chrome 68
- Eager 评估
- 参数提示
- 函数自动补全
- ES2017 关键字
- “审核”面板中的 Lighthouse 3.0
- BigInt 支持
- 向“Watch”窗格添加属性路径
- “显示时间戳”已移至“设置”
- 额外提示:鲜为人知的控制台方法(视频)
Chrome 67
- 在所有广告网络标头中搜索
- CSS 变量值预览
- 以抓取方式复制
- 新审核、桌面配置选项和查看跟踪记录
- 停止无限循环
- “性能”标签页中的“用户计时”
- “内存”面板中明确列出的 JavaScript 虚拟机实例
- “网络”标签页已重命名为“网页”标签页
- 深色主题更新
- “安全性”面板中的证书透明度信息
- “性能”面板中的网站隔离功能
- 额外提示:“图层”面板 + 动画检查器(视频)
Chrome 66
- “网络”面板中的黑箱功能
- 在设备模式下自动调整缩放比例
- “预览”和“回复”标签页中的美观打印选项
- 在“预览”标签页中预览 HTML 内容
- 对 HTML 内样式的局部替换支持
- 额外提示:将框架脚本设置为黑箱,以使事件监听器断点更加有用
Chrome 65
- 本地替换
- 全新的无障碍工具
- “更改”标签页
- 新的搜索引擎优化 (SEO) 和性能审核
- “Performance”面板中的多个录制内容
- 通过异步代码中的 worker 实现可靠的代码单步调试
- 额外提示:使用 Puppeteer 自动执行开发者工具操作(视频)
Chrome 64
- 性能监视器
- 控制台边栏
- 将控制台中的类似消息归为一组
- 额外提示:切换悬停伪类(视频)
Chrome 63
Chrome 62
- 在管理中心中等待的顶级账号
- 新的屏幕截图工作流程
- CSS 网格突出显示
- 用于查询对象的全新 Console API
- 新的控制台过滤条件
- “网络”面板中的 HAR 导入
- 可预览的缓存资源
- 缓存调试更具可预测性
- 块级代码覆盖率
Chrome 61
Chrome 60
- 新版 Audits 面板
- 第三方徽章
- “继续前往此处”的新手势
- 进入异步模式
- 在控制台中预览信息更丰富的对象
- 在控制台中选择信息更丰富的上下文
- “索引涵盖范围”标签页中的实时动态资讯
- 更简单的网络节流选项
- 异步堆栈默认处于开启状态