Chrome 117：Web 开发调试技巧

Chrome 117

注意：稳定版近期发布，截止文章编写日暂未收到 117 稳定版推送。

Chrome 117^[1] 带来了许多利于开发者的重大更新，主要有以下方面：

• 网络内容覆盖：可以更容易地从网络面板模拟远程资源的响应。

  
  

• 覆盖 XHR 和 fetch 请求内容：现在可以模拟 API 响应，即使后端和 API 尚未准备好。

  
  

• 隐藏 Chrome 扩展（插件）请求：网络面板增加了一个新的过滤器，以隐藏由 Chrome 扩展发送的请求。

  
  

• 人类可读的 HTTP 状态代码：请求头现在会显示与 HTTP 状态代码相关的描述性文本。

  
  

• 为 JSON 子类型的响应提供美观的打印格式：对于特定的 JSON MIME（如：application/[subtype]+json ld+json hal+json）子类型，现在会有一个更清晰的响应解析。

  
  

• 查看网络事件的获取优先级变化：性能面板提供了对网络请求优先级变化的更深入的洞察。

  
  

• 默认启用的源设置：代码折叠和自动文件显示现在是默认设置。

  
  

  

• 新的颜色方案：DevTools 进行了外观刷新，更加贴近 Chrome 的设计风格。

  
  

• Lighthouse 更新：Lighthouse 面板升级至 10.4.0 版本，最显著的改进是增加了新的无障碍审查，如 aria-dialog-name、aria-text 等。

• C/C++ WebAssembly 调试扩展开源：用于 DevTools 的 C/C++ WebAssembly 调试扩展（extensions/cxx_debugging^[2]）已经开源，允许用户对 C++ 程序进行 WebAssembly 调试。了解更多 Debug C/C++ WebAssembly^[3]

• 实验性功能：在 chrome://flags 中启用 Experimental Web Platform。

• 新的渲染模拟：prefers-reduced-transparency，允许开发者模拟并考虑用户可能的透明度偏好，以提高网站的可访问性。

• 增强的协议监视器：为了更方便地构建和发送 CDP 命令（Chrome DevTools Protocol (CDP)^[4]），DevTools 升级了其协议监视器的界面（不必在文档中查找命令及其参数）。

• ...

其他

Easing Editor

在 Chrome 116 中，DevTools 的 Easing Editor^[5] 位于 Elements > Styles 下，缓动编辑器现在支持线性时间函数。用户可以通过点击来轻松调整过渡和动画的时间函数值。为了增强用户体验，添加了一个线性选择器按钮，允许用户在曲线上点击来添加控制点或双击来移除。此外，还提供了几种预设选项，如 linear、elastic、bounce 和 emphasized，以便用户可以根据需要选择。

CSS 嵌套

目前主流高版本浏览器均已支持 CSS 嵌套（CSS Nesting^[6]），它提供了将一个样式规则嵌套在另一个样式规则中的功能，子规则的选择器相对于父规则的选择器。类似的行为以前需要 CSS 预处理器。

以前需要分开的：

.nesting {
  color: hotpink;
}
.nesting > .is {
  color: rebeccapurple;
}
.nesting > .is > .awesome {
  color: deeppink;
}

现在只需嵌套编写即可（以前需要 sass、postcss 之类预处理器）：

.nesting {
  color: hotpink;
  > .is {
    color: rebeccapurple;
    > .awesome {
      color: deeppink;
    }
  }
}

WebGPU

使用硬件加速进行复杂渲染和计算的 API。用例包括要求苛刻的 3D 游戏和科学计算加速，旨在取代 WebGL。

WebGPU 是一个新的 web 标准，专为现代图形和计算工作负载而设计，它提供了一种在 web 上访问 GPU（图形处理单元）的能力，这使得开发者能够利用 GPU 执行高性能计算和渲染任务。目前仅在高版本 Chrome 和 Edge 浏览器中受支持。

在 AI 高速发展的今天，WebGPU 势必会成为下一个开发标准。

📌 WebGPU 优势

