投稿

一毫秒等于多少秒用科学计数法表示（一毫秒等于多少秒1005无标题）

用户投稿 • • 网络资讯 • 阅读 1342

前言

Chrome一直在努力。今日前端早读课文章由@阮贝琪@jecelynyeen、韩昌浩@hanselfmu翻译分享。

正文从这开始~~

预览功能：整页无障碍功能树

新的整页无障碍功能树让您更轻松地概览您整个网页的无障碍功能树结构，并帮助您了解您网页内容在辅助技术（例如：屏幕阅读器）下的展示。

在元素面板中，打开无障碍功能边栏并选中启用整页模式的无障碍功能树复选框。然后，重新加载 DevTools，您将在元素面板中看到一个新的无障碍功能树按钮。

单击该按钮以切换到无障碍功能树视图。您可以展开元素节点或单击元素，从而在无障碍功能边栏中查看详细信息。

此前，无障碍功能边栏中的无障碍功能树只能提供局部的视图，它只能让您探索单个元素节点及其祖先元素。

我们的团队仍在积极开发这项预览功能。期待您的反馈以帮助我们进一步改进！

Chrome 98 DevTools 新功能

在变更标签页中显示更精确的更改

现在，变更标签页中的代码变更会被自动美观输出（pretty-print）。

此前，开发者们很难在变更标签页中跟踪压缩（minified）代码的实际变化，因为所有代码都挤在一行。

Chrome 98 DevTools 新功能

为用户操作流的录制设置更长的超时时间

您现在可以在录制器中为所有步骤或特定步骤调整超时设置。这对于网络请求缓慢且动画冗长的页面尤其有用。

例如，我在这个演示页上录制用户加载并点击菜单项的操作。但是，菜单项的加载速度很慢（需要6秒）。这次用户操作的重放会因此失败，因为它超过了默认的5秒超时。

我们可以使用新的超时设置来解决这个问题。展开我们点击菜单项的步骤。编辑步骤以添加超时，并将其设置为6000毫秒（等于6秒）。

另外，您可以在重放设置中为所有步骤调整超时。展开重放设置并编辑超时数值。

Chrome 98 DevTools 新功能

使用“往返缓存”选项卡确保您的页面可缓存

往返缓存（或 bfcache） 是一种浏览器优化，可提供即时的后退和前进导航。

新的往返缓存标签页可以帮助您测试您的页面，以确保它们针对 bfcache 进行了优化，并指出任何可能阻止它们符合 bfcache 条件的问题。

要测试某一页面，请在 Chrome 中导航到该页面，然后在 DevTools 中进入应用 > 往返缓存。接下来，单击测试往返缓存按钮，DevTools 将尝试导航离开当前页面并返回，以确定该页面是否可以从 bfcache 中恢复。

作为 Web 开发人员，了解如何在所有浏览器中针对 bfcache 进行页面优化至关重要，因为它将显著改善用户的浏览体验——尤其是那些网络或设备较慢的用户。

Chrome 98 DevTools 新功能

新的属性边栏过滤器

如果您想持续关注属性边栏中的某一个特定属性，您现在可以在新的过滤文本框中输入该属性的名字或值。

默认情况下，属性值为 null 或 undefined 的属性是被隐藏的。启用全部显示复选框可以查看所有的属性。

这些改进使您可以更快地看到您关注的属性，从而提高您的效率！

Chrome 98 DevTools 新功能

模拟 CSS forced-colors 媒体功能

forced-colors CSS 媒体功能用于检测用户代理是否启用了强制颜色（forced-colors）模式（例如 Windows 高对比度模式），这种模式会基于用户选择的颜色来展示页面。

打开命令菜单，运行显示“渲染”工具命令，然后设置模拟 CSS 媒体功能 force-colors 下拉菜单。

Chrome 98 DevTools 新功能

在鼠标指针悬停时显示标尺

您现在可以打开命令菜单并运行在鼠标指针悬停时显示标尺的命令。页面标尺可以让您更轻松地测量一个元素的宽度和高度。

以前，您只能通过设置 > 显示标尺复选框启用页面标尺。

Chrome 98 DevTools 新功能

在 Flexbox 编辑器中支持 row-reverse 和 column-reverse

Flexbox 编辑器添加了两个新按钮以支持 flex-direction 中的 row-reverse 和 column-reverse。

Chrome 98 DevTools 新功能

新增“重放 XHR “和“扩展所有搜索结果”的键盘快捷键

在网络面板中“重放 XHR ”的键盘快捷键

在网络面板中选择一个 XHR 请求，然后按键盘上的 R 以重放 XHR。之前，您只能通过上下文菜单重放 XHR（右键单击 > 重放 XHR）

Chrome 98 DevTools 新功能

用于展开所有搜索结果的键盘快捷键

搜索选项卡中添加了一个新的键盘快捷键，允许您展开和折叠所有搜索结果。之前，您只能通过一次单击一个文件来展开和折叠搜索结果。

通过 Esc > 3点妆 菜单 > 搜索打开搜索选项卡。输入搜索字符串（例如函数）并按 Enter 以查看搜索结果列表。关注搜索结果并使用以下快捷方式展开/折叠搜索文件：

  • Windows / Linux – Ctrl + Shift + { or }
  • MacOS – Cmd + Options + { or }

前往 keyboard shortcuts 文档以参考 Chrome DevTools 中的键盘快捷键。

，时长00:02

Lighthouse 面板中的 Lighthouse 9

Lighthouse 面板现在已运行 Lighthouse 9。Lighthouse 现在将列出所有共享相同 id 的元素。

重叠元素 id 是一个常见的无障碍（accessibility）问题。例如，aria-labelledby 属性中的 id 用于多个元素。

Chrome 98 DevTools 新功能

源代码面板的改善

DevTools 升级使用 CodeMirror 6。此升级为源代码面板带来了大量的稳定性改进。以下是其中一些显着的改进：

  • 打开大文件（例如 WASM、JavaScript）时速度显着加快
  • 单步执行代码时不再随机滚动
  • 改进了源码的自动完成建议（例如代码段、local override）

在 Reporting API 窗格中显示端点

要启用实验，请在设置 > 实验下勾选带有在应用面板里面启用 Reporting API 边栏字样的复选框选项。

我们在 Chrome 96 引入了实验阶段的 Reporting API 窗格，以帮助您监控网页的 Reporting API 报告以及状态。

这次我们加入了端点部分。它为您提供了在 Reporting-Endpoints 标头中配置的所有端点的概述。

浏览 Reporting API 文档，以学习如何使用 Reporting API 来监控违规网页，过时的API调用以及更多。

Chrome 98 DevTools 新功能

关于本文
作者：@Jecelyn Yeen
原文：
https://developer.chrome.com/en/blog/new-in-devtools-98/
译者：@阮贝琪 @jecelynyeen、韩昌浩 @hanselfmu
译文：
https://developer.chrome.com/zh/blog/new-in-devtools-98/

本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 sumchina520@foxmail.com 举报，一经查实，本站将立刻删除。
如若转载，请注明出处：https://www.sumedu.com/faq/13955.html
赞 (0)
用户投稿
0 0
上一篇 2022年3月30日 23:56
下一篇 2022年3月31日 00:36

相关推荐