Chrome 128 开发者工具中的新功能

Sofia Emelianova
Sofia Emelianova
GitHub

Gemini 提供的控制台数据洞见即将在大多数欧洲国家/地区推出

此版本为大多数欧洲国家/地区引入了 Gemini 提供的管理中心数据分析支持。

新增支持的欧洲国家/地区列表

奥地利、比利时、保加利亚、瑞士、塞浦路斯、捷克、德国、丹麦、爱沙尼亚、西班牙、芬兰、法国、英国、希腊、克罗地亚、匈牙利、爱尔兰、冰岛、意大利、列支敦士登、立陶宛、卢森堡、拉脱维亚、马耳他、荷兰、斯堪的纳维亚、斯洛伐克、斯洛伐克

如果您位于上述国家/地区，现在可以让 Gemini 直接在控制台中提供数据分析，以便更好地了解错误和警告。

Gemini 针对控制台中出现的错误提供的分析洞见。

性能面板更新

此更新对 Performance 面板进行了一些改进。

增强型网络跟踪

Performance 面板中的 Network 轨道已得到增强，可以预先显示关键信息，因此您无需在 Network 面板和 Performance >摘要标签页，以便更清晰地显示视觉提示和颜色。此外，如果您仍然需要切换到网络面板，我们已为您提供更简单快捷的操作方式。

Network 轨道现在可执行以下操作：

  • 显示请求类型的颜色图例。
  • 使用右上角的红色三角形标记阻塞渲染的请求，并使用箭头在选择时显示请求发起者。
  • 悬停鼠标时，经过修改的提示现在会显示结构化的时间信息，包括优先级和呈现阻塞情况的更改（如果有）。
  • 现在，摘要标签还会在右侧的列中显示时间的细分数据。

“摘要”标签页中的增强型网络轨道，带有颜色图例、提示、阻塞渲染的指示器和显示时间。

此外，您现在可以在摘要标签页中右键点击轨道中的相应请求或其网址，然后从下拉菜单中选择在“网络”面板中显示。开发者工具会将您转到 Network 面板，并在表格中突出显示您要查找的请求。

请求的右键点击菜单，其中包含“在网络中显示”面板选项。

利用可扩展性 API 自定义性能数据

此版本在性能面板中提供了对扩展程序数据的支持。您现在可以向效果跟踪记录添加包含事件和提示说明的自定义轨道，并将详细信息添加到摘要标签页，以及执行其他操作。此功能对于具有自定义插桩的框架、库和复杂应用的开发者来说可能很有用。

如需查看自定义轨道示例，请访问此演示页面。在效果 > 中捕获设置，将扩展程序数据设为check_box。开始录制表演，点击演示页面上的添加新柯基犬，然后停止录制。您将在跟踪记录中看到一个自定义轨道，其中包含带有自定义提示和详细信息的事件（位于摘要标签页中）。

“性能”面板中的自定义轨道。

简而言之，如需扩展性能数据，请将特定结构传递给 performance.measure() 或 performance.mark() API 调用的 measureOption.detail 或 markOption.detail 参数。

“计时”轨道中的详细信息

如果您是 Web 开发者，并且使用 Performance API 的 User Timing 部分向 Timings 轨道添加条目，现在就可以在 Summary 标签页中查看 mark 和 measure 事件的任意详情及其时间戳。

“计时”轨道中的自定义事件，包含时间戳和详细信息。

Chromium 问题：345418915。

复制“网络”面板中列出的所有请求

现在，您可以在 Network 面板中应用过滤条件并仅复制列出的请求，而无需复制整个网络日志。

仅适用于所列请求的复制选项。

通过已命名的 HTML 标记加快堆快照的速度，减少杂乱

Memory 面板中的堆快照速度更快；现在，对象按已命名的 HTML 标记分组；显示的内部对象更少，从而更好地匹配 JavaScript 语言语义；此外，还始终包含数值。

对象按已命名的 HTML 标记分组。

check_box 在捕获中包括数值设置的性能已得到加速，默认情况下处于启用状态，并从内存面板中移除。

如需在快照中手动添加内部对象，请先开启设置 设置 >实验 >check_box 显示用于在堆快照中公开内部项的选项，然后在 Memory 面板中开启 check_box 公开内部项 (...)。

Chromium 问题：41490040、343341610、42203857。

打开“动画”面板以拍摄动画并实时修改“@keyframes”

Animations 面板现在会执行以下操作：

  • 当您打开面板时捕获动画，因此您无需刷新页面即可捕获动画。
  • 支持实时编辑@keyframes。换言之，在修改 Elements 中的 @keyframes 部分时，系统会更新捕获的动画 >样式。

请观看以下视频，了解这两项功能的实际运用。

Chromium 问题：352718055。

Lighthouse 12.1.0

Lighthouse 面板现在运行 Lighthouse 12.1.0。

此次更新进行了多项更改，包括移除了旧的 First Meaningful Paint (FMP) 指标，取而代之的是 Largest Contentful Paint (LCP)。请参阅完整的更改列表。

如需了解在开发者工具中使用 Lighthouse 面板的基础知识，请参阅 Lighthouse：优化网站速度。

Chromium 问题：772558。

无障碍

此版本在无障碍功能方面做出了以下改进：

  • 在实时表达式的修改字段中执行自动补全操作后按 Tab 键可将焦点移至下一个焦点。而在以前，系统会缩进文本。
  • 点击大小调整器可以将焦点置于其上，因此您可以使用向右和向左箭头键进行移动。
  • 现在，屏幕阅读器会读出 Sources 中的 Add watch 表达式（添加监视表达式）修改字段，并且现在，使用键盘导航时，Delete watchexpression 会清晰地显示。

Chromium 问题：349939551、343942719、349334243、349428374。

其他亮点

以下是此版本中值得注意的一些修复和改进：

  • 性能： <ph type="x-smartling-placeholder">
      </ph>
    • 网络轨道：添加了 WebSocket 连接事件 331351979。
    • Performance 面板现在可以正确放大最繁忙的主线程 activity 345599356。
    • 修复了与上传错误的轨迹文件类型有关的 bug，它现在会阻止上传除正确的 .json 或 .gz 349864878 外的任何类型。
  • 元素 >样式： <ph type="x-smartling-placeholder">
      </ph>
    • 长度属性值的单位下拉菜单现已弃用 41495618。
    • 修复了解析嵌套 at-rules 346732737 的活动属性。
    • 无效 @position-try 部分现在显示为灰色 40246493。
  • 应用： <ph type="x-smartling-placeholder">
      </ph>
    • Cookie：修复了点击刷新按钮 348683488 后无法刷新 Cookie 的错误。
    • 本地存储空间：您现在可以按键的字母顺序 (341129585) 进行排序。

下载预览渠道

请考虑将 Chrome Canary、开发者版或 Beta 版用作您的默认开发浏览器。通过这些预览渠道，您可以访问最新的开发者工具功能，测试先进的网络平台 API，并在用户之前发现您网站上的问题！

与 Chrome 开发者工具团队联系

使用以下选项讨论博文中的新功能和变更，或与开发者工具相关的任何其他内容。

  • 请通过 crbug.com 提交建议或反馈。
  • 使用更多选项报告开发者工具问题 展开 >帮助 >在开发者工具中报告开发者工具问题。
  • 请发送电子邮件至 @ChromeDevTools。
  • 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。

开发者工具的新变化

开发者工具的新变化系列涵盖所有内容的列表。

Chrome 128

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 浏览器 111

Chrome 浏览器 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 入门指南

Chrome 浏览器 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 已取消。

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59