5.Application部分
Application 面板是一个功能强大的工具，主要用于查看和管理网站应用的各类存储数据、服务工作者、缓存等内容。展示与本地存储相关的信息，这个面板提供了一个详细的视图，帮助开发者深入了解网页或应用在客户端的状态。它特别有助于调试涉及浏览器存储、离线工作、缓存、以及Web应用相关的功能。
（1） 左侧面板提供了多个不同的选项卡（Tabs），每个选项卡都有不同的功能，主要包括以下几个部分：
1）清单（Manifest）：用于查看网站的 Web App Manifest，该文件通常包含应用名称、图标、颜色主题、启动 URL 等信息。它帮助浏览器了解如何安装 Web 应用，以及应用在设备上的外观和行为。
2）服务工作者（Service Workers）：服务工作者用于控制缓存，提供离线支持。你可以在此查看已注册的服务工作者，检查其状态，甚至手动控制它们（如更新、卸载等）。
3）缓存存储（Cache Storage）：该区域显示缓存中存储的文件，这些文件通常是由服务工作者管理的。开发者可以查看、删除缓存资源，了解哪些资源在离线时可用。
4）Cookies：显示与当前网站相关的所有 cookies。你可以查看、删除或修改 cookies。Cookies 通常用于会话管理、跟踪用户信息等。
5）LocalStorage 和 SessionStorage：
LocalStorage：持久化存储数据，直到被显式删除，通常用于存储网站中不需要经常改变的数据。
SessionStorage：临时存储数据，数据在页面会话结束后自动消失（即浏览器标签页关闭时）。
6）IndexedDB：一个客户端的数据库，可以存储大量结构化数据。它可以持久化存储数据，并支持查询、事务等复杂操作。此区域允许开发者查看和调试 IndexedDB 中的数据。
7）WebSQL：与 IndexedDB 类似，它是一个浏览器数据库，允许客户端存储数据。WebSQL 目前已经不再被推荐使用（现代 Web 应用倾向于使用 IndexedDB），但仍然在一些老旧浏览器中存在。
8）Push 订阅（Push Notifications）：用于管理和调试 Push 通知服务。可以查看当前的推送订阅、消息内容以及通知的触发事件等。
9）背景页面（Background Pages）：这部分是开发者调试后台脚本的地方。特别是针对 Chrome 扩展程序和 Service Worker 中的脚本。
10）合成图层（Layers）：显示页面的渲染层次结构和合成图层的信息，这对调试页面的渲染性能非常有帮助。
（2） 右侧面板（详细视图）
点击左侧面板中的某个项目后，右侧面板将展示更详细的信息。例如：
在 Cookies 中，右侧将列出所有 cookie 的名称、值、路径、过期时间等详细信息。
在 IndexedDB 中，右侧会展示已存储的数据库、对象存储、键值对等。
在 Service Workers 中，右侧会显示当前活跃的服务工作者的状态（例如，是否在运行、是否被激活、是否注册成功等）。
（3） 调试功能
1）服务工作者调试：在服务工作者的选项卡中，你可以手动控制服务工作者的生命周期（比如激活、更新、注销），并查看它们的日志。
2）缓存管理：开发者可以在“缓存存储”部分查看和清除缓存的内容，了解哪些资源已经被缓存以便在离线时使用。
3）模拟离线状态：在 Application 面板 中，尤其是在服务工作者部分，开发者可以模拟网络断开、离线状态等情境，检查应用的离线功能是否正常。
