Edge浏览器应用面板怎么用？查看PWA、缓存、Cookie

Edge开发者工具中“应用程序”面板需手动启用，用于查看PWA状态、缓存资源、Cookie及本地存储；通过F12→更多工具→应用程序调出，支持清单解析、服务工作线程管理、缓存调试、Cookie编辑及存储配额监控。

如果您在Edge浏览器中打开开发者工具后找不到“应用程序”面板，或不清楚如何使用该面板查看PWA状态、缓存资源及Cookie信息，则可能是由于面板未启用或操作路径不明确。以下是具体使用方法：

一、打开并定位“应用程序”面板

“应用程序”面板是Edge开发者工具中专门用于管理PWA生命周期、存储数据和站点权限的模块，需通过快捷键或菜单入口显式调出。

1、在Edge浏览器中打开任意网页。

2、按 F12 或 Ctrl+Shift+I 打开开发者工具。

3、点击右上角三个点图标（更多工具），选择 更多工具 > 应用程序。

4、若“应用程序”未出现在顶部标签栏，可右键点击任一标签，勾选 应用程序 使其显示。

二、查看PWA安装状态与清单信息

该功能用于确认当前页面是否符合PWA标准，并检查其manifest.json配置、服务工作线程注册情况及安装能力。

1、确保网页已部署有效的 manifest.json 文件且通过HTTPS提供。

2、在“应用程序”面板左侧导航中，点击 清单。

3、右侧将显示解析后的应用名称、图标列表、启动URL及显示模式等字段；若解析失败，会提示错误位置。

4、切换至 服务工作线程 选项卡，查看注册状态、作用域、更新周期及当前控制页面的SW脚本路径。

5、在页面空白处右键，若出现 添加到桌面 选项，表明PWA已满足安装条件。

三、查看与管理缓存存储（Cache Storage）

此部分用于调试由service worker主动写入的命名缓存，包括缓存条目、响应头及原始请求URL。

1、在“应用程序”面板左侧导航中，点击 缓存存储。

2、右侧列出所有已注册的缓存名称（如 static-v1、dynamic-cache 等）。

3、点击任一缓存名称，下方展开其包含的所有请求-响应对。

4、点击某条请求，右侧显示完整HTTP请求头、响应头、状态码及响应体预览（支持文本/JSON格式解析）。

5、右键某条缓存项，可选择 删除 单条记录；右键缓存名称可选择 删除缓存 清空整个命名空间。

四、查看与编辑Cookie

“应用程序”面板中的Cookie视图提供结构化展示，支持按域名筛选、手动增删改，且实时反映HTTP-only以外的可读属性。

1、在“应用程序”面板左侧导航中，点击 Cookie。

2、顶部下拉框选择目标源（如 https://example.com），仅显示该协议+域名下的Cookie。

3、表格列包括名称、值、域、路径、过期时间、大小、HttpOnly、Secure、SameSite等字段。

4、双击“值”列任意单元格，可直接编辑内容；编辑后按Enter保存，刷新页面即可生效。

5、点击表格上方 + 按钮，输入名称、值、域、路径等字段，添加新Cookie；点击行末垃圾桶图标可删除选定项。

五、查看存储配额与本地存储数据

该区域汇总了当前站点使用的各类持久化存储容量，包括LocalStorage、SessionStorage、IndexedDB及Web SQL数据库内容。

1、在“应用程序”面板左侧导航中，点击 存储。

2、顶部显示总用量（如 2.4 MB / 100 MB）及各类型存储占比条形图。

3、展开 Local Storage，查看键值对列表；双击值列可编辑，右键支持导出为JSON文件。

4、展开 IndexedDB，显示数据库名称及版本；点击数据库名，再点击其中的对象存储（Object Store），可浏览全部记录及索引结构。

5、展开 Session Storage，仅显示当前标签页生命周期内的键值对，关闭标签页后自动清除。