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

Kayce Basques

Cookie 的新功能

调试 Cookie 被屏蔽的原因

记录网络活动后，选择一个网络资源，然后前往更新后的Cookie 标签页，了解该资源的请求或响应 Cookie 被屏蔽的原因。请参阅在不使用 SameSite 的情况下对默认行为所做的更改，了解您在 Chrome 76 及更高版本中可能会看到更多被屏蔽的 Cookie 的原因。

“Cookies”标签页。

Cookie 标签页。

  • 未通过线路发送黄色请求 Cookie。这些选项默认处于隐藏状态。点击显示滤除的请求 Cookie 即可显示这些 Cookie。
  • 系统通过网络发送了黄色响应 Cookie，但未将其存储。
  • 将鼠标悬停在更多信息 资讯 上，即可了解 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，则表示用户已将其操作系统设为深色模式，并且更喜欢深色模式界面。

打开命令菜单，运行显示渲染命令，然后设置模拟 CSS 媒体功能 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 覆盖率，或显示所有类型的覆盖率。

“覆盖率”标签页。

“覆盖率”标签页。

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

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

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

Chromium 问题 #1003671、#1004185

调试请求网络资源的原因

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

“发起者”标签页。

发起者标签页。

Chromium 问题 963183、842488

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

长期以来，DevTools 一直提供一个设置，可将缩进偏好设置自定义为 2 个空格、4 个空格、8 个空格或制表符。近期，由于“管理中心”和“来源”面板会忽略此设置，因此该设置实际上没有用处。此 bug 现已修复。

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

Chromium 问题 #977394

新增了光标导航快捷键

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

Chromium 问题 #983874

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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