Chrome DevTools Application面板支持实时过滤、动态编辑、多环境对比及存储变更监听：可搜索键名、按域名/Cookie源筛选、用JS表达式过滤IndexedDB；双击增删改localStorage/sessionStorage，谨慎编辑Cookies属性；多标签页比对存储差异并导出JSON；通过Proxy拦截或全局搜索定位修改逻辑。
在 Chrome DevTools 的 Application 面板中，存储调试不只是“看看数据”，而是要主动干预、验证行为、复现问题。掌握实时过滤与精准操作的技巧，能快速定位微应用（如 qiankun）、登录态、缓存策略等场景下的异常。
实时筛选特定存储域或键名
Application 面板左侧按存储类型分类（localStorage、sessionStorage、Cookies、IndexedDB 等），但默认显示全部条目。面对大量微应用共存时（例如多个子应用写入同域名 localStorage），手动滚动查找效率极低：
- 点击任一存储类型后，在右侧数据列表上方的搜索框中直接输入关键词，如
auth_token或qiankun-，会即时高亮并仅显示匹配键名的记录 - 对 Cookies，可结合域名过滤：先在左侧面板顶部切换到目标源（如
https://example.com），再搜索，避免被其他子域干扰 - IndexedDB 支持更进一步——展开数据库 → 表（Object Store）→ 点击右上角 Filter 图标，输入 JavaScript 表达式（如
value.status === "pending"）进行内容级过滤
不刷新页面，动态增删改存储项
修改存储无需写 JS 脚本，Application 面板原生支持交互式编辑：
- 新增：在 localStorage/sessionStorage 列表空白处双击，出现新行，输入 Key 和 Value（支持字符串、JSON 字符串，后者需手动加引号）
- 修改：双击任意 Key 或 Value 单元格即可编辑；对 JSON 值，建议先复制到编辑器格式化后再粘贴回，避免语法错误导致写入失败
-
删除：右键某条记录 → Delete；或选中后按
Delete键（Windows/Linux）或Fn + Delete（Mac） - Cookies 编辑更谨慎：双击值字段可改，但过期时间（Expires/Max-Age）、Secure、HttpOnly 等属性需右键 → Edit 打开弹窗调整，HttpOnly 字段不可编辑（由服务端控制）
对比多环境存储差异（如主应用 vs 微应用）
qiankun 等微前端架构下，不同子应用可能隔离写入同一域下的不同前缀存储。利用 Application 面板可快速比对：
- 打开多个标签页，分别加载主应用和各微应用，保持 DevTools 打开状态
- 在每个 DevTools 的 Application → Storage 区域，使用相同关键词搜索（如
user），观察哪些键只存在于某个上下文 - 导出为 JSON：右键 localStorage → Save as…，保存为
main.json/app1.json，用文本工具 diff，确认数据同步是否遗漏
监听存储变更（配合调试逻辑触发点）
单纯看快照不够，有时需知道“谁在什么时候改了什么”。Application 面板本身不提供监听，但可联动 Elements 或 Console 实现：
- 在 Console 中执行：
localStorage.setItem = new Proxy(localStorage.setItem, { apply: (t, o, a) => { console.log('localStorage set:', ...a); return t.apply(o, a); } });，后续所有 set 操作都会打印日志 - 若发现某 key 异常清空，可在 Sources 面板全局搜索该 key 字符串，快速定位调用位置；也可在 Elements 面板右键相关 DOM 节点 → Break on → Attribute modifications（如果该 key 变更会触发 class 或 data-* 属性更新）
