此页面由 Cloud Translation API 翻译。

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

Jecelyn Yeen

CSS 网格编辑器

用户呼声最高的功能。您现在可以使用新的 CSS 网格编辑器预览和编写 CSS 网格了！

CSS 网格编辑器

当您页面上的某个 HTML 元素应用了 display: grid 或 display: inline-grid 后，“样式”窗格中便会在其旁边显示一个图标。点击该图标可切换 CSS 网格编辑器。在这里，您可以使用屏幕上的图标（例如 justify-content: space-around）预览潜在更改，并且只需点击一下即可编写网格外观。

Chromium 问题：1203241

支持在管理中心内使用 `const` 重复声明

除了现有的 let 和 class 重复声明之外，控制台现在还支持重新声明 const 语句。无法重新声明是 Web 开发者经常会遇到的烦恼，因为他们使用控制台尝试新的 JavaScript 代码。

这样一来，开发者可以将代码复制并粘贴到开发者工具控制台中，以查看其工作方式或实验方式，对代码进行小幅更改，并在不刷新页面的情况下重复该过程。以前，如果代码重新声明 const 绑定，则开发者工具会抛出语法错误。

请参阅以下示例。跨单独的 REPL 脚本（请参阅变量 a）支持 const 重复声明。请注意，设计不支持以下情况：

const 不允许在 REPL 脚本中重新声明网页脚本
不允许在同一 REPL 脚本中重复声明 const（引用变量 b）

常量重复声明

Chromium 问题：1076427

来源订单查看器

现在，您可以查看源元素在屏幕上的顺序，以更好地检查无障碍功能。

来源订单查看器

HTML 文档中的内容顺序对于搜索引擎优化和可访问性非常重要。较新的 CSS 功能允许开发者创建的内容在屏幕顺序上看起来与 HTML 文档中的内容有很大不同。这是一个很大的无障碍功能问题，因为与视力正常的用户相比，屏幕阅读器用户获得的体验最可能令人困惑。

Chromium 问题：1094406

用于查看画面详细信息的新快捷方式

要查看 iframe 详情，请右键点击“元素”面板中的 iframe 元素，然后选择显示框架详情。

显示框架详情

点击后，系统会在“应用”面板中查看 iframe 的详细信息。在该面板中，您可以查看文档详细信息、安全和隔离状态、权限政策等，以便调试潜在问题。

帧详情视图

Chromium 问题：1192084

增强了 CORS 调试支持

跨域资源共享 (CORS) 错误现在会显示在“问题”标签页中。有多种原因会导致 CORS 错误。点击展开每个问题，了解可能的原因和解决方案。

“Issues”（问题）标签页中的 CORS 问题

Chromium 问题：1141824

网络面板更新

将 XHR 标签重命名为 Fetch/XHR

XHR 标签现已重命名为 Fetch/XHR。经过这项更改后，您可以更清楚地了解，此过滤条件同时包含 XMLHttpRequest 和 Fetch API 网络请求。

提取/XHR 标签

Chromium 问题：1201398

在“网络”面板中过滤 Wasm 资源类型

您现在可以点击新的 Wasm 按钮来过滤 Wasm 网络请求。

按 Wasm 过滤

Chromium 问题：1103638

“网络状况”标签页中设备的用户代理客户端提示

用户代理客户端提示现在已应用于网络条件标签页下的用户代理字段中的设备。

用户代理客户端提示是对 Client Hints API 的新扩展，可让开发者以可保护隐私且符合人体工学的方式访问用户浏览器的相关信息。

“网络状况”标签页中设备的用户代理客户端提示

Chromium 问题：1174299

在“问题”标签页中报告怪异模式问题

现在，开发者工具会报告 Quirks Mode 和 Limited-quirks Mode 问题。

怪异模式和有限怪异模式是网络标准制定之前的旧版浏览器模式。这些模式可以模拟常常会导致意外视觉效果之前的标准时代布局行为。

在调试布局问题时，开发者可能会认为问题是由用户编写的 CSS 或 HTML bug 导致的，而真正的问题在于页面所处的兼容模式。开发者工具会提供修复建议。

在“问题”标签页中报告怪异模式问题

Chromium 问题：622660

在“性能”面板中添加计算交集

现在，开发者工具会在火焰图中显示计算交叉部分。这些更改可帮助您识别 Intersection Observer 事件，并调试其潜在的性能开销。

“Performance”面板中的“Compute Intersections”

Chromium 问题：1199137

Lighthouse 面板中的 Lighthouse 7.5

Lighthouse 面板现在正在运行 Lighthouse 7.5。对于在 CSS 中定义 aspect-ratio 的图片，系统现在会移除“缺少明确宽度和高度”警告。之前，Lighthouse 针对未定义宽度和高度的图片会显示警告。

如需查看更改的完整列表，请查看版本说明。

Chromium 问题：772558

废弃了调用堆栈中的“重启帧”上下文菜单

Restart frame 选项现已废弃。此功能需要进一步开发才能正常运行，但它目前已损坏并且经常崩溃。

已弃用的重启帧上下文菜单

Chromium 问题：1203606

[实验性] 协议监控器

Chrome 开发者工具使用 Chrome 开发者工具协议 (CDP) 对 Chrome 浏览器进行插桩、检查、调试和性能分析。协议监控让您可以查看由开发者工具发出的所有 CDP 请求和响应。

添加了两项新功能，以方便 CDP 测试：

新的保存按钮允许您将录制的消息下载为 JSON 文件
一个新字段，可让您直接发送原始 CDP 命令

协议监控器

Chromium 问题：1204004、1204466

[实验性] 木偶手录音器

Puppeteer 记录器现在会根据您与浏览器的交互生成步骤列表，而之前的开发者工具会直接生成 Puppeteer 脚本。添加了新的 Export（导出）按钮，以便您将步骤导出为 Puppeteer 脚本。

记录步骤后，您可以使用新的 Replay 按钮重放步骤。请按照此处的说明，了解如何开始录制。

请注意，此实验尚处于早期阶段。我们计划逐步改进和扩展“录音机”功能。

木偶演奏器录音机

Chromium 问题：1199787

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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