Sofia Emelianova
Jecelyn Yeen
录音机更新
支持重放重放功能
Recorder 引入了对自定义重放选项的支持，您可以使用扩展程序将这些选项嵌入到开发者工具中。
试用附加示例。选择新的自定义重放选项以打开自定义重放界面。
若要根据您的需求自定义 Recorder 并将其与您的工具集成，不妨考虑开发自己的扩展程序：浏览 chrome.devtools.recorder API，并查看更多扩展程序示例。
Chromium 问题：1400243。
使用穿孔选择器录制
除了自定义、CSS、ARIA、文字和 XPath 选择器之外，现在您还可以使用穿孔选择器进行录制。这些选择器的行为类似于 CSS 选择器，但也可以穿透影子根。
在包含 shadow DOM 的页面上开始新记录，并在要记录的选择器类型中查看 
Pierce。记录您与 shadow DOM 中元素的互动并检查相应步骤。
Chromium 问题：1411188。
使用 Lighthouse 分析功能导出为 Puppeteer 脚本
Recorder 引入了一个新的导出选项：Puppeteer（包括 Lighthouse 分析）。借助 Puppeteer，你可以自动执行和控制 Chrome。借助 Lighthouse，您可以捕获并改善网站的性能。
打开录制内容，点击 
Export（导出），选择新选项，然后保存 .js 文件。
运行 Puppeteer 脚本，以在 flow.report.html 文件中获取 Lighthouse 报告。
获取扩展程序
探索用于自定义录音机体验的选项，例如使用自定义导出选项。点击录音中的 
Export > Get extensions，获取 Recorder 的扩展程序。
您可以向 Recorder Extensions 列表中添加您自己的扩展程序。期待您的游戏入驻！
元素 > 样式更新
CSS 文档
您每天查找几次有关 CSS 属性的文档？现在，当您将鼠标悬停在某个属性上时，元素 > 样式窗格会显示简短说明。
该提示还包含一个了解详情链接，点击此链接可查看关于此媒体资源的 MDN CSS 参考文档。
如果您非常熟悉 CSS，您可能会发现提示工具非常烦人。如需将其全部关闭，请勾选 
不显示。
如需重新开启，请依次选择 
Settings > Preferences > Elements > 
显示 CSS 文档提示。
Chromium 问题：1401107。
CSS 嵌套支持
现在，Elements > Styles 窗格可以识别 CSS Nesting 语法，并将嵌套样式应用于正确的元素。
Chromium 问题：1172985。
在控制台中标记日志点和条件断点
进一步改进了增强的断点用户体验，控制台现在会标记由断点触发的消息：
控制台现在可为您提供指向源文件中断点的正确锚链接，而不是 Chrome 为在 V8 上运行任何 JavaScript 代码而创建的 VM<number> 脚本。
点击断点消息旁边的链接即可直接跳转到断点编辑器。
Chromium 问题：1027458。
在调试期间忽略不相关的脚本
为了帮助您专注于代码中最重要的部分，您现在可以直接从 Sources > Page 窗格中的文件树中将不相关的脚本添加到 Ignore List 中。
右键点击任何脚本或文件夹，然后选择其中一个与忽略相关的选项。您可能会看到用于向列表中添加或移除脚本或文件夹的选项。Debugger 忽略添加到列表中的脚本，并在调用堆栈中省略这些脚本。
所有已列入忽略列表的脚本和文件夹在文件树中都呈灰显状态。
如果您选择忽略的脚本，配置按钮会将您转到 
设置 > 忽略列表。此外，您还可以依次选择 
> Hide-listed sources 
在文件树中隐藏已忽略的来源。
Chromium 问题：883325。
开始弃用 JavaScript 性能分析器
早在 Chrome 58 时，开发者工具团队就计划最终弃用 JavaScript 性能分析器，并让 Node.js 和 Deno 开发者使用性能面板来分析 JavaScript CPU 性能。
此开发者工具版本 (112) 开始了四阶段 JavaScript 性能分析器弃用。JavaScript 性能分析器面板现在会显示相应的警告横幅。
请使用性能面板（而非性能分析器）对 CPU 进行性能分析。
您可以通过相应的 RFC 和 crbug.com/1354548 了解详情并提供反馈。
Chromium 问题：1417647。
模拟对比度下降
Rendering 标签页在模拟视觉缺陷列表中添加了一个新选项 - 降低对比度。借助此选项，您可以了解对比度敏感度较低的用户看到的网站外观。
请注意，列表选项已更新，以告知您相应选项代表什么色彩敏感性。
借助开发者工具，您可以一次性查找和修正所有对比度问题。有关详情，请参阅让网站更易于阅读。
灯塔 10
Lighthouse 面板现在运行 Lighthouse 10.0.1。如需了解详情，请参阅 Lighthouse 10.0.1 的新变化。
要了解有关在开发者工具中使用 Lighthouse 面板的基础知识，请参阅 Lighthouse：优化网站速度。
Lighthouse > 
> 
旧版导航现在默认处于停用状态。此选项在导航模式下使用旧版 Lighthouse 配置。
Lighthouse 10 现在使用 Moto G 电源作为默认模拟设备。开发者工具已将此设备添加到 
设置 > 设备。
Chromium 问题：772558。
控制台警告，提醒您移除空操作 Service Worker 提取处理程序
Chrome 112 会跳过空操作（无操作）Service Worker 提取处理程序，因为它们可能会降低导航速度，但无助于实现任何目的。您的网站已不再需要此类处理程序，才能成为渐进式 Web 应用。
现在，如果控制台在您的网站上发现空操作提取处理程序，就会显示警告。请考虑将其移除。
Chromium 问题：1347319。
其他亮点
以下是此版本中一些值得注意的修复：
- 现在，Sources > Breakpoints 窗格会在不明确的文件名旁边显示不同的文件路径 (1403924)。
- 在 Performance 面板的火焰图中，Main 部分现在将
CpuProfiler::StartProfiling指定为Profiler Overhead(1358602)。 - 开发者工具改进了自动填充功能：
- 开发者工具添加了事件监听器断点，可让您在打开文档画中画窗口时暂停 (1315352)。
- 开发者工具设置了一种权宜解决方法，可将 Vue2 webpack 工件正确显示为 JavaScript (1416562)。
- “控制台”设置有了更合适的名称：自动展开 console.trace() 消息。(1139616)。
下载预览渠道
您可以考虑将 Chrome Canary 版、Dev 版或 Beta 版用作默认开发浏览器。通过这些预览渠道，您可以使用最新的开发者工具功能，测试先进的网络平台 API，并在用户采取行动之前发现网站上的问题！
与 Chrome 开发者工具团队联系
使用以下选项讨论博文中的新功能和变化，或讨论与开发者工具有关的任何其他内容。
- 通过 crbug.com 提交建议或反馈。
- 使用开发者工具中的更多选项
> Help > Report a DevTools issues来报告开发者工具问题。 - 发推文：@ChromeDevTools。
- 请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。
开发者工具的新变化
开发者工具的新变化系列中涵盖的所有内容的列表。
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-contentCSS 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 面板
- 第三方徽章
- “继续前往此处”的新手势
- 进入异步模式
- 在控制台中预览信息更丰富的对象
- 在控制台中选择信息更丰富的上下文
- “索引涵盖范围”标签页中的实时动态资讯
- 更简单的网络节流选项
- 异步堆栈默认处于开启状态