开发者工具的新变化 (Chrome 79)

Kayce Basques
Kayce Basques
X GitHub

Google 用户调研。

Cookie 的新功能

调试 Cookie 被屏蔽的原因

记录网络活动后，选择某个网络资源，然后前往更新后的 Cookies 标签页，了解相应资源的要求或响应 Cookie 被屏蔽的原因。请参阅不含 SameSite 的默认行为变更，了解为什么您可能会在 Chrome 76 及更高版本中看到更多被阻止的 Cookie。

“Cookie”标签页。

Cookie 标签页。

  • 黄色 Request Cookies 未通过网络发送。这些列默认处于隐藏状态。点击显示滤除的请求 Cookie 即可显示这些 Cookie。
  • 黄色 Response Cookies 已通过网络发送，但未存储。
  • 将光标悬停在更多信息图标 信息 上，即可了解 Cookie 被屏蔽的原因。
  • 请求 Cookie 和响应 Cookie 表格中的大多数数据都来自资源的 HTTP 标头。网域、路径和 Expires/Max-Age 数据来自 Chrome DevTools Protocol。

Chromium 问题 #856777、#993843

查看 Cookie 值

点击“Cookie”窗格中的某一行，即可查看相应 Cookie 的值。

查看 Cookie 的值。

查看 Cookie 的值。

Chromium 问题 #462370

模拟不同的 prefers-color-scheme 和 prefers-reduced-motion 偏好设置

借助 prefers-color-scheme 媒体查询，您可以让网站的样式与用户的偏好相符。例如，如果 prefers-color-scheme: dark 媒体查询为 true，则表示用户已将操作系统设置为深色模式，并且偏好深色模式界面。

打开命令菜单，运行 Show Rendering 命令，然后将 Emulate CSS media feature prefers-color-scheme 下拉菜单设置为调试 prefers-color-scheme: dark 和 prefers-color-scheme: light 样式。

prefers-color-scheme: dark

如果设置了 prefers-color-scheme: dark（中间框），则“样式”窗格（右侧框）会显示当相应媒体查询为 true 时应用的 CSS，而视口会显示深色模式样式（左侧框）。

您还可以使用 Emulate CSS media feature prefers-color-scheme 下拉菜单旁边的 Emulate CSS media feature prefers-reduced-motion 下拉菜单来模拟 prefers-reduced-motion: reduce。

Chromium 问题 #1004246

时区模拟

借助“传感器”标签页，您现在不仅可以替换地理位置信息，还可以模拟任意时区并测试对 Web 应用的影响。或许令人惊讶的是，这项新功能还提高了地理定位模拟的可靠性：以前，Web 应用可以通过将位置信息与用户的本地时区进行匹配来检测位置欺骗。现在，地理定位和时区模拟已耦合，因此消除了此类不匹配情况。

代码覆盖率更新

“覆盖率”标签页可帮助您查找未使用的 JavaScript 和 CSS。

“覆盖率”标签页现在使用新颜色来表示已用和未用代码。事实证明，这种颜色组合更适合有色觉障碍的用户。左侧的红色条表示未使用的代码，右侧的蓝色条表示已使用的代码。

借助新的覆盖率类型过滤条件文本框，您可以按类型过滤覆盖率信息：仅显示 JavaScript 覆盖率、仅显示 CSS 覆盖率，或显示所有类型的覆盖率。

“覆盖面”标签页。

“覆盖面”标签页。

“来源”面板会在代码覆盖率数据可用时显示该数据。点击行号旁边的红色或蓝绿色标记会打开“覆盖率”标签页并突出显示相应文件。

“来源”面板中的覆盖率数据。

“来源”面板中的覆盖率数据。第 8 行是未使用代码的示例。第 11 行是已使用代码的示例。

Chromium 问题 #1003671、#1004185

调试网络资源请求的原因

记录网络活动后，选择一个网络资源，然后前往启动器标签页，了解请求该资源的原因。请求调用堆栈部分介绍了导致网络请求的 JavaScript 调用堆栈。

“启动器”标签页。

发起者标签页。

Chromium 问题 963183、842488

控制台和“来源”面板再次遵循缩进偏好设置

长期以来，开发者工具一直提供一项设置，可让您自定义缩进偏好设置，以使用 2 个空格、4 个空格、8 个空格或制表符。最近，此设置基本上毫无用处，因为控制台和“来源”面板会忽略此设置。此 bug 现已修复。

依次前往设置 > 偏好设置 > 来源 > 默认缩进，设置您的偏好设置。

Chromium 问题 #977394

用于光标导航的新快捷键

在“控制台”或“来源”面板中按 Control+P，将光标移至上一行。按 Control+N 可将光标移至下一行。

Chromium 问题 #983874

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

开发者工具的新变化

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