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

Kayce Basques

Cookie 的新功能

调试 Cookie 被屏蔽的原因

记录网络活动后，选择网络资源，然后导航到更新后的 Cookie 标签页，以了解屏蔽相应资源的请求或响应 Cookie 的原因。请参阅 更改了不使用 SameSite 时的默认行为，以了解为什么您可能会看到更多结果 Chrome 76 及更高版本中屏蔽的 Cookie。

“Cookies”标签页。

Cookie 标签页。

  • 黄色的请求 Cookie 没有通过网络发送。这些内容默认处于隐藏状态。点击显示 过滤的请求 Cookie 中显示它们。
  • 黄色响应 Cookie 通过网络发送，但未存储。
  • 将鼠标悬停在更多信息上 资讯，了解 Cookie 的 已被屏蔽。
  • “请求 Cookie”和“响应 Cookie”表中的大部分数据来自 资源的 HTTP 标头。Domain、Path 和 Expiration/Max-Age 数据均来自 Chrome 开发者工具协议。

Chromium 问题 #856777、#993843

查看 Cookie 值

点击 Cookies 窗格中的某一行即可查看该 Cookie 的值。

查看 Cookie 的值。

查看 Cookie 的值。

Chromium 问题 #462370

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

利用 prefers-color-scheme 媒体查询，即可将网站样式与用户样式相匹配 偏好设置。例如，如果 prefers-color-scheme: dark 媒体查询为 true，则表示： 您的用户将其操作系统设为深色模式，并更喜欢深色模式界面。

打开命令菜单，运行 Show Rendering 命令，然后设置模拟 CSS 媒体 功能 Preferencess-color-scheme 下拉菜单，用于调试 prefers-color-scheme: dark 和 prefers-color-scheme: light 样式。

首选配色方案：深色

设置 prefers-color-scheme: dark 后（中间框），“Styles”窗格（右侧框）会显示 当该媒体查询为 true 且视口显示深色模式样式（左侧框）时应用。

您还可以使用模拟 CSS 媒体功能来模拟 prefers-reduced-motion: reduce 模拟 CSS 媒体功能优先选项旁边的 Preferreds-reduced-motion下拉菜单 下拉菜单。

Chromium 问题 #1004246

时区模拟

现在，“传感器”标签页不仅可以替换地理定位，还可以模拟任意 时区，并测试这对您的 Web 应用的影响。可能令人惊讶的是，这个新功能 地理定位模拟的可靠性：以前，网络应用可以通过 将位置与用户的本地时区进行匹配。现在，地理定位和时区模拟 之后，这种不匹配的情况就会被排除。

代码覆盖率更新

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

“覆盖率”标签页现在使用新的颜色来表示已使用和未使用的代码。这个颜色组合 事实证明，色觉障碍人士更容易理解。左侧的红色条 右边的蓝条表示未使用的代码。

新的覆盖率类型过滤器文本框可让您按类型过滤覆盖率信息： 仅显示 JavaScript 覆盖率、仅显示 CSS 或显示所有类型的覆盖率。

“覆盖率”标签页。

“覆盖率”标签页。

“来源”面板会显示代码覆盖率数据（如果有）。点击红色或蓝色标记 可打开“覆盖率”标签页并突出显示该文件。

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

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

Chromium 问题 #1003671、#1004185

调试请求网络资源的原因

记录网络活动后，选择网络资源，然后找到启动器 以了解请求资源的原因。请求调用堆栈部分介绍了 导致网络请求的 JavaScript 调用堆栈。

“Initiator”（发起者）标签页。

Initiator 标签页。

Chromium 问题 963183、842488

Console 面板和 Sources 面板再次遵循缩进偏好设置

很长时间以来，DevTools 都有一项设置，可以将缩进偏好设置自定义为 2 个空格，4 个空格 空格、8 个空格或制表符。最近，该设置本质上没用 来源面板会忽略此设置。此错误现已修复。

转到设置 >偏好设置 >来源 >默认缩进来设置 偏好设置。

Chromium 问题 #977394

用于光标导航的新快捷键

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

Chromium 问题 #983874

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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