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

模拟视觉缺陷

打开“渲染”标签页,然后使用新的 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.languagenavigator.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 视频发表评论。

开发者工具的新变化

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