前言
PWA（Progressive Web Apps）是一种新型的 Web 应用程序，它能够给用户提供类似于原生应用的体验。PWA 具有离线访问、推送通知、安装到主屏幕等功能，而且能够运行在任何设备上，不需要安装任何应用程序。在开发 PWA 时，我们需要通过 devtools 调试应用程序，以便快速展示应用状态。本文将介绍如何通过 devtools 调试 PWA。
开始调试
打开 devtools
在 Chrome 浏览器中，可以通过菜单或快捷键（Ctrl+Shift+I 或 F12）打开 devtools。在 devtools 中，我们可以看到多个面板，如 Elements、Console、Sources、Network、Performance 等。
选择 Application 面板
在 devtools 中，选择 Application 面板。在 Application 面板中，我们可以看到多个子面板，如 Manifest、Service Workers、Cache Storage、IndexedDB、Local Storage、Session Storage 等。
查看 Manifest
在 Manifest 面板中，我们可以查看应用程序的 manifest 文件。manifest 文件是一个 JSON 文件，它描述了应用程序的属性、图标、启动 URL 等信息。我们可以在这里查看 manifest 文件中的属性，以便了解应用程序的配置。
查看 Service Workers
在 Service Workers 面板中，我们可以查看应用程序的 service workers。service workers 是一种在后台运行的 JavaScript 程序，它可以拦截网络请求、缓存资源、推送通知等。我们可以在这里查看 service workers 的状态、注册 URL、缓存资源等信息。
查看 Cache Storage
在 Cache Storage 面板中，我们可以查看应用程序的缓存存储。缓存存储是一种浏览器存储技术，它可以将资源缓存到本地，以便在离线时访问。我们可以在这里查看缓存存储中的资源、大小等信息。
查看 IndexedDB
在 IndexedDB 面板中，我们可以查看应用程序的 IndexedDB 数据库。IndexedDB 是一种浏览器存储技术，它可以存储任意类型的数据。我们可以在这里查看 IndexedDB 数据库的名称、版本、存储对象等信息。
查看 Local Storage 和 Session Storage
在 Local Storage 和 Session Storage 面板中，我们可以查看应用程序的本地存储。本地存储是一种浏览器存储技术，它可以将数据存储到本地，以便在下次访问时使用。我们可以在这里查看本地存储中的数据、大小等信息。
结论
通过 devtools 调试 PWA，我们可以快速展示应用状态。在 devtools 中，我们可以查看应用程序的 manifest 文件、service workers、缓存存储、IndexedDB 数据库、本地存储等信息。这些信息可以帮助我们了解应用程序的配置和状态，以便进行调试和优化。
示例代码
-- -------------------- ---- -------
-- -- ------- ------
-- ---------------- -- ---------- -
------------------------------- -- -- -
------------------------------------------
------------------ -- -
-------------------------- ------- --------------------
--
------------ -- -
-------------------------- ------- -------
---
---
-
-- ----
-------------------------------- ----- -- -
----------------
-----------------------
----------- -- -
------ --------------
----
--------------
--------------
-------------
------------
---
--
--
---
-- ------
------------------------------ ----- -- -
------------------
---------------------------
-------------- -- -
-- ---------- -
------ ---------
-
------ ---------------------
--
--
---
-- ----
----------------------------- ----- -- -
----- ----- - -------
----- ------- - -
----- -------
----- ------------
------ ------------
--
----------------
----------------------------------------- --------
--
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67601d9003c3aa6a56fca770