DevTools 新功能(Chrome 97)

Published on Updated on

Translated to: English, Español, Português, 한국어, Pусский, 日本語

感谢 韩昌浩 @hanselfmu 提供的翻译

有兴趣帮忙改进 DevTools 吗?请注册并参与 Google 用户体验调研

预览特性:新的录制器面板

利用新的录制器面板来录制、重放、以及测量用户操作的性能。

打开录制器面板(/docs/devtools/recorder/#open)。请跟随屏幕上的指示来开始一次新的录制。

例如,您可以在这个点咖啡应用上录制一次咖啡购买的过程。在添加一杯咖啡并填写支付信息之后,您可以结束录制,重放这个过程,或点击测量性能按钮来在性能面板中测量用户操作的性能。

如果想通过教程来逐步了解更多内容,请访问录制器面板的文档

录制器面板特性目前还处于预览阶段。我们团队正在积极努力开发该功能。我们期待您的反馈以便于我们做进一步改进。

录制器面板

Chromium 议题: 1257499

设备模式中更新的设备列表

启用设备工具栏之后可以发现,设备列表中添加了更多的现代设备。请选择其中一个设备来模拟该设备的尺寸。

设备模式中更新的设备列表

Chromium 议题: 1223525

修改 HTML 时自动补全

修改 HTML(Edit as HTML)现已支持自动补全和语法高亮。在元素面板中,右键点击一个元素并选择以 HTML 格式修改。试着输入一个 DOM 属性(例如 idaria),自动补全会帮助您找到您想要的属性。

在 HTML 格式修改中自动补全

Chromium 议题: 1215072

改善的代码调试体验

现在在控制台中显示的错误输出也会包含列数。列数的显示使代码调试更加便利,尤其是在调试压缩后的 JavaScript 代码时。

错误输出中的列数

Chromium 议题: 1073064

[实验阶段] 跨设备同步 DevTools 设置

现在当您打开 Chrome 个人设置同步之后,您的 DevTools 设置会默认在多个设备上同步。您可以在设置 > 同步 > 启用设置同步中更改 DevTools 的同步设置。

DevTools 同步设置

这项新设置可以让您在跨设备工作时更轻松。例如,同步以下这些外观设置可以让您在跨设备的过程中享受一致的体验而无需重新进行配置。请在DevTools 个性化中了解更多。

外观设置

这项特性目前在实验中。我们团队正在积极努力开发该功能。如果您有任何反馈,请在这里分享给我们。

Chromium 议题: 1245541

下载 Chrome 预览版本

您可以考虑把 Chrome Canary 版, 开发者版(Dev)测试版(Beta) 设置为默认开发浏览器。这些预览版本能让你抢先体验处于 DevTools 开发阶段的新功能、测试最新的网络平台 API ,让您抢先在用户之前发现您网站上的问题!

联系 Chrome DevTools 团队

您可以透过一下渠道讨论这篇文章的新功能和改进,或一切关于 DevTools 的一切。

  • 提交建议或意见回馈:crbug.com.
  • 报告 DevTools 问题:打开 DevTools,按 更多选项图标   More   > 帮助 > 报告 DevTools 问题
  • 在推特上,发推文: @ChromeDevTools.
  • 在我们的 What's new in DevTools YouTube 视频底下留言。

更多 DevTools 的功能

欲查询完整的 DevTools 已发布的功能,请参考 What's New In DevTools 英文系列。以下是部分已翻译成中文的内容。

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.