使用 Gemini 调试网络请求、源文件和性能轨迹
除了 CSS 样式之外,您现在还可以与 Gemini 聊聊网络请求、源文件和性能轨迹。
与元素面板中的上下文菜单类似,如需打开 AI 辅助面板并开始与 Gemini 对话,请右键点击并选择向 AI 提问,或点击以下各项旁边的
向 AI 提问按钮:- 网络面板中的网络请求。
- 来源 > 网页 标签页中的文件。
- 效果 > 主要轨道中的活动。
Gemini 会将所选请求、文件或活动的背景信息纳入考虑范围。
开发者工具团队期待在 crbug.com/364805393 中收到您的反馈。
AI 对话记录
现在,您可以在 AI 辅助面板中恢复和查看与 Gemini 的过往对话,方法是点击面板左上角的
新对话按钮,或者使用网络面板、来源 > 网页标签页和效果 > 主要轨道中的向 AI 提问按钮和菜单选项。如需查看之前的某次对话,请从
历史记录按钮下方的下拉菜单中选择相应的提示。在开发者工具打开期间,AI 辅助功能面板会记住您的聊天记录。在“应用”>“存储”中管理扩展程序存储空间
与本地存储空间和会话存储空间类似,您现在可以在应用 > 存储空间部分查看和更改扩展程序存储空间条目。
Chromium 问题:crbug.com/40963428。
提升了性能
此版本对性能面板进行了一些改进。
实时指标中的互动阶段
您现在可以展开效果实时指标中的互动,查看阶段及其时间的细分数据。
正如开发者工具中的 Web Vitals 扩展程序中所述,这些功能的发布标志着 Web Vitals 扩展程序的支持结束。
Chromium 问题:crbug.com/369097528。
“摘要”标签页中的呈现屏蔽信息
当您在性能 > 网络轨迹中选择标有红色三角形的网络请求时,摘要标签页除了显示(重构的)工具提示之外,现在还会告知您该请求会阻塞渲染。
支持 scheduler.postTask
事件及其发起者箭头
性能 > 主轨道现在会显示 scheduler.postTask()
事件以及以下发起者箭头:
Schedule postTask
->Fire postTask
Schedule postTask
->Abort postTask
Chromium 问题:crbug.com/40775984。
“动画”面板和“元素”>“样式”标签页改进
此版本对动画面板和元素 > 样式标签页进行了一些改进。
从“元素”>“样式”跳转到“动画”
现在,元素 > 样式 标签页会在 animation
属性的值旁边放置 animation 跳转到“动画”面板图标,以便您轻松检查动画。
“计算后”标签页中的实时更新
现在,当动画更新计算值时,“元素”>“计算”标签页会实时更新计算值。
传感器中的计算压力模拟
借助传感器面板,您现在可以模拟 Nominal
、Fair
、Serious
和 Critical
CPU 压力。
Chromium 问题:crbug.com/362277525。
内存面板中按来源分组的同名 JS 对象
“内存”面板现在可以区分来自不同来源的同名 JS 对象,并相应地对它们进行分组。
Chromium 问题:crbug.com/357902505。
焕然一新的“设置”
为了更好地统一界面设计,开发者工具设置现在与 Chrome 设置更加相似。特别是,各个部分现在以“卡片”的形式在视觉上分隔开来。
“性能数据分析”面板已弃用,并已从开发者工具中移除
性能数据分析面板中的所有重要实用功能现已移至性能面板,具体位于实时指标、数据洞见侧边栏标签页和布局偏移轨道中。因此,此版本弃用了开发者工具中的性能数据分析面板并将其移除。
开发者工具团队非常感谢您就此面板的弃用以及整体性能调试体验提供的反馈。我们一如既往地期待听到您的想法并了解您的观点。请继续发送!
其他亮点
此版本包含以下值得注意的修复和改进:
- 效果:
- 移除了不必要的 3 个字符的搜索查询限制。
- 添加了 主页按钮,可返回到实时指标界面。
- 修复了之前损坏的 Shift+S/W 轨迹缩放快捷键。
- 元素 > 样式:
- 为自动补全添加了 anchor-center 341991541。
- 修复了 Flexbox 编辑器不适用于双字值的问题 341964645。
- 网络:预提取失败现在显示为黄色警告,而不是红色错误,以表明内容显示不受影响 372055494。
下载预览渠道
不妨考虑使用 Chrome Canary 版、开发者版或 Beta 版作为默认开发浏览器。通过这些预览渠道,您可以访问最新的 DevTools 功能,测试前沿的 Web 平台 API,并帮助您在用户之前发现网站上的问题!
与 Chrome 开发者工具团队联系
您可以使用以下选项讨论新功能、更新或与开发者工具相关的任何其他内容。
- 请前往 crbug.com 向我们提交反馈和功能请求。
- 在开发者工具中,依次选择 更多选项 > 帮助 > 报告开发者工具问题,以报告开发者工具问题。
- 在 Twitter 上向 @ChromeDevTools 发送推文。
- 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。
开发者工具的新变化
DevTools 新变化系列中涵盖的所有内容的列表。
- 使用 Gemini 调试更多洞见
- 在“网络状况”中模拟“Save-Data”标头
- 在 CSS 属性提示中查看基准状态
- 替换用户代理客户端提示中的设备规格
- Lighthouse 12.8.0
- 其他亮点
- 更可靠、更高效的 Chrome 开发者工具
- 在 AI 辅助功能中上传图片以进行样式设置
- 向“网络”中的表格添加请求标头
- 查看 2025 年 Google I/O 大会的亮点
- 其他亮点
- 改进了“性能”面板
- “网络依赖关系树”数据分析中的预连接源
- “文档请求延迟时间”数据洞见中的服务器响应和重定向时间
- “网络请求摘要”中的重定向
- 减少了性能轨迹中的噪声
- 已弃用“停用 JavaScript 示例”
- 传感器中的地理定位精确度形参
- “元素”面板改进
- 更轻松地调试复杂的 CSS 值
- Elements 中的@function 支持 > 样式
- “网络”面板改进
- has-request-header 过滤条件
- 独立式 Web 应用中的直接套接字
- 其他亮点
- 无障碍功能
- 2025 年 Google I/O 大会版
- 使用 Gemini 修改 CSS 并将更改保存到工作区
- 关联工作区文件夹并将更改保存回源文件
- 向 Gemini 询问有关性能数据分析的问题
- 使用 Gemini 为效果分析结果添加注释
- 在与 Gemini 的对话中添加屏幕截图
- “效果”面板中的新数据洞见
- 重复的 JavaScript
- 旧版 JavaScript
- 推测现在支持规则标记
- Lighthouse 12.6.0
- 其他亮点
- 无障碍功能
- 改进了“性能”面板
- 新的效果分析
- 点击即可突出显示
- “网络请求摘要”中的服务器计时
- 在“隐私和安全”中过滤 Cookie
- 各面板中表格的大小(以 kB 为单位)
- 自动补全功能支持“元素”>“样式”中的边角形状和边角*-形状
- 实验性功能:突出显示 DOM 中元素和属性存在的问题
- Lighthouse 12.5.0
- 其他亮点
- 改进了“性能”面板
- 性能中的个人资料和函数调用的来源和脚本链接
- 按阶段划分的 LCP 字段数据支持
- 网络依赖关系树数据分析
- “摘要”中显示时长,而不是总时间和自身时间
- “执行用时最长的堆栈”突出显示功能
- 改进了各种面板的空状态
- “元素”中的无障碍功能树状视图
- Lighthouse 12.4.0
- 其他亮点
- “隐私和安全”面板
- 改进了“性能”面板
- 校准后的 CPU 节流预设
- 在同一 AI 对话中选择不同的效果活动
- “效果”中的第一方和第三方突出显示
- 标记工具提示和数据分析中的实测数据
- 强制自动重排数据分析
- “优化 DOM 大小”数据洞见
- 使用 console.timeStamp 扩展性能轨迹
- “元素”面板改进
- 动画样式的实时值
- 支持 :open 伪类和各种伪元素
- 复制所有控制台消息
- “内存”面板中的字节单位
- 其他亮点
- 持久的 AI 聊天记录
- 改进了“性能”面板
- 图片分发分析数据
- 传统键盘导航和现代键盘导航
- 忽略火焰图中的无关脚本
- 时间轴标记和悬停时的范围突出显示
- 建议的限制设置
- 叠加层中的时间标记
- “摘要”中的 JS 调用堆栈轨迹
- 徽章设置已移至 Elements 中的菜单
- 新增“新变化”面板
- Lighthouse 12.3.0
- 其他亮点
- 使用 Gemini 调试网络请求、源文件和性能轨迹
- 查看 AI 聊天记录
- 在“应用”>“存储空间”中管理扩展程序存储空间
- 性能改进
- 实时指标中的互动阶段
- 在“摘要”标签页中呈现阻塞信息
- 支持 scheduler.postTask 事件及其发起者箭头
- “动画”面板和“元素”>“样式”标签页改进
- 从“元素”>“样式”跳转到“动画”
- “计算”标签页中的实时更新
- 传感器中的计算压力模拟
- “内存”面板中按来源分组的同名 JS 对象
- 设置的新外观
- “性能数据分析”面板已弃用,并已从开发者工具中移除
- 其他亮点
- 使用 Gemini 调试 CSS
- 在专用设置标签页中控制 AI 功能
- 改进了“性能”面板
- 添加注释并分享效果发现
- 直接在“效果”面板中获取效果分析
- 更轻松地发现过度的布局偏移
- 找出未合成的动画
- 硬件并发移至传感器
- 忽略匿名脚本,专注于堆栈轨迹中的代码
- 元素 > 样式:支持网格叠加层和 CSS 范围关键字的 sideways-* 书写模式
- 在时间跨度模式和快照模式下针对非 HTTP 网页运行 Lighthouse 审核
- 无障碍功能改进
- 其他亮点
- “网络”面板改进
- 重新构想的网络过滤器
- HAR 导出功能现在默认排除敏感数据
- “元素”面板改进
- text-emphasis-* 属性的自动补全值
- 使用徽章标记滚动溢出
- 改进了“性能”面板
- 实时指标中的建议
- 浏览面包屑导航
- “内存”面板改进
- 新的“已分离的元素”配置文件
- 改进了纯 JS 对象的命名
- 关闭动态主题
- Chrome 实验:进程共享
- Lighthouse 12.2.1
- 其他亮点
- 记录器支持导出到 Puppeteer for Firefox
- 改进了“性能”面板
- 实时指标观测
- 网络轨道中的搜索请求
- 查看 performance.mark 和 performance.measure 调用的堆栈轨迹
- 在“自动填充”面板中使用测试地址数据
- “元素”面板改进
- 强制设置特定元素的更多状态
- “元素”>“样式”现在可自动补全更多网格属性
- Lighthouse 12.2.0
- 其他亮点
- Gemini 的控制台数据分析功能将在大多数欧洲国家/地区正式推出
- “效果”面板更新
- 增强型网络轨道
- 使用可扩展性 API 自定义效果数据
- “时间安排”轨道中的详细信息
- 复制“网络”面板中列出的所有请求
- 使用命名 HTML 标记更快地获取堆快照,并减少杂乱
- 打开“动画”面板以捕获动画并实时修改 @keyframes
- Lighthouse 12.1.0
- 无障碍功能改进
- 其他亮点
- 在“元素”面板中检查 CSS 锚点定位
- “来源”面板改进
- 增强了“一律不在此处暂停”功能
- 新的滚动贴靠事件监听器
- “网络”面板改进
- 更新了网络节流预设
- HAR 格式的自定义字段中的 service worker 信息
- 在“性能”面板中发送和接收 WebSocket 事件
- 其他亮点
- 改进了“性能”面板
- 使用更新后的轨道配置模式移动和隐藏轨道
- 忽略火焰图中的脚本
- 将 CPU 降频 20 倍
- “效果数据分析”面板将被弃用
- 使用堆快照中的新过滤条件查找过多的内存用量
- 在“应用”>“存储”中检查存储分区
- 使用命令行标志停用自 XSS 警告
- Lighthouse 12.0.0
- 其他亮点
- 借助 Gemini 更好地了解控制台中的错误和警告
- 在“元素”>“样式”中支持@position-try 规则
- “来源”面板改进
- 配置自动美化打印和括号闭合
- 已处理的被拒绝的 Promise 会被识别为已捕获
- 控制台中的错误原因
- “网络”面板改进
- 检查早期提示标头
- 隐藏瀑布图列
- 改进了“性能”面板
- 捕获 CSS 选择器统计信息
- 更改顺序和隐藏曲目
- 忽略“内存”面板中的保留器
- Lighthouse 11.7.1
- 其他亮点
- 新的自动填充面板
- 增强了对 WebRTC 的网络节流
- “动画”面板中支持滚动条驱动的动画
- 改进了“元素”>“样式”中的 CSS 嵌套支持
- 增强版“效果”面板
- 在火焰图中隐藏函数及其子项
- 从所选发起者到其发起的事件的箭头
- Lighthouse 11.6.0
- “内存”>“堆快照”中特殊类别的提示
- 应用 > 存储空间更新
- 共享存储空间使用的字节数
- Web SQL 已完全弃用
- “覆盖面”面板改进
- “图层”面板可能即将被弃用
- JavaScript 性能剖析器弃用:第四阶段(最终阶段)
- 其他亮点
- 寻找复活节彩蛋
- “元素”面板更新
- 在“元素”>“样式”中模拟已聚焦的网页
var()
后备中的颜色选择器、角度时钟和缓动编辑器- CSS 长度工具已弃用
- “效果”>“主要轨道”中针对所选搜索结果的弹出式窗口
- 网络面板更新
- “网络”>“EventStream”标签页中的“清除”按钮和搜索过滤条件
- “网络”>“Cookie”中包含第三方 Cookie 豁免原因的提示框
- 在“来源”中启用和停用所有断点
- 在 Node.js 版开发者工具中查看已加载的脚本
- 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 警告
- Web Worker 和 Worklet 中的事件监听器断点
- 适用于
<audio>
和<video>
的新媒体徽章 - 预加载已重命名为推测加载
- Lighthouse 11.2.0
- 无障碍功能改进
- 其他亮点
- 改进了“元素”>“样式”中的 @property 部分
- 可修改的 @property 规则
- 系统会报告无效的 @property 规则问题
- 更新了要模拟的设备列表
- 在“来源”中以格式整齐的方式打印脚本标记中的内嵌 JSON
- 在控制台中自动补全私有字段
- Lighthouse 11.1.0
- 无障碍功能改进
- 弃用 Web SQL
- 应用 > 清单中的屏幕截图宽高比验证
- 其他亮点
- “元素”>“样式”中新增了自定义属性部分
- 更多本地替换改进
- 增强型搜索
- 改进了“来源”面板
- “来源”面板中的简化工作区
- 对“来源”中的窗格重新排序
- 为更多脚本类型提供语法突出显示和美观打印功能
- 模拟 prefers-reduced-transparency 媒体功能
- Lighthouse 11
- 无障碍功能改进
- 其他亮点
- “网络”面板改进
- 更快地在本地替换 Web 内容
- 替换 XHR 和 fetch 请求的内容
- 隐藏 Chrome 扩展程序请求
- 人类可读的 HTTP 状态代码
- 默认启用的“来源”设置:代码折叠和自动显示文件
- 改进了第三方 Cookie 问题的调试
- 新颜色
- Lighthouse 10.4.0
- 在“应用”面板中调试预加载
- 适用于开发者工具的 C/C++ WebAssembly 调试扩展程序现已开源
- 其他亮点
- (实验性)新的渲染模拟:prefers-reduced-transparency
- (实验性)增强型协议监控器
- 改进了对缺少样式表的调试
- “元素”>“样式”>“缓动编辑器”中的线性时间调整支持
- 存储分区支持和元数据视图
- Lighthouse 10.3.0
- 无障碍功能:键盘命令和改进的屏幕阅读
- 其他亮点
- 元素改进
- 新的 CSS 子网格徽章
- 提示中的选择器特异性
- 工具提示中自定义 CSS 属性的值
- 来源改进