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

Kayce Basques

模拟视觉缺陷

打开“渲染”标签页，然后使用新的 Emulate vision deficiencies 功能获得更好的效果 了解不同类型的视觉缺陷用户如何使用您的网站。

模拟视力模糊。

模拟视力模糊。

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

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

存在这些色觉缺陷的不太极端版本，事实上它们更常见。 例如，红色弱视是对红光的敏感度降低 代表完全无法感知红光）。不过，这些“-omaly”视觉缺陷 不能明确定义：每个患有此类视力缺陷的人都是不同的，可能会看到不同的东西 （能够感知更多/更少的相关颜色）。

通过在开发者工具中实现更极端的模拟，您的 Web 应用可保证 红色弱视、绿色弱视、蓝色瘤和全色瘤人士也可使用。

请向 Chromium 问题 #1003700 发送反馈，或详细了解实现情况。

模拟语言区域

您现在可以通过在传感器中设置位置来模拟语言区域 >位置信息。打开 Command 菜单，然后输入 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 发送反馈。

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

Sources 面板为断点、条件断点和日志点添加了新图标：

  • 断点 划分点 都用红色圆圈表示
  • 条件断点 条件断点 由半红色半白圆圈表示
  • 日志点 日志点 由带有控制台图标的红色圆圈表示。

使用这些新图标是为了让界面与其他 GUI 调试工具更加一致 （断点颜色通常为红色），以便让您更轻松地区分 概览。

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

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

请查看按房源过滤请求，以发现更多特殊关键字，例如 cookie-path。

从命令菜单停靠到左侧

打开命令菜单并运行 Dock to left 命令，将开发者工具移至 视口

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

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

主菜单中的 Settings 选项已移动

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

“主菜单”打开并点按“更多工具”侧重于“设置”

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

Audits 面板现已更名为 Lighthouse 面板

DevTools 和 Lighthouse 团队经常从 Web 开发者那里收到他们想要的反馈 可以通过开发者工具运行 Lighthouse，但在试用结束后， 找不到“灯塔”因此，Audits 面板现已更名为 Lighthouse 面板。

Lighthouse 面板

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

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

删除所有替换项

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

更新了长任务界面

长任务是一种 JavaScript 代码，它会长时间独占主线程，导致网页 冻结页面。

一段时间以来，您已经能够在“性能”面板中直观了解长时间运行的任务，但在 更新了 Chrome 83 的“性能”面板中的长任务可视化界面。漫长的任务 部分现在显示为红色条纹背景。

新的长任务界面

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

“Manifest”（清单）窗格中的可遮盖图标支持

Android Oreo 引入了自适应图标，可在不同设备之间以各种形状显示应用图标 不同的设备型号可遮罩的图标是一种新的图标格式，支持自适应图标、 这使您能够确保 PWA 图标在支持可遮罩的设备上显示良好 标准图标。

启用清单中新增的仅显示可遮盖式图标的最小安全区域复选框 窗格，检查可遮盖式图标在 Android Oreo 设备上是否显示效果良好。请参阅是我的 当前图标准备好了吗？。

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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