开发者工具的新变化 (Chrome 94)

Jecelyn Yeen

以您的首选语言使用开发者工具

Chrome 开发者工具现在支持 80 多种语言，让您可以使用自己的首选语言工作！

打开设置，然后在偏好设置下选择自己偏好的语言Language 下拉菜单并重新加载开发者工具。

偏好设置”width="800"高度="494">

Chromium 问题：1163928

设备列表中的新 Nest Hub 设备

您现在可以在设备模式下模拟 Nest Hub 和 Nest Hub Max 的尺寸。

点击切换设备工具栏   切换设备工具栏，然后在设备列表下选择 Nest Hub 或 Nest Hub Max。

处于设备模式的 Nest Hub 设备

Chromium 问题：1223525

“帧详情”视图中的源试用

现在，您可以在“应用”面板下的“框架详情”视图中获取有关网站源试用的信息。

通过源试用，您可以使用新功能或实验性功能，以便构建可供用户在限定时间内试用的功能，之后即可面向所有用户推出。

打开提供源试用的页面（例如演示页面）。在 Application 面板中，向下滚动到 Frames 部分，然后选择顶部框架。

“帧详情”视图中的源试用

Chromium 问题：607555

“新建 CSS 容器查询”徽章

容器元素（与 @container at-rules 的条件匹配的祖先元素）旁边添加了一个新的容器标记。点击该标志可在页面上切换显示所选容器及其所有查询后代的叠加层。

CSS 容器查询标志

Chromium 问题：1146422

新增复选框，用于反转网络过滤器

在“网络”面板中，使用新的反转复选框反转过滤器。

例如，您可以输入“status-code: 404”以过滤状态为 404 的网络请求。选中反转复选框以排除该过滤器（显示所有不是处于 404 状态的网络请求）。

反转网络过滤条件

Chromium 问题：1054464

即将弃用控制台边栏

控制台边栏将被移除，取而代之的是将过滤器界面移至工具栏。您有什么疑虑或反馈吗？请通过此问题跟踪器告知我们。

控制台边栏弃用消息

Chromium 问题：1232937

在“Issues”（问题）标签页和“Network”（网络）面板中显示原始 Set-Cookie 标头

现在，开发者工具会在 Issues 标签页中显示原始 Set-Cookie 标头。

以前，DevTools 不会在 Network 面板中显示格式错误的 Cookie（错误的 Set-Cookie 标头）。在 Network 面板中添加新的 response-header-set-cookie 过滤条件后，用户可以过滤原始 Set-Cookie 标头响应。开发者工具会将 Issues 标签页中的原始 Set-Cookie 标头关联到 Network 面板。

原始“Set-Cookie”“Issues”（问题）标签页和“Network”（网络）面板中的标头

Chromium 问题：1179186

在控制台中以一致的属性将原生访问器显示为自有属性

控制台现在会将原生访问器始终显示为它们自己的属性。

例如，在控制台中评估 new Int8Array([1, 2, 3]) 表达式时，预览中不会显示 length 和 byteOffset 等原生访问器。经过这项最新更新后，原生访问器会显示在预览中，并且在展开时会立即评估值。

在控制台中以一致的属性将原生访问器显示为自有属性

Chromium 问题：1076820、1199247

包含 #source网址 的内嵌脚本的正确错误堆栈轨迹

现在，开发者工具可以正确解析 #sourceURL 的内嵌脚本，并显示正确的错误堆栈轨迹以进行调试。

以前，对于带有 #sourceURL 的内嵌脚本，开发者工具会相对于周围的文档显示错误的位置，而不是相对于起始 <script> 标记的位置。

包含 #source网址 的内嵌脚本的正确错误堆栈轨迹

Chromium 问题：1183990、578269

在“Computed”窗格中更改颜色格式

现在，您可以在“Computed”窗格中更改任何元素的颜色格式，只需按住 Shift 键并点击颜色预览即可。

按住 Shift 键并点击颜色预览可更改颜色格式

Chromium 问题：1226371

将自定义提示替换为原生 HTML 提示

现在，开发者工具会在所有组件中采用原生 HTML 提示。由于缺少原生 HTML 提示的样式，开发者工具采用自定义提示实施已有很长时间。

遗憾的是，维护自定义提示的实现非常复杂，我们经常遇到复杂的错误。

在重新衡量自定义实现的优势后，我们发现原生 HTML 提示已足够使用开发者工具，而采用提示可以避免用户遇到各种各样的问题。

开发者工具提示

Chromium 问题：1223391

[实验性] 在“问题”标签页中隐藏问题

启用隐藏问题菜单实验以在问题标签页中隐藏问题。这样，您就可以专注于您所看重的重要问题。

在问题标签页中，将鼠标悬停在某个问题上，点击右侧的问题菜单 展开，选择隐藏此类问题将其隐藏。

实验性隐藏问题上下文菜单

Chromium 问题：1175722

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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