以下内容来自于 GPT-4 的回答

在 AI 时代，WebGPU 带来了一系列的优势，使其在浏览器环境中运行 AI 和机器学习（ML）任务更加高效和实用。以下是一些 WebGPU 在这个背景下的关键优势：

• 高性能计算: WebGPU 为高性能图形和计算任务提供了直接的、低级别的访问。对于 AI 和 ML 算法，这意味着更快的模型训练和推断。

• 利用 GPU 加速: AI 和 ML 任务常常需要大量的并行处理，而 GPU 专为这种任务设计。WebGPU 允许 web 开发者直接利用这种并行性，提供比传统 CPU 计算更快的速度。

• 隐私保护: 由于 WebGPU 可以在客户端设备上运行 ML 模型，这意味着用户数据可以在本地处理，而不必发送到远程服务器，增强了隐私保护。

• 跨平台: WebGPU 的跨平台特性意味着开发者可以为各种设备和操作系统编写一次 AI 或 ML 应用程序，然后在所有支持 WebGPU 的浏览器上运行。

• 集成到现有的 Web 生态系统: 与其他 Web API 和框架的天然集成，使得在现有的 web 应用中引入 AI 功能变得更加容易。

• 降低开发门槛: 通过 WebGPU，web 开发者不需要深入了解 GPU 编程或使用复杂的框架，就可以利用 GPU 的强大能力。

• 节省成本: 由于计算可以在客户端进行，企业和开发者可以减少对远程服务器的依赖，从而降低成本。

• 互操作性与开放性: 作为一个开放的 web 标准，WebGPU 鼓励各种工具和框架的发展，以支持更广泛的应用程序和用例。

• 低延迟: 对于实时 AI 应用，如 AR、VR 或游戏，WebGPU 可以提供低延迟的性能，为用户带来流畅的体验。

总之，WebGPU 提供了一个强大的平台，使 web 开发者可以充分利用 GPU 的能力，为 AI 和 ML 应用带来显著的性能和效率提升。

WebAssembly

WebAssembly （简称 WASM）是一种新的可移植、大小和加载时间高效的格式，适合编译到网络。

WebAssembly 是一个开放的标准，它定义了一种为浏览器设计的新型低级虚拟机字节码。WASM 旨在作为 JavaScript 的补充，使开发人员能够在浏览器中运行接近本地性能的代码。目前主流浏览器均支持。

以下是关于 WebAssembly 的一些关键信息：

• 性能: WASM 设计为高效和快速的。其字节码可以迅速解码并达到接近原生的性能执行。

• 跨平台: WASM 旨在在所有主流浏览器上运行，无论是桌面还是移动设备。

• 语言支持: 尽管 WebAssembly 本身是一个低级语言，但它为高级语言提供了目标。这意味着开发者可以用诸如 C、C++、Rust 等语言编写程序，并将其编译为 WASM，然后在浏览器或其他 WASM 兼容环境中运行。

• 与 JavaScript 集成: WASM 旨在与 JavaScript 完美协同工作。这意味着你可以在同一应用程序中混合和匹配 JavaScript 和 WebAssembly。

• 安全性: WebAssembly 设计为沙盒式运行的，这意味着 WASM 代码在一个受限的环境中执行，从而提供了一个更安全的执行模型。

• 大小和加载时间: WASM 的二进制格式旨在尽量小并且快速加载。相比于传统的 JavaScript，WASM 文件通常更小、更快。

• 应用领域: 由于其性能特点，WASM 特别适用于那些对性能要求高的 web 应用程序，如游戏、计算密集型任务、音视频编辑、实时交互应用等。

除 web 浏览器环境，还支持其他运行环境。如 WebAssembly Micro Runtime^[7] (WAMR) 是一种轻量级的独立 WebAssembly 运行时，具有占用空间小、高性能和高度可配置的功能，适用于从嵌入式、物联网、边缘到可信执行环境 (TEE)、智能合约、云原生等应用程序。目前在国内的发展属于不温不火，但值得保持关注。

References