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

Kayce Basques

设备模式下的 Moto G4 支持

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

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

相关功能：

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

Chromium 问题 924693

与 Cookie 相关的更新

“Cookie”窗格中已屏蔽的 Cookie

“应用”面板中的“Cookie”窗格现在会以黄色背景突出显示被屏蔽的 Cookie。

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

Chromium 问题 #1030258

“Cookie”窗格中的 Cookie 优先级

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

Chromium 问题 1026879

修改所有 Cookie 值

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

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

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

Chromium 问题 1029826

更准确的 Web 应用清单图标

以前，“应用”面板中的“清单”窗格会自行发出请求，以显示 Web 应用清单图标。开发者工具现在会显示 Chrome 使用的完全相同的清单图标。

Chromium 问题 985402

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

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

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

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

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

控制台现在会更详细地说明源映射加载或解析失败的原因。之前，它只会提供错误，而不会说明哪里出了问题。

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

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

以下是此功能的 GIF。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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