此页面由 Cloud Translation API 翻译。

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

Jecelyn Yeen

预览功能：新的“记录器”面板

您可以使用新的 Recorder 面板录制、重放和衡量用户流。

打开 Recorder 面板。按照屏幕上的说明开始新的录音。

例如，您可以使用以下咖啡订购演示应用来记录咖啡结账流程。添加一杯咖啡并填写完付款明细后，您可以结束记录，重放流程，或点击衡量性能按钮，在效果面板中衡量用户流。

转到 Recorder 面板文档，通过分步教程了解详情！

Recorder 面板是一项预览功能。我们团队仍在努力解决这个问题，期待收到您的反馈，希望我们进一步改进。

“记录器”面板

Chromium 问题：1257499

在设备模式下刷新设备列表

启用设备工具栏后，设备列表中新增了一些新型设备。选择一个设备来模拟其尺寸。

在设备模式下刷新设备列表

Chromium 问题：1223525

使用“以 HTML 形式修改”选项自动补全

以 HTML 形式修改界面现在支持自动补全和语法突出显示功能。在元素面板中，右键点击某个元素，然后选择以 HTML 形式修改。请尝试输入 DOM 属性（例如 id、aria），自动补全功能应该可以帮助您找到所需的属性名称。

使用“以 HTML 形式修改”选项自动补全

Chromium 问题：1215072

改进了代码调试体验

现在控制台的输出错误中包含列号。能够轻松访问列编号对调试来说至关重要，尤其是在使用缩减的 JavaScript 时。

输出错误中的列号

Chromium 问题：1073064

[实验性] 在设备之间同步开发者工具设置

现在，当您开启 Chrome 个人资料同步功能时，默认情况下，您的开发者工具设置会在设备间同步。您可以通过依次点击设置 > 同步 > 启用设置同步来更改开发者工具同步设置。

开发者工具同步设置

这项新设置可让您更轻松地跨设备工作。例如，以下外观设置已同步，因此您在各种设备上都能获得一致的体验，而不需要再次重新定义相同的设置。如需详细了解同步功能，请参阅 DevTools 自定义。

外观设置

此功能目前处于实验阶段，相关团队仍在积极开发此功能。如果您有任何反馈，请点击此处与我们分享。

Chromium 问题：1245541

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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