【免费下载链接】JSON-AlexanderA really good JSON viewer browser Extension项目地址https://gitcode.com/gh_mirrors/js/JSON-Alexander点击查看免费下载JSON Alexander 是一款功能强大的浏览器 JSON 查看器插件它能自动识别页面中的 JSON 响应并渲染成交互式树形视图。本文带你揭秘它鲜为人知的隐藏能力window.data——只需 3 步就能在浏览器控制台里直接拿到完整的 API JSON 数据像操作本地变量一样过滤、筛选、复制新手也能快速上手的实用技巧。为什么说是隐藏功能原理 30 秒看懂大多数 JSON 查看器只负责看而 JSON Alexander 还能把数据交给你。它的做法很巧妙插件识别出页面的 JSON 内容后会把它写进一个隐藏的script typeapplication/json节点随后注入 page-script.js在页面自身的 JavaScript 上下文中执行解析解析结果直接挂载为全局变量window.data并会在控制台打印一条提示[JSON Alexander] Data available as window.data。关键实现在 src/content.ts 的injectPageData函数中它负责向页面注入数据节点和脚本src/page-script.ts 则完成JSON.parse和赋值。由于数据跑在页面上下文而非插件沙箱里所以你在控制台里输入的window.data就能直接摸到它——这就是隐藏的由来界面没有任何按钮却把整个 JSON 塞进了控制台。 小细节如果页面处于沙箱 iframe 中脚本注入会被浏览器阻止此时window.data将不可用插件会静默失败不影响正常浏览。3 步在控制台抓取 API 数据第 1 步用浏览器打开任意返回 JSON 的接口在地址栏输入一个 JSON API 地址例如https://jsonplaceholder.typicode.com/users。JSON Alexander 会自动接管页面显示带语法高亮的树形视图顶栏还会提示节点数量与层级深度。第 2 步按 F12 打开开发者工具切到 Console控制台打开后你会看到黄色高亮提示[JSON Alexander] Data available as window.data说明数据已就绪——这是判断该功能是否生效最快的方式。第 3 步直接输入 window.data 开始操作在控制台里输入window.data回车整个 API 响应就以 JS 对象的形式躺在你手里了。下面是 4 个最常用的操作// 表格形式速览所有数据一目了然 console.table(window.data) // 按条件筛选比如只要 id 大于 5 的记录 window.data.filter(item item.id 5) // 取深层字段无需一层层点开树 window.data[1].address.geo // 复制格式化后的完整 JSON copy(JSON.stringify(window.data, null, 2))对比一下传统方式是打开 DevTools → 切到 Network → 点请求 → 手动复制响应现在只需打开页面 F12window.data路径更短而且拿到的是可直接运算的 JS 对象不用先JSON.parse一遍字符串。Firefox 用户必读先关掉原生 JSON 查看器Firefox 内置的 JSON 查看器会抢先接管 JSON 页面导致 JSON Alexander 无法生效。按 README.md 中的说明处理即可新标签页打开about:config接受风险提示搜索devtools.jsonview.enabled将其设为false然后刷新任意 JSON 页面。顺手体验自定义光标与主题切换既然打开了开发者工具不妨把顶栏的 ⚙ 设置也点一点——勾选Custom cursor即可换上插件自带的手势指针界面效果如下此外顶栏的 ◐ / ☾ / ☀ 按钮可在 跟随系统、暗色、亮色 三种主题间循环切换长时间盯 JSON 不易疲劳。小结window.data 适合哪些场景场景用法示例快速浏览大数据集console.table(window.data)调试接口字段结构window.data[0]、Object.keys(window.data[0])数据二次加工window.data.map(...)/filter(...)跨页面前暂存localStorage.setItem(cache, JSON.stringify(window.data))对需要频繁查看接口返回的开发者来说window.data相当于给每个 JSON 页面都装了一个数据直通车。如果你刚安装 JSON Alexander源码构建产物在dist目录加载方式见 README.md不妨打开任意 API 页面亲手试一次这个 3 步就够的隐藏技巧。相关项目文件功能说明与安装指南README.md插件清单内容脚本与资源声明manifest.json内容脚本JSON 检测与界面渲染src/content.ts页面脚本window.data赋值逻辑src/page-script.ts树形视图渲染引擎src/viewer.ts样式文件src/styles/viewer.css构建配置vite.config.ts、tsconfig.json赞分享【免费下载链接】JSON-AlexanderA really good JSON viewer browser Extension项目地址https://gitcode.com/gh_mirrors/js/JSON-Alexander点击查看免费下载相关推荐MetaMask 扩展 Secret Preferences 完全指南用全局 setPreference 在后台控制台解锁隐藏功能MetaMask 扩展 Secret Preferences 完全指南用全局 setPreference 在后台控制台解锁隐藏功能 本文基于 MetaMask区块链Web3金融科技前端pySLAM深度预测模块从DepthPro到RAFT-Stereo的完整指南pySLAM深度预测模块从DepthPro到RAFT Stereo的完整指南 pySLAM深度预测模块是这款混合Python/C视觉SLAM管道的核心功能计算机视觉深度学习机器人掌握Ruby LLM工具调用10个实战案例教你构建智能助手掌握Ruby LLM工具调用10个实战案例教你构建智能助手 Ruby LLM是一个让开发者以优雅Ruby方式与AI交互的框架无需复杂配置和回调处理就能编写上一篇TrollStore在 iOS 上免越狱永久安装任意 IPA 的完整实现方案下一篇GB/T 7714参考文献格式一键生成BibTeX助你告别排版烦恼创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考