开发者工具中的新功能 (Chrome 81)

Kayce Basques

设备模式下的 Moto G4 支持

启用设备工具栏后，您现在可以从设备列表中模拟 Moto G4 视口的尺寸。

模拟 Moto G4 视口

点击 Show Device Frame 以显示视口周围的 Moto G4 硬件。

显示 Moto G4 硬件

相关功能：

  • 打开命令菜单，然后运行 Capture screenshot 命令，截取包含 Moto G4 硬件的视口的屏幕截图（启用显示设备框架后）。
  • 节流网络和 CPU，以更准确地模拟移动用户的网络浏览条件。

Chromium 问题 924693

与 Cookie 相关的更新

“Cookie”窗格中的已屏蔽 Cookie

“应用”面板中的“Cookie”窗格现在会将已屏蔽的 Cookie 的背景颜色设为黄色。

“Application”面板的“Cookies”窗格中已屏蔽的 Cookie

另请参阅调试 Cookie 被屏蔽的原因，了解如何从“网络”面板访问类似的界面。

Chromium 问题 1030258

“Cookie”窗格中的 Cookie 优先级

“网络”和“应用”面板中的 Cookie 表格现在包含一个优先级列。

Chromium 问题 1026879

修改所有 Cookie 值

Cookie 表中的所有单元格现在都可以修改，但大小列中的单元格除外，因为该列表示 Cookie 的网络大小（以字节为单位）。如需了解各列的说明，请参阅字段。

修改 Cookie 值

复制为 Node.js 提取内容以包含 Cookie 数据

右键点击网络请求，然后依次选择 Copy > Copy as Node.js fetch，以获取包含 Cookie 数据的 fetch 表达式。

复制为 Node.js 提取内容

Chromium 问题 1029826

更准确的网络应用清单图标

以前，“应用”面板中的“清单”窗格会执行自己的请求，以显示网络应用清单图标。DevTools 现在显示的清单图标与 Chrome 使用的清单图标完全相同。

“清单”窗格中的图标

Chromium 问题 985402

将鼠标悬停在 CSS content 属性上，即可查看未转义的值

将鼠标悬停在 content 属性的值上，即可查看该值的未转义版本。

例如，在此演示中，当您检查 p::after 伪元素时，会在“样式”窗格中看到一个转义字符串：

转义字符串

将光标悬停在 content 值上时，您会看到未转义的值：

未转义的值

控制台中更详细的源代码映射错误

现在，控制台会更详细地说明源代码映射无法加载或解析的原因。之前，它只会提供错误消息，而不会说明问题所在。

控制台中出现来源映射加载错误

用于停用滚动范围超出文件末尾的设置

打开设置，然后依次选择偏好设置 > 来源 > 允许滚动到文件末尾，以停用默认界面行为，该行为允许您在来源面板中滚动到文件末尾。

以下是该功能的 GIF 动图。

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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