改进了“网络”面板
更快地在本地替换 Web 内容
本地替换项功能现已简化,这样您就可以在网络面板中轻松模拟远程资源的响应标头和 Web 内容,而无需访问这些资源。
如需替换网页内容,请打开 Network 面板,右键点击相应请求,然后选择 Override content。
如果您已设置本地替换项但已停用,则 DevTools 会启用它们。如果您尚未设置这些账号,DevTools 会在顶部的操作栏中提示您。选择要用来存储替换项的文件夹,并允许 DevTools 访问该文件夹。
替换项设置完毕后,DevTools 会带您前往 Sources(来源)> Overrides(替换项)> Editor(编辑器),以便您替换网页内容。
请注意,替换的资源在 Network 面板中用 表示。将鼠标悬停在该图标上,即可查看被替换的内容。
Chromium 问题:1465785、1470532、1469359。
替换 XHR 和提取请求的内容
现在,除了响应标头之外,您还可以替换 XHR 和提取请求的内容。通过这些替换项,即使您的后端和 API 尚未准备就绪,您也可以通过模拟 API 响应来调试网页。
开发者工具目前支持以下请求类型的内容替换:图片(例如 avif、png)、字体、提取和 XHR、脚本(css 和 js)以及文档 (html)。现在,对于不受支持的类型,DevTools 会将替换内容选项设为灰显状态。
隐藏 Chrome 扩展程序请求
为了帮助您专注于自己编写的代码,并滤除您可能在 Chrome 中安装的扩展程序发送的无关请求,网络面板新增了一个过滤条件。
如需过滤掉发送到 chrome-extension://
网址的所有请求,请查看 隐藏扩展程序网址。
直观易懂的 HTTP 状态代码
请求标头中的状态代码现在会在 HTTP 状态代码旁边显示可读取的文本,以便您更快地了解请求发生的情况。
您也可以将鼠标悬停在请求表格中的状态代码上,查看相同的文本。
Chromium 问题:1153956。
为 JSON 子类型整齐打印响应
具有 application/[subtype]+json
MIME 子类型(例如 ld+json
、hal+json
等)的请求的响应标签页现在会正确解析响应,并允许您对其进行美化。
Chromium 问题:406900。
性能:查看网络事件的提取优先级变化
性能面板现在会在网络轨道中某个事件的摘要中显示两个优先级字段:初始优先级和(最终)优先级,而不是仅显示一个优先级。借助这个额外字段,您现在可以查看事件的提取优先级是否发生变化,并调整下载顺序。如需了解详情,请参阅使用 Fetch Priority API 优化资源加载。
此外,在启用 Big request rows 设置后,您可以在 Network 面板的 Priority 列中找到同样的信息。
默认启用的源代码设置:代码折叠和自动显示文件
设置 > 偏好设置 > 代码折叠选项现在默认处于启用状态。通过此选项,您可以折叠代码块。
若要折叠代码块,请将鼠标悬停在代码块起始位置旁边的行号上,然后点击 收起图标。点击 {...}
可再次展开该分块。
此外, 设置 > 偏好设置 > 自动在边栏中显示文件现在还默认处于启用状态。
此设置会使 Sources(来源)> Page(页面)中的文件树在您切换标签页时选择 Editor(编辑器)中打开的当前文件。
改进了对第三方 Cookie 问题的调试
为了帮助打造隐私保护更完善的网络环境,并与其他浏览器的更新同步,Chrome 推出了 Privacy Sandbox 计划。这项计划从根本上增强了网络隐私保护,并可以使第三方 Cookie 过时的方式维持健康的广告支持型网络。Privacy Sandbox 逐步淘汰时间表可让您轻松适应变化。
您现在已经可以测试 Chrome 在停用第三方 Cookie 后的行为。为此,请使用 --test-third-party-cookies-phaseout
标志从命令行运行 Chrome。如需了解此标志的用途,请参阅调试 Cookie。
无论您通过何种方式运行 Chrome(无论是否带有此标记),问题标签现在都会为所有 Chrome 新用户默认启用 包括第三方 Cookie 问题复选框,因此:
- 关于即将弃用该功能的破坏性更改警告。
- 与第三方 Cookie 相关的问题。
作为 Chrome 现有用户,如果您希望看到有关即将被逐步淘汰的 Cookie 警告,请务必选中此复选框。
如需对此进行测试,请访问此演示页面检查 Cookie。
此外,网络面板中的 被屏蔽的响应 Cookie 过滤器已重写,以明确说明它仅显示被屏蔽的响应 Cookie。
Chromium 问题:1458839、1462693、1466310。
在“应用”面板中调试预加载
Chrome 团队正在针对用户日后可能会访问的网页恢复完整的预渲染。为了使您能够进行调试,开发者工具会将 Preloading 部分添加到 Application 面板中。新的预提取和预渲染(统称为“导航预提取”)使用 Speculation Rules API,而不是基于链接的资源提示。
在此演示页面的 Application(应用)> Preloading(预加载)部分,您可以检查以下内容:
- 推测规则,用于列出在当前网页上找到的所有规则集。
- 预加载,用于列出规则集中的所有预提取和预渲染网址。
- 此页面,列出了当前页面的预渲染状态。
如需了解详情,请参阅专门介绍如何调试推测规则的帖子。
Chromium 问题:1410709。
新颜色
您可能已经注意到,开发者工具现在的外观焕然一新,与 Chrome 更加一致。其中一个原因是新的配色方案。
此版本 (117) 为 DevTools 带来了更多用户体验改进,包括上述和下文中列出的改进,其中包括改进了许多界面文本。
Chromium 问题:1456677。
Lighthouse 10.4.0
Lighthouse 面板现在运行 Lighthouse 10.4.0。最值得注意的是,此版本针对以下内容添加了新的无障碍功能审核:
例如:
另请参阅完整的变更列表。如需了解如何在 DevTools 中使用 Lighthouse 面板的基础知识,请参阅 Lighthouse:优化网站速度。
Chromium 问题:772558。
适用于 DevTools 的 C/C++ WebAssembly 调试扩展程序现已开源
适用于 DevTools 的 C/C++ WebAssembly 调试扩展程序现已开源,并位于 DevTools 前端代码库中。此扩展程序可在 DevTools 中为编译为 WebAssembly 的 C++ 程序启用调试功能。如需了解详情,请参阅调试 C/C++ WebAssembly。
了解如何构建、运行和测试扩展程序,并随时贡献。
Chromium 问题:1410709。
其他亮点
以下是此版本中的一些值得注意的修复和改进:
- CSS 嵌套:元素面板现在会显示嵌套子元素的整个选择器链 (1172985)。
- 应用 > 清单 现在包含一个窗口控件叠加层部分,用于检查清单中是否存在
display_override
值,并提供指向相关文档的链接。 - 来源 > 网页树现在会执行以下操作,包括但不限于 (1442863):
- 如果文件夹中的所有内容都已列入忽略列表,则会将该文件夹灰显。
- 如果文件夹中的所有内容均来自源映射,则将其着色为橙色。
- 性能:现在,当您开始录制时,拍摄设置会自动隐藏 (1455498)。
- Sources > Editor 恢复了 Ctrl + Arrow 行为 (Win) 和 Opt + Arrow (MacOs) (1468208)。
- 动画 > 全部暂停切换开关现在会在网页加载期间保持其状态 (1446046)。
- 应用 > 存储 > 缓存存储已移至应用 > 存储 > 缓存部分 (1462622)。
- 改进了一些界面文本和提示:“硬件并发性”提示、“网络”过滤器文本和主菜单选项、“应用树视图”中的大小写、“网络”>“标头”文本、“来源”>“替换项”和“文件系统”文本。
新的实验性功能
新的渲染模拟:prefers-reduced-transparency
您的网站用户可能会开始在其设备上启用新的实验性 prefers-reduced-transparency
CSS 媒体功能,以表明他们希望减少透明效果。您不妨考虑考虑这一偏好设置,以提高网站的无障碍功能。为此,渲染抽屉式标签页现在可以模拟 prefers-reduced-transparency: reduce
设置,以便您对解决方案进行原型设计并测试网站在此情况下的行为方式。
如需在 Chrome 中测试此功能,请在 chrome://flags
中启用实验性 Web 平台功能。
Chromium 问题:1424879。
增强型协议监视器
Chrome 开发者工具使用 Chrome 开发者工具协议 (CDP) 来插桩、检查、调试和分析 Chrome 浏览器。如果您是 Chromium 或 DevTools 开发者,则可以通过协议监视器查看 DevTools 发出的所有 CDP 请求和响应,以及发送 CDP 命令。
协议监视器采用了新界面,可让您更轻松地构建和发送 CDP 命令。现在,您无需在文档中查找命令及其参数,开发者工具会为您提供建议。
在协议监控抽屉式导航栏标签页的右下角,点击 显示 CDP 命令编辑器,选择一个目标,开始输入命令,选择建议的某个命令(如果需要),指定参数值,然后点击 发送命令 (Ctrl/Cmd + Enter)。
Chromium 问题:1469345。
下载预览渠道
不妨考虑将 Chrome Canary 版、开发者版或 Beta 版用作默认开发浏览器。通过这些预览渠道,您可以使用最新的开发者工具功能,测试先进的网络平台 API,并帮助您在用户之前发现网站上的问题!
与 Chrome DevTools 团队联系
您可以使用以下选项讨论与 DevTools 相关的新功能、更新或任何其他内容。
- 您可以在 crbug.com 上向我们提交反馈和功能请求。
- 在 DevTools 中,依次选择 More options > Help > Report a DevTools issue 以报告 DevTools 问题。
- 向 @ChromeDevTools 发送推文。
- 在 “开发者工具的新变化”YouTube 视频或 “开发者工具提示”YouTube 视频中留言。
开发者工具的新变化
DevTools 新变化系列中涵盖的所有内容的列表。
- 使用 Gemini 调试 CSS
- 在专用设置标签页中控制 AI 功能
- 性能面板改进
- 添加注释并分享效果数据分析
- 直接在“效果”面板中获取效果数据分析
- 更轻松地发现过多的布局偏移
- 发现非合成的动画
- “硬件并发”移至“传感器”
- 忽略匿名脚本,并在堆栈轨迹中专注于您的代码
- 元素 > 样式:支持网格叠加层和 CSS 全局关键字的横向*写入模式
- 在时间跨度模式和快照模式下针对非 HTTP 网页运行 Lighthouse 审核
- 无障碍功能改进
- 其他亮点
- 改进了网络面板
- 重新构想了网络过滤器
- HAR 导出现在会默认排除敏感数据
- “元素”面板改进
- text-emphasis-* 属性的自动补全值
- 滚动超出边界并带有标记
- 改进了“效果”面板
- 实时指标中的建议
- 浏览面包屑导航
- 内存面板改进
- 新增了“已分离的元素”配置文件
- 改进了纯 JS 对象的命名
- 关闭动态主题设置
- Chrome 实验:进程共享
- Lighthouse 12.2.1
- 其他亮点
- Recorder 支持导出到 Puppeteer for Firefox
- 改进了“效果”面板
- 实时指标观察结果
- “网络”轨道中的搜索请求
- 查看 performance.mark 和 performance.measure 调用的堆栈轨迹
- 在“自动填充”面板中使用测试地址数据
- 元素面板改进
- 为特定元素强制设置更多状态
- “元素”>“样式”现在会自动补全更多网格属性
- Lighthouse 12.2.0
- 其他亮点
- Gemini 控制台数据分析功能将在大多数欧洲国家/地区推出
- “效果”面板更新
- 增强型网络轨道
- 使用可扩展性 API 自定义效果数据
- “计时”轨道中的详细信息
- 复制“网络”面板中列出的所有请求
- 通过已命名的 HTML 标记加快堆快照速度,减少杂乱现象
- 打开“动画”面板以捕获动画并实时修改 @keyframes
- Lighthouse 12.1.0
- 无障碍功能改进
- 其他亮点
- 在“元素”面板中检查 CSS 锚点位置
- 来源面板改进
- 增强型“一律不在此处暂停”
- 新的滚动卡顿事件监听器
- 网络面板改进
- 更新了网络节流预设
- HAR 格式自定义字段中的服务工作器信息
- 在“效果”面板中发送和接收 WebSocket 事件
- 其他亮点
- 改进了“效果”面板
- 使用更新后的轨道配置模式移动和隐藏轨道
- 忽略火焰图中的脚本
- 将 CPU 节流 20 次
- “效果数据分析”面板将被弃用
- 使用堆快照中的新过滤器查找过多的内存用量
- 依次前往“Application”>“Storage”检查存储桶
- 使用命令行标志停用自我 XSS 警告
- Lighthouse 12.0.0
- 其他亮点
- 借助 Gemini 更好地了解 Play 管理中心中的错误和警告
- 在“元素”>“样式”中支持 @position-try 规则
- “来源”面板改进
- 配置自动美化输出和括号闭合
- 系统会将处理的已拒绝 promise 识别为已捕获
- 控制台中的错误原因
- 改进了网络面板
- 检查早期提示标头
- 隐藏“瀑布”列
- 改进了“效果”面板
- 捕获 CSS 选择器统计信息
- 更改顺序和隐藏曲目
- 在“内存”面板中忽略保留器
- Lighthouse 11.7.1
- 其他亮点
- 新版“自动填充”面板
- 针对 WebRTC 增强了网络节流功能
- “Animations”面板中支持滚动条驱动的动画
- 改进了“元素”>“样式”中的 CSS 嵌套支持
- “增强型效果”面板
- 在火焰图中隐藏函数及其子项
- 从所选发起者指向其发起的事件的箭头
- Lighthouse 11.6.0
- “内存”>“堆快照”中关于特殊类别的工具提示
- 应用 > 存储更新
- 共享存储空间的使用字节数
- Web SQL 已被完全弃用
- “覆盖率”面板改进
- “图层”面板可能被弃用
- JavaScript 性能分析器弃用:第 4 阶段,最终阶段
- 其他亮点
- 寻找复活节彩蛋
- “元素”面板更新
- 依次前往“元素”>“样式”,模拟聚焦的页面
var()
回退中的颜色选择器、角度时钟和缓动编辑器- CSS 长度工具已废弃
- “效果”>“主轨道”中针对所选搜索结果显示的弹出式窗口
- “网络”面板更新
- “网络”>“EventStream”标签页中的“清除”按钮和搜索过滤条件
- “广告网络”>“Cookie”中显示了第三方 Cookie 豁免原因的提示
- 在 Sources 中启用和停用所有断点
- 在 Node.js 的 DevTools 中查看已加载的脚本
- Lighthouse 11.5.0
- 无障碍功能改进
- 其他亮点
- 官方集合的录音机扩展程序现已推出
- 网络改进
- “状态”列中的失败原因
- 改进了“文案”子菜单
- 性能改进
- 时间轴中的面包屑导航
- 主要轨道中的事件发起者
- Node.js 开发者工具的 JavaScript 虚拟机实例选择器菜单
- “来源”中新增了快捷方式和命令
- 元素改进
- 现在可以在“样式”中修改 ::view-transition 伪元素
- 针对块容器的“align-content”属性支持
- 对模拟可折叠设备的折叠状态支持
- 动态主题
- “广告网络”和“应用”面板中的第三方 Cookie 逐步淘汰警告
- Lighthouse 11.4.0
- 无障碍功能改进
- 其他亮点
- 元素改进
- 简化了“网络”面板中的过滤器栏
@font-palette-values
支持- 支持的情况:自定义媒体资源用作其他自定义媒体资源的后备
- 改进了对源代码映射的支持
- 改进了“效果”面板
- “增强型互动”轨道
- “自下而上”“调用树”和“事件日志”标签页中的高级过滤
- “来源”面板中的缩进标记
- “网络”面板中针对被替换的标头和内容的实用提示
- 用于添加和移除请求屏蔽格式的新命令菜单选项
- CSP 违规实验已移除
- Lighthouse 11.3.0
- 无障碍功能改进
- 其他亮点
- 第三方 Cookie 逐步淘汰
- 使用 Privacy Sandbox Analysis Tool 分析您网站的 Cookie
- 增强型忽略列表
- node_modules 的默认排除模式
- 现在,如果已捕获的异常被捕获或通过非忽略的代码,则会停止执行
- 在源代码映射中将
x_google_ignoreList
重命名为ignoreList
- 远程调试期间的新输入模式切换开关
- “元素”面板现在会显示 #document 节点的网址
- “应用”面板中的有效内容安全政策
- 改进了动画调试功能
- “来源”中显示“您信任此代码吗?”对话框,以及“控制台”中显示的“自定义 XSS”警告
- WebWorker 和 Worklet 中的事件监听器断点
<audio>
和<video>
的新媒体徽章- “预加载”已重命名为“推测加载”
- Lighthouse 11.2.0
- 无障碍功能改进
- 其他亮点
- 改进了“元素”>“样式”中的 @property 部分
- 可修改的 @property 规则
- 报告了无效 @property 规则的问题
- 更新了要模拟的设备列表
- 在来源的脚本标记中以整齐格式输出内嵌 JSON
- 在 Play 管理中心内自动补全私有字段
- Lighthouse 11.1.0
- 无障碍功能改进
- Web SQL 已废弃
- 在“应用”>“清单”中验证屏幕截图宽高比
- 其他亮点
- 在“元素”>“样式”中新增了自定义属性部分
- 更多本地替换项改进
- 增强型搜索
- 改进了“来源”面板
- “Sources”面板中简化的工作区
- 在“来源”中对窗格重新排序
- 针对更多脚本类型提供语法突出显示和美化输出功能
- 模拟 Preferreds-reduced-Transparency 媒体功能
- Lighthouse 11
- 无障碍功能改进
- 其他亮点
- 改进了网络面板
- 在本地更快地替换 Web 内容
- 替换 XHR 和提取请求的内容
- 隐藏 Chrome 扩展程序请求
- 可读取的 HTTP 状态代码
- 默认启用的来源设置:代码折叠和自动显示文件
- 改进了第三方 Cookie 问题的调试功能
- 新颜色
- Lighthouse 10.4.0
- 在“应用”面板中调试预加载
- 开发者工具的 C/C++ WebAssembly 调试扩展程序现已开源
- 其他亮点
- (实验性)新的呈现模拟:prefers-reduced-transparency
- (实验性)增强型协议监视器
- 改进了缺少样式的调试功能
- “元素”>“样式”>“缓动编辑器”中添加了线性时间支持
- 存储桶支持和元数据视图
- Lighthouse 10.3.0
- 无障碍功能:键盘命令和改进的屏幕阅读功能
- 其他亮点
- 元素改进
- 新的 CSS 子网格徽章
- 提示中的选择器特异性
- 提示中自定义 CSS 属性的值
- 改进了来源
- CSS 语法突出显示
- 用于设置条件断点的快捷方式
- 应用 > 反弹跟踪缓解措施
- Lighthouse 10.2.0
- 默认忽略内容脚本
- 网络 > 响应改进
- 其他亮点
- WebAssembly 调试支持
- 改进了 Wasm 应用中的单步调试行为
- 使用“元素”面板和“问题”标签页调试自动填充功能
- 录音机中的断言
- Lighthouse 10.1.1
- 性能增强
- performance.mark() 会在“性能”>“计时”中显示悬停时间
- profile() 命令会填充“Performance”>“Main”
- 针对用户互动缓慢情况的警告
- 网页指标更新
- JavaScript 性能分析器废弃:第 3 阶段
- 其他亮点
- 替换网络响应标头
- 改进了 Nuxt、Vite 和 Rollup 调试
- “元素”>“样式”中的 CSS 改进
- CSS 属性和值无效
- 动画缩写属性中的关键帧链接
- 新版控制台设置:“按 Enter 键自动补全”
- 命令菜单可突出显示编辑的文件
- JavaScript 性能分析器弃用:第 2 阶段
- 其他亮点
- 录音机更新
- 录音机重放扩展程序
- 使用穿孔选择器录制
- 使用 Lighthouse 分析将录制内容导出为 Puppeteer 脚本
- 获取录音机的扩展程序
- “元素”>“样式”更新
- “样式”窗格中的 CSS 文档
- CSS 嵌套支持
- 在控制台中标记日志点和条件断点
- 在调试期间忽略无关的脚本
- 开始弃用 JavaScript 性能分析器
- 模拟对比度下降
- Lighthouse 10
- 其他亮点
- 使用“样式”窗格调试高清色彩
- 增强了断点用户体验
- 可自定义的录音机快捷键
- 改进了 Angular 的语法突出显示功能
- 在“应用”面板中重新整理缓存
- 其他亮点
- 重新加载时清除效果面板
- 录音机更新
- 在录制器中查看并突出显示用户体验流程的代码
- 自定义录制的选择器类型
- 在录制时修改用户流
- 自动原地美化输出
- 改进了 Vue、SCSS 等的语法突出显示和内嵌预览
- 控制台中人性化且一致的自动补全功能
- 其他亮点
- 录制器:步骤、页面内重放、步骤上下文菜单的“复制为”选项
- 在性能记录中显示实际函数名称
- “控制台和来源”面板中新增了键盘快捷键
- 改进了 JavaScript 调试
- 其他亮点
- [实验性] 改进了断点管理方面的用户体验
- [实验性] 自动就地打印
- 无效 CSS 属性的提示
- 在“Recorder”面板中自动检测 XPath 和文本选择器
- 逐步完成英文逗号分隔表达式
- 改进了“忽略名单”设置
- 其他亮点
- 在 DevTools 中自定义键盘快捷键
- 使用键盘快捷键切换浅色和深色主题
- 在内存检查器中突出显示 C/C++ 对象
- 支持 HAR 导入的完整发起者信息
- 按
Enter
后开始 DOM 搜索 - 为
align-content
CSS flexbox 属性显示start
和end
图标 - 其他亮点
- 在“Sources”面板中按“已编写”/“已部署”将文件分组
- 异步操作的链接堆栈轨迹
- 自动忽略已知的第三方脚本
- 改进了调试期间的调用堆栈
- 在“来源”面板中隐藏已列入忽略列表的来源
- 在命令菜单中隐藏列入忽略列表的文件
- “效果”面板中新增了“互动”轨道
- “性能数据分析”面板中的 LCP 时间细分数据
- 在“录音机”面板中为录音自动生成默认名称
- 其他亮点
- 在 Recorder 中分步重放
- 支持“录音机”面板中的鼠标悬停事件
- “性能数据分析”面板中的 Largest Contentful Paint (LCP)
- 确定闪光文字(FOIT、FOUT)是否是导致布局偏移的潜在根本原因
- “Manifest”(清单)窗格中的协议处理程序
- “元素”面板中的顶层标记
- 在运行时附加 Wasm 调试信息
- 支持调试期间的实时编辑
- 在“样式”窗格中查看和修改 @scope at 规则
- 源代码映射改进
- 其他亮点
- 在调试期间重启帧
- “记录器”面板中的慢速重放选项
- 为录音机面板构建扩展程序
- 在“Sources”面板中按“已编写”/“已部署”将文件分组
- “效果分析”面板中的“用户计时”新轨道
- 显示元素的分配槽
- 为性能录制内容模拟硬件并发
- 在自动补全 CSS 变量时预览非颜色值
- 在“往返缓存”窗格中识别阻塞帧
- 改进了 JavaScript 对象的自动补全建议
- 来源映射功能改进
- 其他亮点
- 在“录制器”面板中捕获双击和右键点击事件
- Lighthouse 面板中新增了时间跨度和快照模式
- 改进了“性能数据分析”面板中的缩放控件
- 确认删除表演录制内容
- 在“元素”面板中对窗格重新排序
- 选择浏览器以外的颜色
- 改进了调试期间的内嵌值预览
- 支持虚拟身份验证器的大型 blob
- “来源”面板中新增了键盘快捷键
- 来源映射功能改进
- 预览版功能:新的“效果数据分析”面板
- 用于模拟浅色主题和深色主题的新快捷键
- 增强了“网络预览”标签页的安全性
- 改进了断点处的重新加载
- 管理中心更新
- 在开始时取消用户体验历程录制
- 在“样式”窗格中显示继承的突出显示伪元素
- 其他亮点
- [实验性] 复制 CSS 更改
- [实验性] 在浏览器外部选择颜色
- 以 JSON 文件的形式导入和导出记录的用户流
- 在“样式”窗格中查看叠加层
- 支持
hwb()
颜色函数 - 改进了私有媒体资源的显示方式
- 其他亮点
- [实验性] Lighthouse 面板中新增了时间跨度和快照模式
- 在“Styles”窗格中查看和修改 @supports at rules
- 默认支持常用选择器
- 自定义录音的选择器
- 重命名录音
- 悬停时预览类/函数属性
- “性能”面板中的部分呈现帧
- 其他亮点
- 限制 WebSocket 请求
- “应用”面板中的“New Reporting API”(新建 Reporting API)窗格
- 支持在 Recorder 面板中等待元素可见/可点击
- 改进了控制台样式、格式和过滤功能
- 使用源映射文件调试 Chrome 扩展程序
- 改进了“Sources”面板中的源文件夹树
- 在“Sources”面板中显示 worker 源文件
- Chrome 的自动深色主题更新
- 支持触控的颜色选择器和分屏窗格
- 其他亮点
- 预览版功能:整页无障碍功能树
- “更改”标签页中的更改更加精确
- 为用户流录制设置更长的超时
- 使用“往返缓存”标签页确保您的网页可缓存
- 新建“属性”窗格过滤条件
- 模拟 CSS forced-colors 媒体功能
- 在悬停命令时显示标尺
- 在 Flexbox 编辑器中支持
row-reverse
和column-reverse
- 新增了用于重放 XHR 和展开所有搜索结果的键盘快捷键
- “Lighthouse”面板中的 Lighthouse 9
- 改进了“来源”面板
- 其他亮点
- [实验性]“Reporting API”窗格中的端点
- 预览版功能:新的“录制器”面板
- 在设备模式下刷新设备列表
- 使用“以 HTML 形式编辑”功能自动补全
- 改进了代码调试体验
- 在设备间同步开发者工具设置
- 预览版功能:新的“CSS 概览”面板
- 恢复并改进了 CSS 长度修改和复制体验
- 模拟 CSS 媒体功能 prefers-contrast
- 模拟 Chrome 的“自动深色主题”功能
- 在“样式”窗格中以 JavaScript 格式复制声明
- “网络”面板中的“新建载荷”标签页
- 改进了“属性”窗格中的属性显示
- 用于在控制台中隐藏 CORS 错误的选项
- 在控制台中预览和评估适当的
Intl
对象 - 一致的异步堆栈轨迹
- 保留控制台边栏
- “应用”面板中已废弃的“应用缓存”窗格
- [实验性]“应用”面板中新增了 Reporting API 窗格
- 新的 CSS 长度创作工具
- 在“问题”标签页中隐藏问题
- 改进了房源的显示方式
- “Lighthouse”面板中的 Lighthouse 8.4
- 在“来源”面板中对摘要进行排序
- 添加了指向已翻译版本说明的新链接,并添加了报告翻译 bug 的新功能
- 改进了 DevTools 命令菜单的界面
- 以您偏好的语言使用开发者工具
- “设备”列表中的新 Nest Hub 设备
- “帧详情”视图中的来源试用
- 新的 CSS 容器查询标记
- 新增了一个用于反转广告联盟过滤条件的复选框
- 控制台边栏即将弃用
- 在“问题”标签页和“网络”面板中显示原始
Set-Cookies
标头 - 在 Play 管理中心内始终将原生访问器显示为自有属性
- 为包含 #sourceURL 的内嵌脚本生成正确的错误堆栈轨迹
- 在“Computed”窗格中更改颜色格式
- 将自定义提示框替换为原生 HTML 提示框
- [实验性] 在“问题”标签页中隐藏问题
- “样式”窗格中可修改的 CSS 容器查询
- “网络”面板中的 Web 软件包预览
- Attribution Reporting API 调试
- 改进了控制台中的字符串处理功能
- 改进了 CORS 调试
- Lighthouse 8.1
- “清单”窗格中的新备注网址
- 修复的 CSS 匹配选择器
- 在“网络”面板中整齐打印 JSON 响应
- CSS 网格编辑器
- 支持在控制台中重新声明
const
- 来源顺序查看器
- 用于查看帧详情的新快捷方式
- 增强了 CORS 调试支持
- 将 XHR 标签重命名为“Fetch/XHR”
- 在“网络”面板中过滤 Wasm 资源类型
- “网络状况”标签页中设备的用户代理客户端提示
- 在“问题”标签页中报告 Quirks 模式问题
- 在“效果”面板中添加“计算交叉”
- Lighthouse 面板中的 Lighthouse 7.5
- 废弃了调用堆栈中的“Restart frame”上下文菜单
- [实验性] 协议监视器
- [实验性] Puppeteer Recorder
- “网页指标”信息弹出式窗口
- 新的内存检查器
- 直观呈现 CSS scroll-snap
- 新的徽章设置窗格
- 包含宽高比信息的增强型图片预览
- 包含用于配置
Content-Encoding
的选项的新网络条件按钮 - 用于查看计算得出值的快捷方式
accent-color
关键字- 使用颜色和图标对问题类型进行分类
- 删除信任令牌
- “帧详情”视图中被屏蔽的功能
- 在“实验”设置中过滤实验
- 在“缓存存储”窗格中新增
Vary Header
列 - 支持 JavaScript 私有品牌检查
- 增强了对断点调试的支持
- 支持使用
[]
表示法进行悬停预览 - 改进了 HTML 文件的轮廓
- 针对 Wasm 调试的正确错误堆栈轨迹
- 新的 CSS flexbox 调试工具
- 新的 Core Web Vitals 叠加层
- 将问题计数移到了控制台状态栏
- 报告 Trusted Web Activity 问题
- 在 Play 管理中心内将字符串格式化为(有效的)JavaScript 字符串字面量
- “应用”面板中新增了“信任令牌”窗格
- 模拟 CSS color-gamut 媒体功能
- 改进了渐进式 Web 应用工具
- “广告网络”面板中新增了
Remote Address Space
列 - 性能改进
- 在“帧详情”视图中显示允许/禁止的功能
- 在“Cookies”窗格中新增
SameParty
列 - 已废弃的非标准
fn.displayName
支持 - “设置”菜单中的
Don't show Chrome Data Saver warning
已废弃 - [实验性]“问题”标签页中自动报告低对比度问题
- [实验性] “元素”面板中的完整无障碍功能树状视图
- 针对 Trusted Types 违规问题的调试支持
- 截取超出视口的节点屏幕截图
- 新增了“网络请求”的“信任令牌”标签页
- “Lighthouse”面板中的 Lighthouse 7
- 支持强制 CSS
:target
状态 - 新增了复制元素的快捷方式
- 自定义 CSS 属性的颜色选择器
- 新增了用于复制 CSS 属性的快捷方式
- 新增了用于显示已解码网址的 Cookie 的选项
- 仅清除可见的 Cookie
- “存储”窗格中新增了用于清除第三方 Cookie 的选项
- 修改自定义设备的用户代理客户端提示
- 保留“记录网络日志”设置
- 在“网络”面板中查看 WebTransport 连接
- “在线”已重命名为“无节流”
- 控制台、“来源”面板和“样式”窗格中的新副本选项
- “Frame 详情”视图中新增了 Service Worker 信息
- 在“Frame details”(帧详情)视图中测量内存信息
- 通过“问题”标签页提供反馈
- “性能”面板中的丢帧
- 在设备模式下模拟可折叠设备和双屏设备
- [实验性] 使用 Puppeteer Recorder 自动执行浏览器测试
- [实验性]“样式”窗格中的字体编辑器
- [实验性] CSS Flexbox 调试工具
- [实验性] 新增了“CSP 违规行为”标签页
- [实验性] 新的色彩对比度计算方法 - 高级感知对比度算法 (APCA)
- 加快了 DevTools 的启动速度
- 新的 CSS 角度可视化工具
- 模拟不受支持的图片类型
- 在“存储空间”窗格中模拟存储空间配额大小
- “效果”面板中新增了网页指标列
- 在“网络”面板中报告 CORS 错误
- “帧详情”视图中的跨源隔离信息
- “Frame Details”视图中新增了 Web Worker 信息
- 显示已打开窗口的打开程序框架详细信息
- 从“Service Workers”窗格打开“Network”面板
- 复制属性值
- 复制网络发起者的堆栈轨迹
- 在鼠标悬停时预览 Wasm 变量值
- 在控制台中评估 Wasm 变量
- 文件/内存大小的一致衡量单位
- 在“元素”面板中突出显示伪元素
- [实验性] CSS Flexbox 调试工具
- [实验性] 自定义和弦键盘快捷键
- 新的 CSS 网格调试工具
- “New WebAuthn”标签页
- 在顶部面板和底部面板之间移动工具
- “样式”窗格中新增了“计算样式”边栏
- 在“计算出的样式属性”窗格中对 CSS 属性进行分组
- Lighthouse 面板中的 Lighthouse 6.3
- “Timings”(时间)部分中的
performance.mark()
事件 - “网络”面板中新增了
resource-type
和url
过滤条件 - 帧详情视图更新
- 在“更多工具”菜单中弃用了
Settings
- [实验性] 在“CSS 概览”面板中查看并修复色彩对比度问题
- [实验性] 在开发者工具中自定义键盘快捷键
- “新媒体”面板
- 使用“元素”面板上下文菜单截取节点屏幕截图
- “问题”标签页更新
- 模拟缺少的本地字体
- 模拟不活跃用户
- 模拟
prefers-reduced-data
- 支持新的 JavaScript 功能
- “Lighthouse”面板中的 Lighthouse 6.2
- 弃用 Service Workers 窗格中的“其他源”列表
- 显示过滤项的覆盖率摘要
- “Application”(应用)面板中新增了框架详情视图
- “Styles”窗格中的易于分辨颜色的建议
- 在“元素”面板中恢复属性窗格
- “网络”面板中直观易懂的
X-Client-Data
标头值 - 在“样式”窗格中自动补全自定义字体
- 在“网络”面板中一致显示资源类型
- “元素”和“网络”面板中的清除按钮
- CSS-in-JS 框架的样式编辑
- “Lighthouse”面板中的 Lighthouse 6
- 弃用首次有效绘制 (FMP) 模型
- 支持新的 JavaScript 功能
- “Manifest”(清单)窗格中的新应用快捷方式警告
- “Timing”标签页中的服务工件
respondWith
事件 - 一致地显示 Computed 窗格
- WebAssembly 文件的字节码偏移量
- Sources 面板中的逐行复制和剪切
- Play 管理中心设置更新
- “效果”面板更新
- 新增了断点、条件断点和日志点的图标
- 使用新的“问题”标签页解决网站问题
- 在“检查模式”提示中查看无障碍功能信息
- “效果”面板更新
- Play 管理中心内的 Promise 术语更为准确
- “样式”窗格更新
- “元素”面板中的“属性”窗格已废弃
- “Manifest”(清单)窗格中支持应用快捷方式
- 模拟视觉缺陷
- 模拟语言区域
- 跨源嵌入器政策 (COEP) 调试
- 新增了断点、条件断点和日志点的图标
- 查看设置特定 Cookie 的网络请求
- 从命令菜单中固定到左侧
- 主菜单中的“设置”选项已移动
- “审核”面板现已更名为“Lighthouse”面板
- 删除文件夹中的所有本地替换项
- 更新了长任务界面
- “清单”窗格中对可遮罩图标的支持
- 设备模式下的 Moto G4 支持
- Cookie 相关更新
- 更准确的网络应用清单图标
- 将鼠标悬停在 CSS
content
属性上,查看未转义的值 - 控制台中的源代码映射错误
- 用于停用滚动范围超出文件末尾的设置
- 在 Play 管理中心内支持
let
和class
重新声明 - 改进了 WebAssembly 调试
- 在“启动器”标签页中请求启动器链
- 在“概览”中突出显示所选的网络请求
- “网络”面板中的“网址”和“路径”列
- 更新了用户代理字符串
- 新增 Audits 面板配置界面
- 每个函数或每个块代码覆盖模式
- 现在必须通过网页重新加载来启动代码覆盖率
- 调试 Cookie 被屏蔽的原因
- 查看 Cookie 值
- 模拟不同的 prefers-color-scheme 和 prefers-reduced-motion 偏好设置
- 代码覆盖率更新
- 调试请求网络资源的原因
- 控制台和“源代码”面板再次遵循缩进偏好设置
- 用于光标导航的新快捷键
- “审核”面板中的多客户端支持
- 付款处理程序调试
- “审核”面板中的 Lighthouse 5.2
- “性能”面板中的 Largest Contentful Paint
- 通过主菜单提交 DevTools 问题
- 复制元素样式
- 直观呈现布局偏移
- “审核”面板中的 Lighthouse 5.1
- 操作系统主题同步
- 用于打开断点编辑器的键盘快捷键
- “网络”面板中的预提取缓存
- 查看对象时的私有属性
- “Application”(应用)面板中的通知和推送消息
- 使用 CSS 值自动补全
- 网络设置的新界面
- HAR 导出中的 WebSocket 消息
- HAR 导入和导出按钮
- 实时内存用量
- 服务工注册端口号
- 检查后台提取和后台同步事件
- 适用于 Firefox 的 Puppeteer
- 自动填充 CSS 函数时的有意义的预设
- 通过命令菜单清除网站数据
- 查看所有 IndexedDB 数据库
- 将鼠标悬停在资源上方即可查看其未压缩大小
- “Breakpoints”窗格中的内嵌断点
- IndexedDB 和缓存资源计数
- 用于停用详细“检查”提示的设置
- 用于在编辑器中切换制表缩进的设置
- 突出显示受 CSS 属性影响的所有节点
- “Audits”面板中的 Lighthouse v4
- WebSocket 二进制消息查看器
- 在“命令”菜单中截取区域屏幕截图
- “网络”面板中的 Service Worker 过滤器
- “效果”面板更新
- “效果”面板录制内容中的长任务
- “Timing”部分中的“First Paint”
- 额外提示:查看 RGB 和 HSL 颜色代码的快捷方式(视频)
- Logpoint
- 检查模式下的详细提示
- 导出代码覆盖率数据
- 使用键盘浏览控制台
- 颜色选择器中的 AAA 对比度线
- 保存自定义地理定位覆盖值
- 代码折叠
- “框架”标签页已重命名为“消息”标签页
- 额外提示:按媒体资源过滤“网络”面板(视频)
- 在“效果”面板中直观呈现效果指标
- 在 DOM 树中突出显示文本节点
- 将 JS 路径复制到 DOM 节点
- “审核”面板更新,包括用于检测 JS 库的新审核,以及用于从命令菜单访问“审核”面板的新关键字
- 额外提示:使用设备模式检查媒体查询(视频)
- 将鼠标悬停在实时表达式结果上以突出显示 DOM 节点
- 将 DOM 节点存储为全局变量
- HAR 导入和导出中现已提供发起方和优先级信息
- 从主菜单访问命令菜单
- 画中画断点
- 额外提示:使用
monitorEvents()
在控制台中记录节点的已触发事件(视频) - 控制台中的实时表达式
- 在 Eager Evaluation 期间突出显示 DOM 节点
- “效果”面板优化
- 更可靠的调试
- 通过命令菜单启用网络节流功能
- 自动补全条件断点
- 在 AudioContext 事件发生时中断
- 使用 ndb 调试 Node.js 应用
- 额外提示:使用 User Timing API 衡量真实用户互动
- 及早评估
- 参数提示
- 函数自动补全
- ES2017 关键字
- “审核”面板中的 Lighthouse 3.0
- BigInt 支持
- 向“监视”窗格添加属性路径
- “显示时间戳”已移至“设置”
- 额外提示:鲜为人知的控制台方法(视频)
- 搜索所有网络标头
- CSS 变量值预览
- 复制为提取
- 新的审核、桌面版配置选项和查看轨迹
- 停止无限循环
- “效果”标签页中的“用户计时”
- “内存”面板中明确列出了 JavaScript 虚拟机实例
- “Network”(网络)标签页已重命名为“Page”(网页)标签页
- 深色主题更新
- “安全性”面板中的证书透明度信息
- “性能”面板中的网站隔离功能
- 额外提示:“图层”面板 + 动画检查器(视频)
- “网络”面板中的黑箱设置
- 在设备模式下自动调整缩放
- “预览”和“响应”标签页中的美化输出
- 在“预览”标签页中预览 HTML 内容
- 对 HTML 中样式的本地替换项支持
- 额外提示:使用黑盒框架脚本让事件监听器断点更实用
- 本地替换项
- 全新的无障碍工具
- “更改”标签页
- 新的 SEO 和效果审核
- “效果”面板中的多条录制内容
- 在异步代码中使用工作器实现可靠的代码步进
- 额外提示:使用 Puppeteer 自动执行开发者工具操作(视频)
- 性能监控器
- 控制台边栏
- 将类似的 Play 管理中心消息归为一组
- 额外提示:切换悬停伪类(视频)
- 多客户端远程调试支持
- Workspaces 2.0
- 4 项新审核
- 使用自定义数据模拟推送通知
- 使用自定义代码触发后台同步事件
- 额外提示:事件监听器断点(视频)
- 控制台中的顶层等待
- 全新的屏幕截图工作流程
- CSS 网格突出显示
- 用于查询对象的新版 Console API
- 控制台中的新过滤条件
- “Network”面板中的 HAR 导入功能
- 可预览的缓存资源
- 缓存调试的可预测性更高
- 块级代码覆盖率
- 移动设备节流模拟
- 查看存储空间用量
- 查看服务工作器缓存响应的时间
- 通过命令菜单启用 FPS 计量器
- 将鼠标滚轮行为设置为缩放或滚动
- 对 ES6 模块的调试支持
- 新的“审核”面板
- 第三方徽章
- 新增了“继续到此处”手势
- 单步进入异步模式
- 控制台中更具信息量的对象预览
- Search Console 中更具信息性的情境选择
- “覆盖面”标签页中的实时更新
- 更简单的网络节流选项
- 异步堆栈默认处于开启状态
- CSS 和 JS 代码覆盖率
- 整页屏幕截图
- 屏蔽请求
- 单步调试 async await
- 统一命令菜单