此页面由 Cloud Translation API 翻译。

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

Sofia Emelianova

“元素”>“样式”中新增了关于自定义属性的部分

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

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

增强型搜索

现在，Search 结果会根据它在一行代码中找到的所有匹配项显示一个条目。以前，每行仅显示第一个匹配项。当您在缩小的文件中搜索时，此新行为特别有用。现在，当您点击某条搜索结果时，系统会在编辑器中打开相应文件，而且现在不仅会在垂直方向上水平和水平滚动匹配项，也会将其滚动到视图中。

执行搜索操作前后的各行会显示所有匹配项。

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

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

Chromium 问题：1468875、1472019。

改进的“Sources”面板

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

Sources 面板中的工作区功能经过了全新简化：

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

通过来源 > 工作区，您可以将在开发者工具中所做的更改直接同步到源文件。

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

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

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

现在，您可以通过拖放操作来对 Sources 面板左侧的窗格重新排序，这与对其他面板、标签页和窗格重新排序类似。

Chromium 问题：1473758。

适用于更多脚本类型的语法突出显示和美观输出

来源面板现在可以：

在以下脚本类型中美观输出的内嵌 JavaScript：module、importmap、speculationrules。
突出显示 importmap 和 speculationrules 脚本类型（二者都包含 JSON）的语法。

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

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

Chromium 问题：1473875。

模拟 Preferreds-reduced-transparency 媒体功能

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

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

Chromium 问题：1424879。

11 号灯塔

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

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

Chromium 问题：772558。

改进了无障碍功能

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

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

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

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

其他亮点

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

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

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

在“性能”面板中直观呈现性能指标
在 DOM 树中突出显示文本节点
将 JS 路径复制到 DOM 节点
“Audits”面板更新，其中包括一项新的审核，用于检测 JS 库以及用于从命令菜单访问“Audits”面板的新关键字
额外提示：使用设备模式检查媒体查询（视频）

Chrome 71

将鼠标悬停在实时表达式结果上，以突出显示 DOM 节点
将 DOM 节点存储为全局变量
HAR 导入和导出中现已提供发起方和优先级信息
从主菜单访问命令菜单
画中画断点
额外提示：使用 monitorEvents() 在控制台中记录节点的已触发事件（视频）