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

Kayce Basques

模拟视觉缺陷

打开“呈现”标签页，然后使用新的模拟视觉缺陷功能，更好地了解不同类型的视觉缺陷人士对您网站的体验。

模拟视力模糊。

模拟视力模糊。

开发者工具可以模拟视力模糊和以下几种类型的色觉缺陷：

  • 红色盲：无法感知任何红光。
  • 绿色盲：无法感知任何绿光。
  • 蓝色盲：无法感知任何蓝光。
  • 全色盲：无法感知除不同色度的灰色以外的任何颜色（极其罕见）。

这些色觉缺陷也有不那么极端的版本，事实上，它们更为常见。 例如，红色弱是指对红光的敏感度降低（与红色盲相反，后者是指完全无法感知红光）。不过，这些“异常”视觉缺陷的定义并不明确：每位有此类视觉缺陷的用户都不尽相同，看到事物的方式也可能有所不同（能够感知更多/更少的相关颜色）。

通过在 DevTools 中针对更极端的模拟进行设计，您可以确保您的 Web 应用也能为红色弱视、绿色弱视、蓝色弱视和色盲患者提供访问体验。

请发送反馈至 Chromium 问题 1003700，或详细了解实现方式。

模拟语言区域

现在，您可以依次前往传感器 > 位置信息，设置位置信息，以模拟语言区域。打开命令菜单，然后输入 Sensors 以访问传感器标签页。执行这些操作后，DevTools 会修改当前的默认语言区域，这会影响以下内容：

  • Intl.* API，例如 new Intl.NumberFormat().resolvedOptions().locale
  • 其他支持语言区域的 JavaScript API，例如 String.prototype.localeCompare 和 *.prototype.toLocaleString，例如 123_456..toLocaleString()
  • DOM API，例如 navigator.language 和 navigator.languages
  • Accept-Language HTTP 请求标头

请参阅与语言区域相关的代码示例，亲自试用一下。

请发送反馈至 Chromium 问题 1051822。

跨源嵌入器政策 (COEP) 调试

“网络”面板现在提供跨源嵌入器政策调试信息。

状态列现在会简要说明请求被屏蔽的原因，并提供一个链接，以便您查看相应请求的标头以进行进一步调试：

“状态”列中的已屏蔽请求

标头标签页的响应标头部分提供了有关如何解决问题的更多指导：

如需更多指导，请参阅“响应标头”部分

请发送反馈至 Chromium 问题 #1051466。

新增了断点、条件断点和日志点的图标

Sources 面板中新增了断点、条件断点和日志点的图标：

  • 断点 划分点 以红色圆圈表示。
  • 有条件的断点 条件断点 由半红半白的圆圈表示。
  • Logpoint（日志点）日志点 由带有 Play 管理中心图标的红色圆圈表示。

之所以采用新图标，是为了使界面与其他 GUI 调试工具（通常会将断点显示为红色）保持一致，并让用户更轻松地一目了然地区分这 3 项功能。

请发送反馈至 Chromium 问题 1041830。

在 Network 面板中使用新的 cookie-path 过滤器关键字，以重点关注设置特定Cookie 路径的网络请求。

如需了解 cookie-path 等更多特殊关键字，请参阅按属性过滤请求。

在命令菜单中选择固定到左侧

打开命令菜单，然后运行 Dock to left 命令，将 DevTools 移至视口左侧。

开发者工具停靠在视口左侧

请发送反馈至 Chromium 问题 #1011679。

主菜单中的 Settings 选项已移动

从主菜单打开设置的选项现已移至更多工具下。

打开“主菜单”，其中“更多工具”聚焦于“设置”

请向 Chromium 问题 1050855 发送反馈。

Audits 面板现已更名为 Lighthouse 面板

开发者工具和 Lighthouse 团队经常收到来自 Web 开发者的反馈，他们会听说可以从开发者工具中运行 Lighthouse，但在尝试时却找不到“Lighthouse”面板，因此审核面板现已更名为 Lighthouse 面板。

“Lighthouse”面板

删除文件夹中的所有本地替换项

设置本地替换项后，您现在可以右键点击某个文件夹，然后选择新的删除所有替换项选项，以删除该文件夹中的所有本地替换项。

删除所有替换项

请发送反馈至 Chromium 问题 1016501。

更新了“长时间执行的任务”界面

长任务是指在较长时间内独占主线程的 JavaScript 代码，导致网页冻结。

您已经能够在“性能”面板中直观呈现长任务一段时间了，但在 Chrome 83 中，“性能”面板中的长任务可视化界面已更新。任务的“长任务”部分现在采用红色条纹背景。

新的“长任务”界面

请发送反馈至 Chromium 问题 #1054447。

“清单”窗格中支持可遮罩的图标

Android Oreo 引入了自适应图标，可在不同设备型号上以各种形状显示应用图标。可遮罩的图标是一种支持自适应图标的新图标格式，可让您确保 PWA 图标在支持可遮罩图标标准的设备上看起来不错。

在 Manifest 窗格中启用新的仅显示可遮盖式图标的最小安全区域复选框，以检查您的可遮盖式图标在 Android Oreo 设备上是否看起来不错。如需了解详情，请参阅我当前的图标是否已准备就绪？。

“仅显示可遮盖式图标的最小安全区域”复选框

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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