DevTools 中的新功能 (Chrome 114) | What‘s New in DevTools (Chrome 114)

admin管理员组

文章数量:1534201

目录

WebAssembly 调试支持

#改进了 Wasm 应用程序中的步进行为

#使用元素面板和问题选项卡调试自动填充

#记录器中的断言

#灯塔 10.1.1

#性能增强

#performance.mark()在 Performance > Timings 中显示悬停时间

#profile()命令填充 Performance > Main

#用户交互缓慢的警告

#JavaScript Profiler 弃用：第三阶段

#杂项亮点

#下载预览频道

#与 Chrome DevTools 团队取得联系

#DevTools 中的新功能

 What's New in DevTools (Chrome 114)

#WebAssembly debugging support

#Improved stepping behavior in Wasm apps

#Debug Autofill using the Elements panel and Issues tab

#Assertions in Recorder

#Lighthouse 10.1.1

#Performance enhancements

#performance.mark() shows timing on hover in Performance > Timings

#profile() command populates Performance > Main

#Warning for slow user interactions

#JavaScript Profiler deprecation: Phase three

#Miscellaneous highlights

#Download the preview channels

#Getting in touch with the Chrome DevTools team

#What's New in DevTools

---

WebAssembly 调试支持

DevTools 启用

 Settings > Experiments >  WebAssembly Debugging：默认启用 DWARF 支持。有关更多信息，请参阅使用现代工具调试 WebAssembly。

此实验允许您在 Wasm 应用程序中暂停执行和调试 C 和 C++ 代码，并提供所有可用的调试信息：

• 您的原始源代码，使用DWARF调试信息映射。
• 调用堆栈中可理解的函数名称。
• 断点支持等等。

要测试 Wasm 调试，请安装C/C++ DevTools Support (DWARF) 扩展并逐步执行Mandelbrot 演示中的代码。

Chromium 问题：1414289。

#改进了 Wasm 应用程序中的步进行为

 跨过您的原始代码现在避免在反汇编 (.wasm文件 ) 中暂停。以前，它会停在那里。

然而，单步执行在它到达它开始的函数之外时结束，例如，从函数返回之后。

 默认情况下，此行为在Settings > Preferences > Sources中启用。

Chromium 问题：1418938。

#使用元素面板和问题选项卡调试自动填充

Chrome 自动填充功能会使用保存的信息（例如您的地址或付款信息）自动填写表单。为了让您轻松调试与自动填充相关的问题，“元素”面板现在可以使用红色卷曲下划线突出显示它们。

要检查此功能，请启用 设置>实验> 在元素面板 DOM 树中突出显示违规节点或属性并检查此演示页面。

将鼠标悬停在 DOM 树中突出显示的问题上，然后单击“查看问题”以打开“问题”选项卡，其中列出了所有检测到的问题并提供了出错的线索。

Chromium 问题：1399414。

#记录器中的断言

记录器面板现在允许您在记录期间添加断言，并提供所有可用的运行时数据。

要添加断言，开始新的记录，与您的页面交互，然后单击添加断言。Recorder插入一个步骤，您可以即时自定义waitForElement类型。观看视频，了解咖啡车演示中的断言。

该视频向您展示了如何断言：

• HTML 属性，例如元素的class.
• JSON 中的 JavaScript 属性，例如，.innerText.

您还可以配置断言步骤，例如 JavaScript 中的条件语句、节点的子节点数 ( count)、元素可见性等。有关详细信息，请参阅配置步骤。

此外，Recorder现在会在并排代码视图和右键单击步骤菜单中记住您首选的脚本格式。

Chromium 问题：1423624。

#灯塔 10.1.1

Lighthouse面板现在运行 Lighthouse 10.1.1，在10.1.0中引入了一个显着的变化。所有处理 URL 的审计现在都按实体分组并汇总数字统计信息，例如大小或持续时间。流行的第三方也标有他们的类别，因此更容易在页面上识别他们的目的。

要了解在 DevTools 中使用Lighthouse面板的基础知识，请参阅Lighthouse：优化网站速度。

