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

Jecelyn Yeen

预览版功能：新的“录音机”面板

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

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

例如，您可以使用此咖啡订购演示应用录制咖啡结账流程。添加咖啡并填写付款详细信息后，您可以结束录制、重放流程，或点击 Measure performance 按钮，在 Performance 面板中衡量用户流。

如需通过分步教程了解详情，请参阅录制器面板文档！

录音机面板是一项预览版功能。我们的团队仍在积极努力，期待您提供反馈，以便我们进一步改进。

“录音机”面板

Chromium 问题：1257499

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

启用设备工具栏后，设备列表中会添加更多新型设备。选择要模拟其尺寸的设备。

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

Chromium 问题：1223525

使用“以 HTML 格式修改”功能自动补全

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

使用“以 HTML 格式修改”功能自动补全

Chromium 问题：1215072

改进了代码调试体验

控制台的输出错误中现在会包含列号。轻松访问列号对于调试至关重要，尤其是对于经过缩减的 JavaScript。

输出错误中的列号

Chromium 问题：1073064

[实验性] 在不同设备间同步 DevTools 设置

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

开发者工具同步设置

借助这项新设置，您可以更轻松地在不同设备上处理工作。例如，系统会同步以下外观设置，以便您在不同设备上获得一致的体验，而无需重新定义相同的设置。如需详细了解同步功能，请参阅开发者工具自定义。

外观设置

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

Chromium 问题：1245541

下载预览渠道

不妨考虑将 Chrome Canary 版、开发者版或 Beta 版用作默认开发浏览器。通过这些预览版渠道，您可以使用最新的 DevTools 功能、测试尖端的 Web 平台 API，并帮助您在用户发现问题之前发现网站上的问题！

与 Chrome DevTools 团队联系

您可以使用以下选项讨论与 DevTools 相关的新功能、更新或任何其他内容。

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。