此页面由 Cloud Translation API 翻译。

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

Kayce Basques

Cookie 新功能

调试 Cookie 被屏蔽的原因

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

Cookie 标签页。

Cookie 标签页。

黄色的请求 Cookie 不是通过网络发送。默认情况下，它们处于隐藏状态。点击显示过滤掉的请求 Cookie 进行显示。
黄色的响应 Cookie 已通过网络发送，但未存储。
将鼠标悬停在更多信息 上，即可了解 Cookie 为何被屏蔽。
请求 Cookie 和响应 Cookie 表中的大部分数据都来自资源的 HTTP 标头。Domain、Path 和 到期/Max-Age 数据均来自 Chrome 开发者工具协议。

Chromium 问题 #856777、#993843

查看 Cookie 值

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

查看 Cookie 的值。

Chromium 问题 #462370

模拟不同的首选配色方案和偏好减少动作偏好

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

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

Preferreds-color-scheme: 深色

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

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

Chromium 问题 #1004246

时区模拟

现在，借助“传感器”标签页，您不仅可以override geolocation，还可以模拟任意时区并测试其对 Web 应用的影响。可能令人惊讶的是，这项新功能还提高了地理定位模拟的可靠性：以前，Web 应用可以通过将位置信息与用户本地时区进行匹配来检测位置伪造。现在，地理定位和时区模拟相结合，就消除了这种类别的不匹配问题。

代码覆盖率更新

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

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

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

“覆盖率”标签页。

“Sources”面板会显示代码覆盖率数据（若有）。点击行号旁边的红色或蓝色标记会打开“Coverage”标签页并突出显示该文件。

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

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

Chromium 问题 #1003671、#1004185

调试请求网络资源的原因

记录网络活动后，选择一个网络资源，然后前往发起方标签页，以了解请求该资源的原因。请求调用堆栈部分描述了导致网络请求的 JavaScript 调用堆栈。

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

Initiator（发起方）标签页。

Chromium 问题 963183、842488

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

很长时间以来，开发者工具中有一个设置，用于自定义缩进偏好设置，例如 2 个空格、4 个空格、8 个空格或制表符。最近，此设置实际上没用，因为“控制台”和“来源”面板都忽略了此设置。此错误现已修复。

依次转到设置 > 偏好设置 > 来源 > 默认缩进，即可设置偏好设置。

Chromium 问题 #977394

新的光标导航快捷键

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

Chromium 问题 #983874

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

通过 crbug.com 提交建议或反馈。
使用开发者工具中的更多选项 > Help > Report a DevTools issues来报告开发者工具问题。
发推文：@ChromeDevTools。
请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。