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

Jecelyn Yeen

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

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

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

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

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

Recorder 面板是一项预览版功能。我们的团队仍在积极处理，期待收到您的反馈，以便进一步完善。

“Recorder”面板

Chromium 问题：1257499

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

启用设备工具栏后，更多新型设备现已加入设备列表中。选择设备以模拟其尺寸。

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

Chromium 问题：1223525

自动补全以 HTML 形式修改

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

自动补全以 HTML 形式修改

Chromium 问题：1215072

改进了代码调试体验

现在，控制台的输出错误中会包含列号。轻松获取列号对于调试非常重要，尤其是在使用缩减的 JavaScript 时。

输出错误中的列号

Chromium 问题：1073064

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

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

开发者工具同步设置

这项新设置可让您更轻松地跨设备工作。例如，系统会同步以下外观设置，以便您在各种设备上获得一致的体验，并且不需要再次重新定义相同的设置。如需详细了解同步功能，请参阅开发者工具自定义。

外观设置

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

Chromium 问题：1245541

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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