Chromium 问题：772558。

#性能增强

#performance.mark()在 Performance > Timings 中显示悬停时间

performance.mark () 方法现在会在您将鼠标悬停在Performance > Timings中的相应标记上时显示其计时。这里的时间是相对于上一个导航事件的时间戳。

Chromium 问题：1426762。

#profile()命令填充 Performance > Main

控制台中的和 命令现在profile()在profileEnd()性能面板的主线程中启动和停止 CPU 分析。

Chromium 问题：1429191。

#用户交互缓慢的警告

超过 200 毫秒的用户交互会在Performance > Summary选项卡中收到Interaction to Next Paint (INP)警告。

此外，交互的 ID 已从工具提示移至Summary。

Chromium问题：1432512、1432509。

#JavaScript Profiler 弃用：第三阶段

早在Chrome 58时，DevTools 团队就计划最终弃用JavaScript Profiler，并让 Node.js 和 Deno 开发人员使用性能面板来分析 JavaScript CPU 性能。

DevTools 版本 114 开始了四阶段JavaScript Profiler弃用的第三阶段。在此阶段，JavaScript Profiler面板已从 DevTools 中删除，但您仍然可以通过“设置” > “实验”暂时启用它，并从三点菜单中将其打开。 

要分析 CPU 性能，请使用性能面板。

Chromium 问题：1428026。

#杂项亮点

这些是此版本中一些值得注意的修复：

• 拾色器现在可以检测裁剪时超出色域的 HWB 值( 1429271 )。
• 来源面板：
  • 为源映射启用 JSON 语法突出显示 ( 1385374 )。
  • 手动禁用源映射时停止显示“检测到源映射”消息( 1423718 )。
• 控制台现在允许您使用+评估不完整的 JavaScript 表达式并输出语法错误 ( 1314700 )。CtrlEnter
• 断点编辑对话框现在有一个关闭按钮。以前，您必须按下Enter或取消聚焦对话框 ( 1412980 )。

#下载预览频道

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

#与 Chrome DevTools 团队取得联系

使用以下选项讨论帖子中的新功能和更改，或与 DevTools 相关的任何其他内容。

• 通过crbug向我们提交建议或反馈。
• 使用 DevTools 中的更多选项      >帮助>报告 DevTools 问题报告 DevTools 问题。
• 在@ChromeDevTools发推文。
• 在我们的 DevTools YouTube 视频或 DevTools Tips YouTube 视频中发表评论。

#DevTools 中的新功能

DevTools 中的新增功能系列中涵盖的所有内容的列表。

 

 What's New in DevTools (Chrome 114)

https://developer.chrome/blog/new-in-devtools-114/#whats-new

Published on Friday, May 5, 2023

Sofia Emelianova

Technical Writer, Google Chrome

GitHub

Jecelyn Yeen

Developer advocate working on Chrome DevTools at Google.

WebsiteTwitterGitHub

Interested in helping improve DevTools? Sign up to participate in Google User Research here.

There is no 'What's new in DevTools' video for this release, but you can watch this quick recap of the recent features.

#WebAssembly debugging support

DevTools enables  Settings > Experiments >  WebAssembly Debugging: Enable DWARF support by default. For more information, see Debugging WebAssembly with modern tools.

This experiment lets you pause execution and debug C and C++ code in Wasm apps, with all the debugging information available to you:

• Your original source code, mapped using DWARF debugging information.
• Understandable function names in call stack.
• Breakpoints support, and more.

To test Wasm debugging, install the C/C++ DevTools Support (DWARF) extension and step through the code in the Mandelbrot demo.

Chromium issue: 1414289.

#Improved stepping behavior in Wasm apps

 Step over in your original code now avoids pausing in disassembly (.wasm file). Previously, it would pause there.

However, stepping ends when it lands outside of the function it started in, for example, after returning from the function.

This behavior is enabled by default in  Settings > Preferences > Sources.

Chromium issue: 1418938.

#Debug Autofill using the Elements panel and Issues tab

