开发者工具的新变化 (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 代码进行实验的网络开发者来说，无法重新声明是个常见的问题。

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

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

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

常量重复声明

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 网络请求。

提取/XHR 标签

Chromium 问题：1201398

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

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

按 Wasm 过滤

Chromium 问题：1103638

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

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

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

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

Chromium 问题：1174299

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

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

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

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

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

Chromium 问题：622660

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

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

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

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 测试：

  • 利用新的 Save 按钮，您能以 JSON 文件格式下载记录的消息
  • 可让您直接发送原始 CDP 命令的新字段

协议监控

Chromium 问题：1204004、1204466

[实验性] Puppeteer Recorder

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

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

请注意，这只是一个早期实验。我们计划逐步改进和扩展录音机功能。

木偶师记录器

Chromium 问题：1199787

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

  • 请通过 crbug.com 提交建议或反馈。
  • 使用更多选项报告开发者工具问题 展开 >帮助 >在开发者工具中报告开发者工具问题。
  • 请发送电子邮件至 @ChromeDevTools。
  • 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。

开发者工具的新变化

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