开发者工具中的新功能 (Chrome 118)

Sofia Emelianova
Sofia Emelianova
GitHub

元素 > 样式中新增了自定义属性部分

元素面板现在支持 @property CSS at-rule。让您可以明确定义 CSS 自定义属性，并在样式表中注册这些属性，而无需运行任何 JavaScript。

如需检查已注册的自定义属性，请在元素 > 样式中，将鼠标悬停在属性名称上，然后在提示中查看其描述符。在提示中，点击链接以在可收起的 @property 部分中查看已注册的属性。

Chromium 问题：1471102、1471103、1471105。

更多本地替换项改进

延续旧版的一系列改进，本地替换现在执行以下操作：

  • 在来源 > 页面中，当您右键点击源代码映射文件并选择 Override content 时，开发者工具会显示另一个对话框，让您转到原始来源。无法替换源代码映射文件的内容。

    用于转到原始代码而非源代码映射文件的对话框。

  • 网络面板将获取一个新的具有替换值列，以及一个相应的 has-overrides:[content|headers|yes|no] 过滤条件。要查看包含替换值列，请右键点击表格标题，然后将其选中。

    在“包含替换项”列中过滤“has-overrides:yes”值。

  • 在来源 > 覆盖中，删除所有覆盖设置菜单选项已替换为采用确切行为的删除选项。

    在将“删除所有覆盖设置”替换为“删除”前后。

之前的删除所有覆盖设置令人感到困惑，因为它仅删除了当前会话中有效的覆盖设置（标有 已保存。 紫点图标）。

新的删除选项会先显示警告消息并提示确认，然后删除您点击的文件夹及其所有内容。

如需恢复上一个选项，请在 设置。 设置 > 实验中选中 复选框。 启用“暂时删除所有覆盖设置”。

Chromium 问题：1472952、1416338、1472580、1473681 1475668。

现在，搜索结果会针对在一行代码中找到的所有匹配项显示一个条目。以前，每行代码仅显示第一个匹配项。当您搜索已缩减的文件时，这一新行为尤其有用。当您点击某条搜索结果时，系统会在编辑器中打开相应文件，现在，匹配视频不仅在垂直和水平方向上滚动进入视图。

执行搜索之前和之后，每行会显示所有匹配项。

此外，Google 搜索的速度也得到了提升。请参阅下一个视频，查看之前（左）和之后（右）的比较。

最后，搜索现在支持忽略列表，并且不会显示来自忽略文件的结果。

Chromium 问题：1468875、1472019。

经过改进的“来源”面板

简化了“Sources”面板中的工作区

新简化了来源面板中的工作区功能：

  • 命名一致。最值得注意的是，Sources > Filesystem 窗格已重命名为 Workspace。此窗格中的各种界面文本现在更清晰，没有多余的内容。
  • 改进了设置功能。查看更方便的拖放文件夹提示，或点击链接选择文件夹。

Sources > Workspace 可让您将自己在开发者工具中所做的更改直接同步到源文件。

查看新的设置和工作流的实际运用：

Chromium 问题：1473771、1473880、1473963、1474686、1474687。

对“来源”中的窗格重新排序

现在，您可以通过拖放操作对“来源”面板左侧的窗格进行重新排序，操作方法与重新排列其他面板、标签页和窗格类似。

Chromium 问题：1473758。

语法突出显示和美观输出，支持更多脚本类型

来源面板现在可以：

  • 在以下脚本类型中美观输出内嵌 JavaScript：module、importmap、speculationrules。
  • 突出显示 importmap 和 speculationrules 脚本类型（两者均存储 JSON）的语法。

对推测规则脚本类型进行美观输出和语法突出显示之前和之后。

要详细了解推测规则，请参阅 在 Chrome 中预渲染页面以实现即时网页导航。

Chromium 问题：1473875。

模拟“首选降低透明度”媒体功能

Chrome 118 现在支持 prefers-reduced-transparency 媒体功能。借助此功能，开发者可以根据用户选择的偏好设置来调整 Web 内容，以降低操作系统的透明度，例如 macOS 上的降低透明度设置。

如需模拟此媒体功能，请打开 Rendering 标签页，然后向下滚动到该标签页。

Chromium 问题：1424879。

灯塔 11 号

Lighthouse 面板现在会运行 Lighthouse 11。最值得注意的是，此版本移除了旧版导航功能，添加了新的无障碍功能审核，并更改了无障碍功能类别的评分方式。

另请参阅更改的完整列表。要了解有关在开发者工具中使用 Lighthouse 面板的基础知识，请参阅 Lighthouse：优化网站速度。

Chromium 问题：772558。

无障碍功能改进

现在，开发者工具支持更多导航按键：

  • CSS 概览：使用向上和向下箭头浏览左侧边栏中的各个部分。
  • 内存：在左侧边栏中，使用 Tab 将焦点移至快照旁边的保存按钮，然后按 Enter 键以选择文件夹。

此外，还修复了几个屏幕阅读器通知问题。

Chromium 问题：1470401、1471301、1474108、1468631。

其他亮点

以下是此版本中一些值得注意的修复和改进：

  • 网络：热门资源类型的新图标：media、wasm、websocket、manifest、fetch/xhr、json (1466298)。
  • 对许多界面元素中的 Material 3 颜色进行了颜色更新，特别是在 Element 和 Performance 面板中（1456690、1472243）中。
  • 问题现在可在导航过程中保留 Cookie 问题 (1466601)。
  • 对应用 > 预加载进行了多项改进，最突出的是可排序的网格，并修改了规则集详细信息 (1410709)。
  • 对协议监控器中的命令编辑器进行了多项改进，最显著的是输入错误时显示警告、修改发送的命令、修改没有预定义键的对象参数、支持由引用未定义的枚举、没有类型引用的对象、按子字符串匹配项过滤命令等 (1448050)。
  • 效果火焰图在饼图上的总方框周围显示边框 (1470147)。
  • 来源现在在 CSS 中将短划线视为字词字符 (1471354)。
  • 现在，自动补全功能始终会在最后对按 CSS 优化的关键字进行排序。
  • 正则表达式过滤条件现在支持空格 (1346936)。
  • 元素：修复了媒体查询功能检测 (1472693)。

下载预览渠道

您可以考虑将 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