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

Jecelyn Yeen

CSS 网格编辑器

这项功能备受期待。现在，您可以使用新的 CSS Grid 编辑器预览和编写 CSS Grid！

CSS 网格编辑器

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

Chromium 问题：1203241

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

除了现有的 let 和 class 重新声明之外，控制台现在还支持重新声明 const 语句。对于使用控制台试验新 JavaScript 代码的 Web 开发者来说，无法重新声明是常见的烦恼。

这样一来，开发者就可以将代码复制并粘贴到开发者工具控制台中，以查看代码的运作方式或进行实验、对代码进行细微更改，并重复此过程，而无需刷新页面。以前，如果代码重新声明了 const 绑定，DevTools 会抛出语法错误。

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

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

const 重新声明

Chromium 问题：1076427

来源顺序查看器

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

来源顺序查看器

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

Chromium 问题：1094406

新增了用于查看帧详情的快捷方式

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

显示帧详情

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

帧详情视图

Chromium 问题：1192084

增强了 CORS 调试支持

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

“问题”标签页中的 CORS 问题

Chromium 问题：1141824

“网络”面板更新

将 XHR 标签重命名为“Fetch/XHR”

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

Fetch/XHR 标签

Chromium 问题：1201398

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

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

按 Wasm 过滤

Chromium 问题：1103638

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

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

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

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

Chromium 问题：1174299

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

DevTools 现在会报告Quirks 模式和受限 Quirks 模式问题。

怪癖模式和有限怪癖模式是网络标准制定之前的旧版浏览器模式。这些模式会模拟标准化之前的布局行为，这类行为通常会导致意外的视觉效果。

在调试布局问题时，开发者可能会认为这些问题是由用户编写的 CSS 或 HTML 错误导致的，但实际问题是网页所处的兼容模式。开发者工具会提供相应建议来帮助您解决此问题。

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

Chromium 问题：622660

在“效果”面板中添加“计算相交部分”

现在，DevTools 会在火焰图中显示计算交叉点。这些更改有助于您识别交叉点观察器事件并调试其潜在的性能开销。

在“效果”面板中计算相交部分

Chromium 问题：1199137

Lighthouse 面板中的 Lighthouse 7.5

Lighthouse 面板现在运行的是 Lighthouse 7.5。现在，对于在 CSS 中定义了 aspect-ratio 的图片，“缺少显式宽度和高度”警告已移除。以前，Lighthouse 会针对未指定宽度和高度的图片显示警告。

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

Chromium 问题：772558

废弃了调用堆栈中的“Restart frame”上下文菜单

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

已废弃的“重启帧”上下文菜单

Chromium 问题：1203606

[实验性] 协议监视器

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

添加了两个新函数，以便于测试 CDP：

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

协议监视器

Chromium 问题：1204004、1204466

[实验性] Puppeteer 录制器

Puppeteer 录制器现在会根据您与浏览器的互动生成一系列步骤，而之前 DevTools 会直接生成 Puppeteer 脚本。新增了导出按钮，以便您将步骤导出为 Puppeteer 脚本。

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

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

Puppeteer Recorder

Chromium 问题：1199787

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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