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

Kayce Basques

Device Mode 下的 Moto G4 支持

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

模拟 Moto G4 视口

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

显示 Moto G4 硬件

相关功能：

  • 打开命令菜单并运行 Capture screenshot 命令，以获取命令的屏幕截图 包含 Moto G4 硬件的视口（启用 Show Device Frame 后）。
  • 限制网络流量和 CPU 使用速度，以便更准确地模拟移动设备用户的网页浏览体验 条件。

Chromium 问题 924693

Cookie 相关动态

“Cookies”窗格中已阻止的 Cookie

现在，“Applications”面板中的“Cookies”窗格会将被屏蔽的 Cookie 设置为黄色背景。

“Applications”面板的“Cookies”窗格中被阻止的 Cookie

另请参阅调试 Cookie 被屏蔽的原因，了解如何通过广告联盟访问类似的界面 面板。

Chromium 问题 1030258

“Cookie”窗格中的 Cookie 优先级

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

Chromium 问题 1026879

修改所有 Cookie 值

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

修改 Cookie 值

以 Node.js 提取形式复制，以包含 Cookie 数据

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

以 Node.js 提取形式复制

Chromium 问题 1029826

更准确的 Web 应用清单图标

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

“Manifest”（清单）窗格中的图标

Chromium 问题 985402

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

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

例如，在此demo中，当您检查 p::after 伪元素时，会看到经过转义的 字符串：

转义字符串

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

未转义的值

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

控制台现在可以详细说明源映射无法加载或解析的原因。以前，它只是 提供了错误，但没有解释错误原因。

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

用于禁止滚动浏览文件末尾的设置

打开设置，然后停用偏好设置 >来源 >允许滚动超出末尾 文件，以停用默认界面行为。该行为允许您滚动至 来源面板中查看相关信息。

这里是该功能的 GIF。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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