此页面由 Cloud Translation API 翻译。

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

Jecelyn Yeen

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

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

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

使用偏好" width="800" height="494">

Chromium 问题：1163928

“设备”列表中有新的 Nest Hub 设备

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

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

处于设备模式的 Nest Hub 设备

Chromium 问题：1223525

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

现在，您可以在“Application”面板下的框架详情视图中了解网站源试用的相关信息。

借助源试用功能，您可以使用新功能或实验性功能，以便在面向所有用户推出该功能之前，先打造可供用户在限定时间内试用的功能。

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

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

Chromium 问题：607555

全新“CSS 容器查询”徽章

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

CSS 容器查询徽章

Chromium 问题：1146422

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

使用新的 Invert 复选框来反转“Network”面板中的滤镜。

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

反转网络过滤器

Chromium 问题：1054464

即将弃用控制台边栏

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

控制台边栏弃用消息

Chromium 问题：1232937

在“Issues”标签页和“Network”面板中显示原始 `Set-Cookie` 标头

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

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

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

Chromium 问题：1179186

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

控制台现在一致地将原生访问器显示为自己的属性。

例如，在控制台中对 new Int8Array([1, 2, 3]) 表达式求值时，预览中不会显示 length、byteOffset 等原生访问器。经过此次最新更新，原生访问器可在预览中显示，并在扩展时快速评估值。

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

Chromium 问题：1076820、1199247

带有 #source网址的内联脚本的正确错误堆栈轨迹

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

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

带有 #source网址的内联脚本的正确错误堆栈轨迹

Chromium 问题：1183990、578269

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

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

按住 Shift 键的同时点击颜色预览，可更改颜色格式

Chromium 问题：1226371

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

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

在重新衡量自定义实现的好处后，我们发现原生 HTML 提示足以满足开发者工具的需要，采用这些提示可以避免用户遇到各种问题。

开发者工具提示

Chromium 问题：1223391

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

启用隐藏问题菜单实验，可在问题标签页中隐藏问题。这样，您就可以集中精力处理您关注的重要问题。

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

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

Chromium 问题：1175722

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

通过 crbug.com 提交建议或反馈。
使用开发者工具中的更多选项 > Help > Report a DevTools issues来报告开发者工具问题。
发推文：@ChromeDevTools。
请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。