DevTools 新功能(Chrome 95)
感谢 韩昌浩 @hanselfmu 提供的翻译。
有兴趣帮忙改进 DevTools 吗?请注册并参与 Google 用户体验调研。
新的 CSS 长度编辑工具
DevTools 添加了一种更简单且灵活的方式来更新 CSS 长度!
在“样式”边栏中,找到任意一个含有长度的 CSS 属性(例如 height
、padding
)。
将鼠标悬停在长度单位上,会出现一条下划线来标明它。点击它即可在弹出的下拉列表中选择新的长度单位。
将鼠标悬停在长度数值上,就会发现您的鼠标指针变成了可横向移动的光标。横向拖拽光标即可加减长度数值。如果想以 10 来调整长度数值,可以在拖拽的同时按下 Shift 键。
您仍然可以通过使用文本的方式来编辑长度数值 -- 只需要在长度数值上点击一下即可直接编辑。
在“问题”标签页隐藏问题
您现在可以在“问题”标签页中隐藏特定的问题,从而只关注您关心的问题。
在“问题”标签页,将鼠标悬停在一个您想要隐藏的问题上。点击更多选项 > 隐藏与此类似的问题。
所有的隐藏问题都会被添加到“已隐藏的问题”窗格下。展开此窗格,您可以取消隐藏所有问题或选中的问题。
Chromium 议题: 1175722
改善属性展示
DevTools 通过以下方式改善了属性的展示:
- 在控制台、“来源”面板和“属性”边栏中,永远加粗并优先排序自有属性。
- 在“属性”边栏中扁平化展示属性。
例如,以下的代码片段创建了一个 URL
对象链接(link
),它包含了两个自有属性:user
和 access
,并更新了一个继承属性 search
的值。
/* example.js */
const link = new URL('https://goo.gle/devtools-blog');
link.user = { id: 1, name: 'Jane Doe' };
link.access = 'admin';
link.search = `?access=${link.access}`;
试着在“控制台”中打出 link
。自有属性现在是加粗并优先排序的。这些改动会让自定义属性更容易被发现,尤其对于有着很多继承属性的 Web APIs(例如 URL
)。
在这些改动之外,“属性”边栏所展示的属性现在也已扁平化,从而提供更好的 DOM 属性调试体验,尤其是对于 Web components。
Lighthouse 面板中的 Lighthouse 8.4
Lighthouse 面板现已运行 Lighthouse 8.4。Lighthouse 现在可以检测到某 Largest Containful Paint (LCP) 元素是否是一个延迟加载的图片,并建议移除该图片的 loading
属性。
更多的更新细节请参见 What’s new in Lighthouse 8.4。
Chromium 议题: 772558
在“来源”面板中排序代码段
“来源”面板下的“代码段”边栏中的代码段现在按照字母顺序排序了。在此之前它并无排序规则。
利用代码段功能来更快运行命令。请观看此视频来获得一个提示!
Chromium 议题: 1243976
阅读 DevTools 新功能的翻译文章和举报翻译错误
您现在可以在新变化标签页里点击阅读其他 6 种语言的 DevTools 新功能 - 俄文, 中文, 西班牙文, 日文, 葡萄牙文 and 韩文.
从 Chrome 94 开始,您可以在 DevTools 中设置您的界面语言。 如果您发现任何翻译问题,请通过 更多选项 > 帮助 > 举报翻译问题 帮助我们改进翻译错误。
Chromium issues: 1246245, 1245481
DevTools 命令菜单的用户交互优化
您是否发现要想在命令菜单中搜索一个文件,这本身就是一件很困难的事情呢?好消息来了,命令菜单的用户交互现在得到了改善!
打开命令菜单,在 Windows 和 Linux 上使用快捷键 Control+P,或在 MacOS 上使用 Command+P 来搜索文件。
命令菜单的用户交互还在持续优化中,请继续关注后续的更新!
Chromium 议题: 1201997
下载 Chrome 预览版本
您可以考虑把 Chrome Canary 版, 开发者版(Dev) 或测试版(Beta) 设置为默认开发浏览器。这些预览版本能让你抢先体验处于 DevTools 开发阶段的新功能、测试最新的网络平台 API ,让您抢先在用户之前发现您网站上的问题!
联系 Chrome DevTools 团队
您可以透过一下渠道讨论这篇文章的新功能和改进,或一切关于 DevTools 的一切。
- 提交建议或意见回馈:crbug.com.
- 报告 DevTools 问题:打开 DevTools,按 更多选项图标 > 帮助 > 报告 DevTools 问题。
- 在推特上,发推文: @ChromeDevTools.
- 在我们的 What's new in DevTools YouTube 视频底下留言。
更多 DevTools 的功能
欲查询完整的 DevTools 已发布的功能,请参考 What's New In DevTools 英文系列。以下是部分已翻译成中文的内容。
Chrome 111
Chrome 110
- [重载时清除性能面板] (/zh/blog/new-in-devtools-110/#perf)
- 记录器更新
- 在记录器中查看并突出显示用户流的代码
- 自定义录音的选择器类型
- 录音时编辑用户流程
- 自动的代码美化器
- 为 Vue、SCSS 等提供更好的语法高亮和内联预览
- 控制台中符合人体工程学且一致的自动完成功能
- 其他的更新
Chrome 109
- Recorder: 为步骤提供新的复制选项,支持页面内重放,步骤支持鼠标右键弹出菜单
- Performance 面板里面的记录显示实际的函数名称
- Console & Sources 面板新增快捷键
- 改善 JavaScript 调试体验
- 其他的更新
- 【实验阶段】优化断点管理界面的 UX
- 【实验阶段】自动格式化
Chrome 108
Chrome 107
- 客制化开发者工具(DevTools)的键盘快捷键
- 使用键盘快捷键对光亮与深色主题进行快速切换
- 高亮记忆检查器里的 C/C++ 对象
- 支持 HAR 导入的完整启动器的资讯
- 点击回车键 (Enter) 后开始 DOM 搜索
- 在
align-content
的 CSS flexbox 属性中显示start
和end
图标 - 其他的更新
Chrome 106
- 在 Sources 面板中按照 Authored / Deployed 对文件进行分组
- 异步操作的链接堆栈痕迹
- 自动忽略已知的第三方脚本
- 在调试过程中改进调用堆栈
- 在来源面板中隐藏被忽略的来源
- 在命令菜单中隐藏被忽略的文件
- 性能面板中的新互动轨道
- 性能洞察面板中的 LCP 时序分解
- 在 Recorder 面板中自动生成录音的默认名称
- 其他的更新
Chrome 105
- 录制面板中的分步重放
- 支持录制面板中的鼠标悬浮事件
- 性能洞察面板中的最大内容绘制(LCP)
- 将闪烁的文本(FOIT、FOUT)识别为布局变化的潜在根本原因
- Manifest 窗格中的协议处理程序
- 元素面板中的顶层徽章
- 在运行时附加 Wasm 调试信息
- 调试时支持实时编辑
- 在样式窗格的规则中查看和编辑@scope
- Source map 改进
- 其他的更新
Chrome 104
- 在调试时进行帧重启
- 录制面板中的慢速重播选项
- 为录制面板创建扩展
- 使用面板中的编写/部署来进行分组
- 性能洞察面板中的新功能 - 用户计时追踪
- 显示元素的分配槽
- 模拟性能录制所需的硬件并发功能
- 在自动填充层叠样式表(CSS)时预览非颜色数值的值
- 识别退后/前进缓存面板中的阻塞帧
- 优化 JavaScript 对象的自动填充建议功能
- 优化 Source maps 功能
- 其他的更新
Chrome 103
- Recorder 面板捕获双击和右击事件
- Lighthouse 面板支持 timespan 和 snapshot 新模式
- 改进 Performance Insights 面板的缩放控制问题
- 对删除性能记录的操作进行确认
- 重新排列 Elements 面板中的窗格
- 支持在浏览器外面选择颜色
- 改进调试期间的 inline 值预览问题
- Virtual authenticators 支持大型 blob
- Sources 面板支持新的键盘快捷键
- Source maps 改进
Chrome 102
- 预览功能:新的 Performance insights 面板
- 新的模拟浅色和深色主题的快捷方式
- 提升网络预览标签页的安全性
- 提升在断点处的重新加载
- 控制台更新
- 在用户流程录制开始时取消
- 在样式边栏中展示继承的高亮伪元素
- 其它亮点
- [实验阶段] 复制 CSS 更改
- [实验阶段] 在浏览器外选择颜色
Chrome 101
Chrome 100
Chrome 99
- WebSocket 请求限速
- 应用面板里面的 报告 API(Reportng API)新边栏
- 支持 Recorder 面板一直处于等待状态,直到元素可见或可点击
- 更好的控制台样式,格式化和过滤
- 使用 source map 文件来调试 Chrome 扩展
- 优化 Sources 面板里面源文件夹树的显示问题
- Sources 面板里面显示 Worker 源文件
- Chrome 自动深色模式的更新
- 颜色选择器和分割面板支持触摸
- 其他的更新
Chrome 98
- 预览功能:整页无障碍功能树
- 在变更标签页中显示更精确的更改
- 为用户操作流的录制设置更长的超时时间
- 使用“往返缓存”选项卡确保您的页面可缓存
- 新的属性边栏过滤器
- 模拟 CSS forced-colors 媒体功能
- 在鼠标指针悬停时显示标尺
- 在 Flexbox 编辑器中支持
row-reverse
和column-reverse
- 新增“重放 XHR“和“扩展所有搜索结果”的键盘快捷键
- Lighthouse 面板中的 Lighthouse 9
- 源代码面板的改善
- 其他的更新
- [实验阶段] 在 Reporting API 窗格中显示端点
Chrome 97
Chrome 96
- 预览特性:新的 CSS 概览面板
- 修复以及改善 CSS 长度编辑与复制的体验
- 模拟 CSS prefers-contrast 媒体特性
- Emulate the Chrome’s Auto Dark Theme feature 模拟 Chrome 的自动深色主题特性
- 将样式窗格里面的 CSS 规则复制为 JavaScript 属性
- 网络面板新增载荷(Payload)边栏
- 优化属性窗格里面的属性展示
- 新增选项,用于隐藏控制台里面的 CORS 错误
- 控制台正确预览以及执行
Intl
对象 - 统一的异步堆栈信息
- 保留控制台侧边栏
- 弃用应用程序面板里面的应用程序缓存窗格
- [实验阶段] 应用程序面板里面新增 Reporting API 窗格
Chrome 95
- 新的 CSS 长度编辑工具
- 在“问题”标签页隐藏问题
- 改善属性展示
- Lighthouse 面板中的 Lighthouse 8.4
- 在“来源”面板中排序代码段
- 阅读 DevTools 新功能的翻译文章和举报翻译错误
- DevTools 命令菜单的用户交互优化
Chrome 94
- 设定您的 DevTools 用户界面语言
- 设备列表新增 Nest Hub 设备
- 帧(Frame)详情页获取 origin trials 信息
- 新的 CSS 容器查询(Container queries)徽章
- 利用新的复选框反转过滤网络请求的条件
- 控制台的边栏即将被弃用
- 在问题选项卡以及网络面板那里显示原生
Set-Cookie
响应头 - 在控制台里显示原生访问器为自己的属性
- 正确输出带有 #sourceURL 行内脚本的错误堆栈信息
- 更改计算样式边栏里面元素的颜色格式
- 使用原生的 HTML 提示框替换自定义提示框
- [实验阶段] 隐藏问题选项卡里面的问题
Chrome 93
- 样式窗格(Styles pane)可编辑 CSS 容器查询(container queries)
- 网络面板可预览 Web bundle
- Attribution Reporting API 调试
- 更好地处理控制台里面的字符串
- 改善 CORS 调试体验
- Lighthouse 8.1
- 在 Manifest 窗格展示新的 note 链接
- 修复 CSS 选择器匹配问题
- 网络面板支持格式化 JSON 响应