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

Jecelyn Yeen

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

Chrome DevTools 现在支持 80 多种语言，让您可以使用自己偏好的语言进行工作！

打开设置，然后依次选择 Preferences（偏好设置）> Language（语言）下拉菜单中的首选语言，然后重新加载 DevTools。

Preferences" width="800" height="494">

Chromium 问题：1163928

设备列表中新增了 Nest Hub 设备

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

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

处于设备模式的 Nest Hub 设备

Chromium 问题：1223525

框架详情视图中的来源试用

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

借助源试用，您可以使用新功能或实验性功能，以便在向所有用户提供该功能之前，让用户在有限时间内试用该功能。

打开包含来源试用版的页面（例如演示页面）。在应用面板中，向下滚动到帧部分，然后选择顶部帧。

框架详情视图中的来源试用

Chromium 问题：607555

新的 CSS 容器查询徽章

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

CSS 容器查询徽章

Chromium 问题：1146422

新增了一个复选框，用于反转影音平台过滤条件

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

例如，您可以输入“status-code: 404”来过滤状态为 404 的网络请求。启用反转复选框可否定过滤条件（显示所有状态不为 404 的网络请求）。

反转影音平台过滤条件

Chromium 问题：1054464

控制台边栏即将弃用

我们将移除控制台边栏，并将过滤器界面移至工具栏。您有任何疑虑或反馈吗？请通过此问题跟踪器告知我们。

控制台边栏弃用消息

Chromium 问题：1232937

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

DevTools 现在会在问题标签页中显示原始 Set-Cookie 标头。

以前，DevTools 不会在“Network”面板中显示格式错误的 Cookie（Set-Cookie 标头不正确）。在网络面板中添加了新的 response-header-set-cookie 过滤器，用户可以过滤原始 Set-Cookie 标头响应。DevTools 会将 Issues 标签页中的原始 Set-Cookie 标头关联到 Network 面板。

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

Chromium 问题：1179186

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

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

例如，在 Console 中评估 new Int8Array([1, 2, 3]) 表达式时，length、byteOffset 等原生访问器不会显示在预览中。在最新的更新中，预览中会显示原生访问器，并且在展开时会提前评估值。

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

Chromium 问题：1076820、1199247

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

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

以前，对于包含 #sourceURL 的内嵌脚本，DevTools 显示的位置是相对于周围文档的位置，而不是相对于开头 <script> 标记的位置。

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

Chromium 问题：1183990、578269

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

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

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

Chromium 问题：1226371

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

DevTools 现在在所有组件中采用原生 HTML 提示。由于原生 HTML 提示缺少样式，因此开发者工具一直采用自定义提示实现。

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

重新权衡自定义实现的好处后，我们发现原生 HTML 提示足以满足 DevTools 的需求，采用这些提示可防止用户遇到各种各样的问题。

DevTools 提示

Chromium 问题：1223391

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

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

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

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

Chromium 问题：1175722

下载预览渠道

不妨考虑将 Chrome Canary 版、开发者版或 Beta 版用作默认开发浏览器。通过这些预览版渠道，您可以使用最新的 DevTools 功能、测试尖端的 Web 平台 API，并帮助您在用户发现问题之前发现网站上的问题！

与 Chrome DevTools 团队联系

您可以使用以下选项讨论与 DevTools 相关的新功能、更新或任何其他内容。

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。