Chrome Autofill fills in forms automatically with saved information, like your addresses or payment information. To let you easily debug Autofill-related issues, the Elements panel can now highlight them with red curly underlines.

To check out this feature, enable  Settings > Experiments >  Highlights a violating node or attribute in the Elements panel DOM tree and inspect this demo page.

Hover over a highlighted issue in the DOM tree and click View issue to open the Issues tab that lists all detected issues and provides clues on what went wrong.

Chromium issue: 1399414.

#Assertions in Recorder

The Recorder panel now lets you add assertions right during recording, with all the runtime data available to you.

To add an assertion, start a new recording, interact with your page, and click Add assertion. The Recorder inserts a step with the waitForElement type that you can customize on the fly. Watch the video to see assertions in action on the coffee cart demo.

This video shows you how to assert:

• HTML attributes, for example, an element's class.
• JavaScript properties in JSON, for example, .innerText.

You can also configure steps to assert, for example, conditional statements in JavaScript, number of node's children (count), element visibility, and more. For more information, see Configure steps.

Additionally, the Recorder now remembers your preferred script format in the side-by-side code view and right-click step menu.

Chromium issue: 1423624.

#Lighthouse 10.1.1

The Lighthouse panel now runs Lighthouse 10.1.1, with a notable change introduced in 10.1.0. All audits that deal with URLs are now grouped by entity and aggregate numerical statistics such as size or duration. Popular third parties are also tagged with their category so it's easier to identify their purpose on the page.

To learn the basics of using the Lighthouse panel in DevTools, see Lighthouse: Optimize website speed.

Chromium issue: 772558.

#Performance enhancements

#performance.mark() shows timing on hover in Performance > Timings

The performance.mark() method now shows its timing when you hover over the corresponding mark in Performance > Timings. The timing here is a timestamp relative to the previous navigation event.

Chromium issue: 1426762.

#profile() command populates Performance > Main

The profile() and profileEnd() commands in the Console now start and stop CPU profiling in the Main thread of the Performance panel.

Chromium issue: 1429191.

#Warning for slow user interactions

User interactions longer than 200 milliseconds get an Interaction to Next Paint (INP) warning in the Performance > Summary tab.

Additionally, the ID of the interaction has been moved from the tooltip to Summary.

Chromium issues: 1432512, 1432509.

#JavaScript Profiler deprecation: Phase three

As early as Chrome 58, the DevTools team planned to eventually deprecate the JavaScript Profiler and have Node.js and Deno developers use the Performance panel for profiling JavaScript CPU performance.

DevTools version 114 starts phase three of the four-phase JavaScript Profiler deprecation. During this phase, the JavaScript Profiler panel is removed from DevTools but you can still temporarily enable it via  Settings > Experiments and open it from the  three-dot menu.

To profile CPU performance, use the Performance panel.

Chromium issue: 1428026.

#Miscellaneous highlights

These are some noteworthy fixes in this release:

• The Color Picker now detects HWB values that are out of gamut when clipped (1429271).
• The Sources panel:
  • Enabled JSON syntax highlighting for source maps (1385374).
  • Stopped showing "Source map detected" messages when you manually disable source maps (1423718).
• The Console now lets you evaluate incomplete JavaScript expressions with Ctrl + Enter and outputs syntax errors (1314700).
• The Breakpoint editing dialog now has a close button. Previously, you had to press Enter or unfocus the dialog (1412980).

#Download the preview channels

Consider using the Chrome Canary, Dev or Beta as your default development browser. These preview channels give you access to the latest DevTools features, test cutting-edge web platform APIs, and find issues on your site before your users do!

#Getting in touch with the Chrome DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

• Submit a suggestion or feedback to us via crbug.
• Report a DevTools issue using the More options   
     > Help > Report a DevTools issues in DevTools.
• Tweet at @ChromeDevTools.
• Leave comments on our What's new in DevTools YouTube videos or DevTools Tips YouTube videos.

#What's New in DevTools

A list of everything that has been covered in the What's New In DevTools series.

本文标签： 新功能devtoolschrome