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

Google 用户调研。

模拟视觉缺陷

打开“渲染”标签页，然后使用新的模拟视觉障碍功能，更好地了解有不同类型视觉障碍的用户会如何体验您的网站。

模拟视力模糊。

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

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

这些色觉缺陷还有程度较轻的版本，事实上，这些版本更为常见。 例如，红色弱是指对红光的敏感度降低（与红色盲完全无法感知红光不同）。不过，这些“-omaly”视觉缺陷的定义并不明确：每位有此类视觉缺陷的人都各不相同，他们看到的东西可能也各不相同（能够感知到更多/更少的相关颜色）。

通过在开发者工具中针对更极端的模拟情况进行设计，您可以确保您的 Web 应用也能供患有红色盲、绿色盲、蓝色盲和全色盲的用户使用。

您可以向 Chromium 问题 #1003700 发送反馈，也可以详细了解实现情况。

模拟语言区域

您现在可以通过在传感器 > 位置信息中设置位置信息来模拟语言区域。打开命令菜单，然后输入 Sensors 以访问传感器标签页。执行这些操作后，开发者工具会修改当前默认语言区域，从而影响以下方面：

• 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 发送反馈。

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

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

• 断点（）以红色圆圈表示。
• 条件断点 以半红半白的圆圈表示。
• 日志点 以带有控制台图标的红色圆圈表示。

新图标的目的是使界面与其他 GUI 调试工具（通常将断点着色为红色）更加一致，并使这 3 个功能更容易区分。

向 Chromium 问题 #1041830 发送反馈。

查看设置了特定 Cookie 路径的网络请求

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

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

通过命令菜单停靠到左侧

打开命令菜单，然后运行 Dock to left 命令，将开发者工具移至视口的左侧。

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

主菜单中的 Settings 选项已移至其他位置

现在，您可以在更多工具下找到从主菜单打开设置的选项。

向 Chromium 问题 #1050855 发送反馈。

审核面板现在是 Lighthouse 面板

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

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

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

向 Chromium 问题 #1016501 发送反馈。

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

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

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

向 Chromium 问题 #1054447 发送反馈。

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

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

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次点击 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，报告开发者工具问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

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