开发者工具的新变化 (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 语句的重新声明。对于使用控制台试验新 JavaScript 代码的 Web 开发者来说，无法重新声明是一个常见的烦恼。

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

请参阅以下示例。在不同的 REPL 脚本中支持 const 重新声明（请参阅变量 a）。请注意，按照设计，以下场景不受支持：

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

const 重新声明

Chromium 问题：1076427

源代码顺序查看器

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

源代码顺序查看器

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

Chromium 问题：1094406

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

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

显示框架详情

这会带您前往“Application”（应用）面板中的 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

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

现在，网络状况标签页下用户代理字段中的设备会应用用户代理客户端提示。

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

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

Chromium 问题：1174299

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

开发者工具现在会报告 Quirks 模式和有限 Quirks 模式问题。

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

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

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

Chromium 问题：622660

在“性能”面板中添加“计算相交部分”

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

“性能”面板中的“计算相交部分”

Chromium 问题：1199137

Lighthouse 面板中的 Lighthouse 7.5

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

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

Chromium 问题：772558

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

重启帧选项现已废弃。此功能需要进一步开发才能正常运行，目前无法正常运行，并且经常崩溃。

已弃用的“Restart frame”上下文菜单

Chromium 问题：1203606

[实验性] 协议监控器

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

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

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

协议监控器

Chromium 问题：1204004、1204466

[实验性] Puppeteer 录制器

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

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

请注意，这是一项处于早期阶段的实验。我们计划逐步改进和扩展录音机功能。

Puppeteer Recorder

Chromium 问题：1199787

下载预览渠道

考虑将 Chrome Canary、开发者版或 Beta 版用作默认开发浏览器。通过这些预览渠道，您可以抢先体验最新的开发者工具功能、测试前沿的 Web 平台 API，并在用户发现问题之前及时发现网站上的问题！

与 Chrome 开发者工具团队联系

您可以通过以下方式讨论新功能、更新或与开发者工具有关的任何其他内容。

开发者工具的新变化

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