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

模拟视觉缺陷

打开“渲染”标签页并使用新的模拟视觉缺陷功能,更好地了解有不同类型视觉缺陷的用户对您网站的体验。

模拟视力模糊。

模拟视力模糊。

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

  • 红色盲:无法感知任何红光。
  • 绿色盲:无法感知任何绿光。
  • 蓝色盲:无法感知任何蓝光。
  • 全色盲:无法感知除灰色以外的任何颜色(极为罕见)。

这些色觉缺陷的出现不太极端,事实上它们更为常见。例如,红色弱视是指对红光的敏感度降低(与红色盲相反,红色盲则完全无法感知红光)。但是,这些“弱视”视觉缺陷并不明确:具有此类视觉缺陷的每个人都是不同的,并且可能会以不同的方式看待事物(能够感知更多/更少的相关颜色)。

通过在开发者工具中针对更极端的模拟进行设计,可以保证有红色弱视、绿色弱视、蓝色弱视和全色弱视用户也能访问您的 Web 应用。

请向 Chromium 问题 #1003700 发送反馈,或详细了解代码植入

模拟语言区域

您现在可以通过在传感器 > 位置中设置位置来模拟语言区域。打开命令菜单,然后输入 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) 调试

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

现在,Status 列提供了有关请求被屏蔽的原因的快速说明,并提供了一个链接,供您查看该请求的标头以便进一步调试:

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

Headers 标签页的 Response Headers 部分提供了有关如何解决问题的更多指导:

“响应标头”部分中的更多指导

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

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

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

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

之所以采用新图标,是为了让界面与其他 GUI 调试工具(通常将断点颜色设为红色)更加一致,并便于用户一眼就能看出这 3 项功能。

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

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

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

通过命令菜单固定到左侧

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

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

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

主菜单中的 Settings 选项已移动

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

打开“主菜单”,并聚焦于“设置”的“更多工具”

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

Audits 面板现已更名为 Lighthouse 面板

DevTools 和 Lighthouse 团队经常从 Web 开发者那里收到反馈,他们知道可以通过开发者工具运行 Lighthouse,但当他们试用时找不到“Lighthouse”面板,因此审核面板现已更名为 Lighthouse 面板。

Lighthouse 面板

删除文件夹中的所有本地覆盖

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

删除所有替换项

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

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

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

到目前为止,您一直可以在“性能”面板中直观呈现长时间任务,但在 Chrome 83 中,“性能”面板中的长任务可视化界面已更新。任务的长任务部分现在带有红色条纹背景。

新的长任务界面

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

“Manifest”窗格中支持可遮盖图标

Android Oreo 引入了自适应图标,可在不同设备型号上显示各种形状的应用图标。可遮盖图标是一种支持自适应图标的新图标格式,可确保 PWA 图标在支持可遮盖图标标准的设备上正常显示。

Manifest 窗格中启用新的 Show only the minimum safe area for maskable icon 复选框,以检查可遮盖图标在 Android Oreo 设备上是否正常显示。如需了解详情,请参阅我当前的图标是否准备就绪?

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 浏览器 112

Chrome 111

Chrome 浏览器 110

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 已取消

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59