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

Jecelyn Yeen

CSS 网格编辑器

一项备受期待的功能。现在，您可以使用新的 CSS 网格编辑器预览和创建 CSS 网格！

如果网页上的某个 HTML 元素应用了 display: grid 或 display: inline-grid，您会在“样式”窗格中看到该元素旁边显示一个图标。点击该图标可切换 CSS 网格编辑器。您可以在此处通过屏幕上的图标（例如 justify-content: space-around）预览潜在的更改，只需点击一下即可设置网格外观。

Chromium 问题：1203241

支持在控制台中进行 const 重新声明

除了现有的 let 和 class 重新声明之外，控制台现在还支持 const 语句的重新声明。无法重新声明变量是使用控制台试验新 JavaScript 代码的网络开发者经常遇到的烦恼。

这样一来，开发者便可将代码复制粘贴到开发者工具控制台中，查看代码的运作方式或进行实验，对代码进行小幅更改，然后重复该流程，而无需刷新页面。之前，如果代码重新声明了 const 绑定，开发者工具会抛出语法错误。

请参阅以下示例。支持跨单独的 REPL 脚本进行 const 重新声明（请参阅变量 a）。请注意，以下场景在设计上不受支持：

• 不允许在 REPL 脚本中重新声明网页脚本const
• 不允许在同一 REPL 脚本中进行 const 重新声明（请参阅变量 b）

Chromium 问题：1076427

来源顺序查看器

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

HTML 文档中内容的顺序对于搜索引擎优化和无障碍功能至关重要。借助新的 CSS 功能，开发者可以创建屏幕显示顺序与 HTML 文档中的顺序截然不同的内容。这是一个严重的无障碍问题，因为屏幕阅读器用户获得的体验与视力正常的用户不同，很可能会感到困惑。

Chromium 问题：1094406

用于查看框架详情的新快捷方式

如需查看 iframe 详细信息，请在“元素”面板中右键点击 iframe 元素，然后选择显示框架详细信息。

这会打开“应用”面板中的 iframe 详情视图，您可以在其中检查文档详情、安全和隔离状态、权限政策等，以调试潜在问题。

Chromium 问题：1192084

增强了 CORS 调试支持

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

Chromium 问题：1141824

“网络”面板更新

将 XHR 标签重命名为 Fetch/XHR

XHR 标签现已重命名为 Fetch/XHR。此更改可更清楚地表明，此过滤条件同时包含 XMLHttpRequest 和 Fetch API 网络请求。

Chromium 问题：1201398

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

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

Chromium 问题：1103638

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

现在，系统会为网络状况标签页中用户代理字段内的设备应用 User-Agent Client Hints。

User-Agent Client Hints 是 Client Hints API 的一项新扩展功能，可让开发者以保护隐私且符合人体工程学的方式访问用户浏览器相关信息。

Chromium 问题：1174299

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

DevTools 现在会报告怪异模式和有限怪异模式问题。

Quirks 模式和 Limited-quirks 模式是 Web 标准制定之前的旧版浏览器模式。这些模式会模拟标准时代之前的布局行为，而这些行为通常会导致意外的视觉效果。

在调试布局问题时，开发者可能会认为问题是由用户编写的 CSS 或 HTML 错误引起的，但实际问题是页面所处的兼容模式。开发者工具会提供有关如何修复此问题的建议。

Chromium 问题：622660

在“效果”面板中添加“计算交集”

开发者工具现在会在火焰图中显示 Compute Intersections。这些更改有助于您识别交叉观察器事件，并调试其潜在的性能开销。

Chromium 问题：1199137

Lighthouse 面板中的 Lighthouse 7.5

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

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

Chromium 问题：772558

已弃用调用堆栈中的“重新启动帧”上下文菜单

重新启动帧选项现已弃用。此功能需要进一步开发才能正常运行，目前存在故障，经常崩溃。

Chromium 问题：1203606

[实验性] 协议监视器

Chrome DevTools 使用 Chrome DevTools Protocol (CDP) 来检测、检查、调试和分析 Chrome 浏览器。借助协议监控器，您可以查看开发者工具发出的所有 CDP 请求和响应。

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

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

Chromium 问题：1204004、1204466

[实验性] Puppeteer 记录器

Puppeteer 记录器现在会根据您与浏览器的互动生成一系列步骤，而之前开发者工具会直接生成 Puppeteer 脚本。新增了导出按钮，可让您将步骤导出为 Puppeteer 脚本。

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

请注意，此功能还处于实验阶段。我们计划随着时间的推移改进和扩展录音机功能。

Chromium 问题：1199787

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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