手脚发麻是什么原因引起的

百度 标准提高的同时,补贴金额总体下降。

Google 用户调研。

在 Recorder 中逐步重放

现在,您可以在 Recorder 面板中设置断点,并逐步重放用户流。

如需设置断点,请点击相应步骤旁边的蓝点。重放用户流,重放将在执行相应步骤之前暂停。您可以在此处继续重放、执行某一步骤或取消重放。

借助此功能,您可以轻松全面地直观呈现和调试用户流程。

如需了解详情,请参阅录音器功能参考

在 Recorder 中逐步重放

Chromium 问题:1257499

在“Recorder”面板中支持鼠标悬停事件

录制工具现在支持在录制过程中手动添加鼠标悬停步骤。

此演示展示了悬停时的弹出式菜单。尝试录制用户流并点击某个菜单项。

如果您现在重放用户流,系统会因 Recorder 在录制期间不会自动捕获鼠标悬停事件而导致重放失败。如需解决此问题,请手动添加一个步骤,以便在点击菜单项之前将鼠标悬停在选择器上。

支持记录器中的鼠标悬停事件

Chromium 问题:1257499

“性能数据分析”面板中的 Largest Contentful Paint (LCP)

LCP 是一项以用户为中心的重要指标,用于衡量用户感知的加载速度。您现在可以找出 Largest Contentful Paint (LCP) 的关键路径和根本原因。

性能记录中,点击时间轴中的 LCP 徽章。在详细信息窗格中,您可以查看 LCP 得分,了解如何修复会减慢 LCP 速度的资源,以及查看 LCP 资源的关键路径。

请参阅性能洞见,了解如何获取富有实用价值的分析洞见,以及如何使用该面板来提升网站性能。

“性能数据分析”面板中的 LCP

Chromium 问题:1326481

将文字闪烁 (FOIT、FOUT) 识别为布局偏移的潜在根本原因

性能洞见面板现在可以检测到不可见文本闪烁 (FOIT) 和无样式文本闪烁 (FOUT),并将它们视为布局偏移的潜在根本原因。

如需查看布局偏移的潜在根本原因,请点击布局偏移轨道中的屏幕截图。

如需了解防止布局偏移的技术,请参阅优化 Web 字体加载和渲染

“性能数据分析”面板中的 FOUT

Chromium 问题:13346281328873

“清单”窗格中的协议处理程序

您现在可以使用开发者工具测试渐进式 Web 应用 (PWA)网址 协议处理程序注册

通过网址协议处理程序注册,已安装的 PWA 可以处理使用特定协议(例如 magnetweb+example)的链接,从而提供更集成化的体验。

通过应用 > 清单窗格前往协议处理程序部分。您可以在此处查看和测试所有可用的协议。

例如,安装此演示 PWA。在协议处理程序部分中,输入“americano”,然后点击测试协议以在 PWA 中打开咖啡页面。

“清单”窗格中的协议处理程序

Chromium 问题:1300613

“元素”面板中的顶层徽章

使用顶层徽章了解顶层概念,并直观呈现顶层内容的变化。

<dialog> 元素最近在各个浏览器中都已稳定。当您打开对话框时,它会被放置在顶层。顶级内容会渲染在所有其他内容之上。

在此演示中,点击打开对话框

为了帮助直观呈现顶层元素,DevTools 会向 DOM 树添加一个顶层容器 (#top-layer)。它位于结束 </html> 标记之后。

如需从顶层容器元素跳转到顶层树元素,请点击顶层容器中相应元素或其背景旁边的显示按钮。

在顶层树元素(例如对话框元素)旁边,点击 top-layer 徽章,跳转到顶层容器。

“元素”面板中的顶层徽章

Chromium 问题:1313690

在运行时附加 Wasm 调试信息

您现在可以在运行时附加 wasm 的 DWARF 调试信息。以前,“Sources”(来源)面板仅支持将源映射附加到 JavaScript 和 Wasm 文件。

来源面板中打开 Wasm 文件。在编辑器中点击右键,然后选择添加 DWARF 调试信息…,以按需附加调试信息。

ALT_TEXT_HERE

Chromium 问题:1341255

支持在调试期间进行实时编辑

现在,您无需重启调试器即可修改堆栈中最顶层的函数。

在 Chrome 104 中,开发者工具重新引入了重新启动帧功能。不过,您无法修改当前暂停的函数。开发者通常会在函数中设置中断点,然后在暂停时编辑该函数。

在此更新中,调试器会自动重启函数,但存在以下限制:

  • 暂停时只能修改最顶层的函数
  • 堆栈中没有对同一函数的进一步递归调用

调试期间的实时编辑

Chromium 问题:1334484

在“样式”窗格中查看和修改规则中的 @scope

您现在可以在样式窗格中查看和修改 CSS @scope at-rules

@scope at 规则是 CSS 级联和继承级别 6 规范的一部分。这些规则可让开发者在 CSS 中限定样式规则的范围。

打开此演示页面,然后检查 <div class=”dark-theme”> 元素中的超链接。在样式窗格中,查看 @scope at 规则。点击相应规则声明即可进行修改。

标志。

“样式”窗格中的 @scope at 规则

Chromium 问题:1337777

来源映射改进

以下是针对源映射的一些修复,可改善整体调试体验:

  • DevTools 现在可以正确解析带有标点符号的源映射标识符。某些新式缩小器(例如 esbuild)生成的源映射会将标识符与后续标点符号(逗号、圆括号、分号)合并。
  • 开发者工具现在可以解析包含 super 调用的构造函数的源代码映射名称。 ALT_TEXT_HERE
  • 修复了重复规范网址的来源映射网址索引问题。之前,由于存在重复的规范网址,某些文件中的断点未被激活。

Chromium 问题:13353381333411

其他亮点

以下是此版本中的一些值得注意的修复:

  • 在删除本地存储键值对时,正确地从应用 > 本地存储窗格中的表中移除该键值对。(1339280)
  • 现在,在 Sources 面板中查看 CSS 文件时,颜色预览会正确显示。之前,这些位置放置有误。(1340062)
  • 布局窗格中始终显示 CSS 弹性框和网格项,并在元素面板中以徽章形式显示它们。之前,Flex 和网格项在这两个位置都会随机丢失。(13404411273992
  • 如果开发者工具发现导致框架被标记为广告的脚本,则会显示新的创作者广告脚本链接(适用于广告框架)。您可以通过应用 > 打开帧。(1217041)

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

开发者工具的新变化

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