Chrome DevTools：你需要知道的一切

# Web 开发# JavaScript# 前端开发

大家好！你们还好吗？一切都平安吗？一切都平静吗？希望你们一切都好！

今天我要谈谈 Chrome DevTools！你已经在你的 Web 应用程序中使用过它了吗？你知道它的所有功能吗？今天我们将探索 Chrome devtools 的主要功能和最新消息

SpongeBob Thinking

1. 性能

当我们考虑 Web 应用程序的性能时，我们需要收集一些指标，以依靠数据来改进或处理应用程序中的某些点。

为此，我们在 DevTools 上设置了“Perfomance”选项卡。在最新版本的 Chrome 中，Web Vitals（健康网站的三个基本指标）

例如，我们已经有了 Page Speed Insights 和 Lighthouse。

但现在我们可以实时看到所有指标的变化。

首先让我们了解加载、视觉稳定性和交互性的 3 个主要指标。它们是良好用户体验的基础，也是让访客保持参与并再次访问的关键。

Web Vitals 是 Google 定义的一组基本指标，用于衡量与网站性能相关的用户体验。这些指标侧重于页面加载速度、交互性和视觉稳定性等重要方面。Web Vitals 的主要目标是确保网站根据用户与页面交互时的实际感受提供流畅、愉快的浏览体验。

加载中

：测量网页加载性能。它追踪渲染最基本和最重要的元素所需的时间。

交互性

  • 首次输入延迟 (FID)：它测量从用户首次与页面交互（例如单击链接或按钮）到浏览器实际开始处理该交互所需的时间。

    • 视觉稳定性

  • 累积布局偏移 (CLS)：测量视觉稳定性或用户交互期间发生的意外布局偏移的次数，包括元素出现、调整大小或重新定位。
    • The web vitals applied on web

    现在您已经了解了主要的 Web 生命力指标，让我们在 devtools 中探索它们！

    我们进入 google 提供的示例页面：https://coffee-cart.app/?ad=1

    现在在 Mac 上使用 `CTRL + SHIFT + I` 或 `CMD + ALT + I` 打开 devtools。使用 `CTRL + SHIFT + P` 或 `CMD + SHIT + P` 打开 Perfomance 选项卡，然后点击 `> perfomance` 进行搜索。

    在此示例中，您可以在加载页面后看到 Web Vitals 的树状指标。开发工具将为您提供 Web Vitals 的分数。

    我们可以通过提供真实的指标来模拟用户通过 CrUX 所获得的真实体验。

    Chrome 用户体验报告 (CrUX) 是一组通过 Google Chrome 收集的真实用户浏览网页的真实性能数据。这些数据基于对真实设备上的页面性能的测量，旨在帮助开发人员了解现实世界中用户的页面体验。

    CrUX 是衡量网站实际使用体验的宝贵来源，尤其是了解其在核心 Web Vitals（如 LCP、FID 和 CLS）方面的表现，可以通过 Google PageSpeed Insights、Google Search Console 等工具访问，也可以直接在 Chrome DevTools 等工具中访问。

    因此，在这个例子中，我们可以看到如何设置与 CrUX 的集成，并提供使用该应用程序的用户的真实指标。

    模拟较低 CPU 网络和处理的另一种方法是，我们可以使用性能选项卡中的环境设置来测量页面加载。

    请注意，LCP 和 CLS 的得分较低，因为网络和处理能力较差。

    性能选项卡包含更多功能，我们可以在另一篇文章中探讨。

    让我们跳转到应用程序选项卡。

    2. 申请

    在应用程序选项卡中，我们可以看到应用程序的存储，如会话存储、本地存储、IndexDB、Cookies 和服务工作线程（如果我们的应用程序使用此资源）。

    曲奇饼

    Cookie 是服务器存储在浏览器中的小型文本文件。它们随 HTTP 请求一起发送，可用于存储有关应用程序状态、用户偏好、登录会话等的信息。每个 Cookie 的大小限制为 4KB。

    本地存储

    LocalStorage 是一种持久性存储形式，它将数据以键值对的形式存储在用户的浏览器中。这些数据不会过期，也就是说，它会一直保留在浏览器中，直到用户手动删除它或网站删除数据为止。每个域最多可以存储 5 MB 的数据。

    即使浏览器关闭并重新打开后，localStorage 中存储的数据仍然会保留。

    例子：

    localStorage.setItem("username", "JohnDoe");
const user = localStorage.getItem("username");

    会话存储

    SessionStorage 与 localStorage 类似，但有一个重要区别：它是易失性的，仅在浏览器会话期间存储数据。换句话说，浏览器选项卡或窗口关闭后，数据就会被删除。

    每个域最多可以存储 5 MB 的数据。

    当浏览器选项卡关闭或浏览器会话结束时，数据会被删除。

    例子：

    sessionStorage.setItem("sessionID", "123456");
const sessionID = sessionStorage.getItem("sessionID");

    索引数据库

    IndexedDB 是一种更高级的本地数据库，允许存储大量结构化数据，例如 JavaScript 对象。它是异步的，提供更灵活、更复杂的数据访问，可用于存储与离线 Web 应用程序相关的数据。

    它可以存储大量数据（通常数十 MB 到 GB），具体取决于浏览器和设备设置。

    例子：

    const request = indexedDB.open("MyDatabase", 1);
request.onsuccess = function(event) {
  var db = event.target.result;
  // work with the database
};

    缓存存储

    缓存存储用于将网络资源（例如 HTML、CSS、JS 文件、图片）存储在浏览器本地。此存储是 Service Workers API 的一部分，允许 Web 应用程序在离线或不稳定的网络条件下工作。

    允许您缓存和管理网络响应（文件），从而提高性能和离线工作能力。

    缓存存储 API 是异步的，这意味着操作不会阻塞主线程。

    例子：

    caches.open("my-cache").then(function(cache) {
  cache.addAll(["/index.html", "/style.css", "/script.js"]);
});

    3. 网络

    在网络选项卡中，我们可以看到呈现页面内容的所有请求，我们可以在其中过滤 HTTP、CSS、文档 HTML、Javascript 等请求。

    除了能够分析请求中发送的内容（例如请求正文、标头、cookie 等）之外

    4. 来源

    在Source选项卡中，我们可以分析应用程序的源代码和第三方库来执行调试。

    我当然无法详细探讨开发工具提供的许多其他资源，但这是您需要了解并开始探索工具之旅的重要内容。

    将来我可能会写一篇关于每个开发工具选项卡的更具体的文章，或者制作一个视频来更详细地讨论它

    非常感谢您读到这里并祝您一切安好！

    That's all folks image

    联系方式：

    领英： https://www.linkedin.com/in/kevin-uehara/

    Instagram：https://www.instagram.com/uehara_kevin/

    Twitter：https://x.com/ueharaDev

    Github：https://github.com/kevinuehara

    dev.to：https://dev.to/kevin-uehara

    YouTube：https://www.youtube.com/@ueharakevin/