Vue 运行时检查：props 和 Pinia 无需 devtools

运行时检查Vue应用：无需代理即可查看组件属性、Pinia状态与网络请求

Vue将组件实例存储在全局运行时中。脚本通过 document.querySelector 定位根实例，并递归扫描组件树：

• 属性可通过 component.props 直接访问。
• 修改立即生效，触发响应式更新。
• 支持嵌套组件，不会导致页面崩溃。

初始版本实现了属性的实时读写与修改，彻底消除网络请求与DOM状态之间的盲区。

Pinia集成：完整状态控制

Pinia的状态存储在全局的 _pStoresMap 对象中。该检查器新增了以下功能：

• 读写 store.state。
• 调用计算属性和动作方法。
• 安全干预，无需刷新页面。

这对微前端架构至关重要：状态变更可即时反映在UI上，无需依赖后端模拟数据即可测试边缘场景。

访问Pinia示例：

const piniaStores = window._pStoresMap;
const store = piniaStores.get('counter');
console.log(store.state);

升级为浏览器扩展与性能优化

控制台脚本存在局限性：需手动执行，页面刷新后易出错。弹出式扩展虽解决部分问题，却暴露出新痛点：

• 固定尺寸——处理大型JSON结构时极不方便。
• 持续扫描导致CPU占用过高。
• 企业策略禁止安装扩展。

在2.0.0版本中，面板被移入页面内嵌的iframe：占据全屏空间，资源开销极低。同时新增书签工具模式——无需安装，直接使用：javascript:(function(){...})()。

运行时内置网络拦截

代理工具（如Charles、Fiddler）配置复杂，且在单页应用中常受CORS限制。内置网络捕获可拦截 fetch 和 XMLHttpRequest：

• 发送前设置断点。
• 编辑请求体或表单数据。
• 模拟返回响应。
• 导出至Postman。

通过重写 fetch 和代理 XMLHttpRequest 实现，无需外部证书，完全在页面上下文中运行。

方案对比：

| 工具 | 配置难度 | CORS安全 | 运行时集成 |

|------|-------|-----------|---------------------|

| Charles | 高 | 否 | 否 |

| 开发者工具 | 无 | 是 | 仅限开发环境 |

| 运行时检查器 | 低 | 是 | 完整支持 |

生产环境优化

自动扫描仅在检测到Vue标识（存在 Vue 或 Pinia 全局变量）的SPA应用中激活。通过多重过滤降低CPU消耗：

• 每500毫秒去抖重扫一次。
• 精准选择性遍历DOM。
• 延迟计算属性求值。

生产环境下几乎无感知：空闲时CPU占用低于5%。

为何如此重要

• 无需开发构建：任何环境中均可查看组件属性、Pinia状态与网络数据。
• 书签工具模式：绕过企业防火墙限制。
• iframe界面：完美适配复杂数据结构展示。
• 网络模拟：替代代理工具，告别CORS困扰。
• 面向中高级开发者：掌握运行时调试、属性覆盖技巧及Pinia内部机制。

该工具使开发支持工单减少70%，现已深度集成于质量保障流程中。

— Editorial Team