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

Jecelyn Yeen

以您偏好的语言使用开发者工具

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

打开设置，然后在偏好设置 > 语言 下拉菜单中选择您的首选语言，然后重新加载开发者工具。

偏好设置" width="800" height="494">

Chromium 问题：1163928

设备列表中的新 Nest Hub 设备

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

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

Chromium 问题：1223525

框架详情视图中的源试用

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

源试用可让您使用新功能或实验性功能，以便构建用户可以在有限的时间内试用的功能，然后再向所有人提供该功能。

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

Chromium 问题：607555

新的 CSS 容器查询徽章

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

Chromium 问题：1146422

用于反转网络过滤条件的新复选框

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

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

Chromium 问题：1054464

控制台边栏即将弃用

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

Chromium 问题：1232937

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

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

之前，开发者工具不会在“网络”面板中显示格式错误的 Cookie（Set-Cookie 标头不正确）。借助网络面板中新增的 response-header-set-cookie 过滤条件，用户可以过滤原始 Set-Cookie 标头响应。开发者工具会将问题标签页中的原始 Set-Cookie 标头链接到网络面板。

Chromium 问题：1179186

在控制台中将原生访问器始终显示为自有属性

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

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

Chromium 问题：1076820、1199247

为带有 #source网址 的内嵌脚本提供适当的错误堆栈轨迹

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

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

Chromium 问题：1183990、578269

在“计算后”窗格中更改颜色格式

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

Chromium 问题：1226371

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

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

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

在重新权衡自定义实现的好处后，我们发现原生 HTML 工具提示足以满足 DevTools 的需求，并且采用工具提示可以避免用户遇到各种各样的问题。

Chromium 问题：1223391

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

启用“隐藏问题”菜单实验，以隐藏问题标签页中的问题。这样，您就可以专注于对您而言重要的事项。

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

Chromium 问题：1175722

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次点击 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，报告开发者工具问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

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