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,仅显示当前标签页生命周期内的键值对,关闭标签页后自动清除。











