web新技术双周报(9.30-10.14)

chrome(105)

点击步骤侧边的蓝点以设置断点，然后重放您的用户流程。该重放动作将在执行该步骤前暂停。从这里，您可以选择继续重放、执行下一个步骤或取消重放。借助此功能，您可以完全控制用户流程的重播，令调试更方便。

Recorder不会自动捕获hover事件，因为这会污染记录并且并非所有此类事件都有用。但是，下拉菜单等 UI 元素只能出现在hover中，因此您可以手动将hover步骤添加到依赖于此类元素的用户流程中。

3. Element面板中的顶层徽章

当你打开一个

对话框时，它会被放入一个 top layer。顶层内容呈现在所有其他内容之上。

在此dialog演示中，单击 Open dialog。为了帮助可视化顶层元素，DevTools 将顶层容器（#top-layer）添加到 DOM 树中，它位于结束标记之后。要从顶层容器元素跳转到顶层树元素，请单击顶层容器中元素旁边的 reveal 按钮或其背景。

您现在可以使用 DevTools 测试渐进式网络应用 (PWA) 的 URL 协议处理程序注册。URL 协议处理程序注册允许已安装的 PWA 处理使用特定协议的链接（例如 magnet、web+example）以获得更集成的体验。

通过 Application > Manifest 窗格导航到 Protocol Handlers 部分。您可以在此处查看和测试所有可用的协议。

例如，安装protocol-handler.glitch.me/。在 Protocol Handlers 部分，输入“americano”并单击 Test protocol 以打开 PWA 中的咖啡页面。

5. 在样式窗格的规则中查看和编辑@scope

元素中的超链接。在 Styles 窗格中，查看 @scope规则。单击规则声明进行编辑。

注：CSS @scope目前正在开发中。要测试此功能，请通过 chrome://flags/#enable-experimental-web-platform-features启用 Experimental Web Platform features 标志。

@scope介绍：CSS @scope

其他资讯：

以太坊区块高度已达到预定合并高度 15537393，以太坊合并正式完成，这是以太坊 2.0 升级过程中的重要步骤之一，标志着以太坊工作证明的淘汰以及向权益证明的完全过渡，合并后以太坊的能源消耗减少约 99.95%。以太坊主网达到预定高度，合并升级正式完成_语言 & 开发_ANDREW R. CHOW_InfoQ精选文章
谷歌Flutter3.3版本，新添加的渲染引擎 Impeller 只限于预览并且只适用于 iOS。谷歌还推出了一个新的展示应用 Wonderous，它用 Flutter 3.3 开发，并使用了新渲染引擎 Impeller。

3. 将迎来重大变革，更好地兼容 Node 和 npm 包

4. 在本文中，Juan Diego 介绍了使用频次较少但极其有用的 API，例如 Page Visibility API、Web Sharing API、Broadcast Channel API 和 Internationalization APIJavaScript APIs You Don’t Know About — Smashing Magazine

6. TC39 会议提议的更新：ECMAScript 的提取器Extractors、JavaScript 的 Array.fromAsync

7. WebTransport ，提供低延迟、双向、客户端-服务器消息传递

8. CSS混合模式介绍