JSON Alexander的10个实用技巧：悬停复制JSON路径、一键折叠层级与路径固定等高级玩法-育师

【免费下载链接】JSON-Alexander

A really good JSON viewer browser Extension

项目地址：https://gitcode.com/gh_mirrors/js/JSON-Alexander

JSON Alexander 是一款免费开源的 JSON viewer（JSON 查看器）浏览器扩展，它会自动接管任意返回 JSON 的页面，把原始文本变成可折叠、语法高亮的交互式树视图。支持悬停显示 JSON 路径、点击固定、一键复制、三种视图切换等。本文带你解锁 10 个实用技巧，快速玩转各种深层 JSON。

初识界面：JSON Alexander 打开后是什么样

安装后，只要访问任意返回 JSON 的 API 地址，页面就会自动被替换成交互式查看器：

语法高亮：键名、字符串、数字、布尔值、null 各有专属配色
可折叠树：每个节点都能单独展开/收起
顶部工具栏：节点统计、路径显示区、层级按钮、视图切换、主题开关、Copy JSON 按钮

上图中，工具栏固定着路径data[1].address.city并配有复制按钮；底部 DevTools 控制台则提示数据已注入为window.data。

10 个实用技巧

技巧 1：🖱️ 悬停任意行，秒看完整 JSON 路径

鼠标移到树中任意一行，工具栏立即显示该节点的完整 JSON 路径（如data[1].address.city），同时当前行与所有祖先行会同步高亮，缩进参考线也会变成金色——一眼看清自己处在第几层、属于谁。路径的生成规则在 src/viewer.ts 的buildPath函数中：普通属性用点号.key，数组元素用[下标]，特殊键名自动改用["key"]形式。

技巧 2：📌 点击任意行，把路径固定住

悬停看到的路径，鼠标移开就会消失。想让某个路径一直留在工具栏，点击该行一次即可固定，固定后显示区会出现醒目的样式标记。固定与高亮的完整逻辑在 src/viewer.ts 的setupHoverPath函数中实现。

技巧 3：📋 一键复制 JSON 路径

路径固定后，点击旁边的Copy按钮即可把路径复制到剪贴板，按钮会短暂变成 "Copied!"，随后自动清除固定状态；随时按Esc键也能手动解除固定。复制好的路径可直接粘贴到 Bug 单、文档或控制台里，再也不用逐层描述"它到底在哪个位置"。

技巧 4：🎚️ 层级按钮，一键折叠/展开到任意深度

工具栏上的数字按钮（1、2、3……最多 8）对应树的真实深度：点2就把第 2 层及以下全部收起，只留顶层概览；点All则全部展开。面对几十层的嵌套数据，这是最快的"先看全貌再钻细节"方式。核心实现见 src/viewer.ts 的collapseToLevel，按钮构建代码在 src/content.ts。

技巧 5：🌲 ⇕ children 按钮，一键展开某个节点的全部子层

鼠标悬停在对象节点上会出现⇕ children小按钮：点击后智能切换该节点下所有嵌套子节点——只要还有子节点是收起的就全部展开，否则全部收起，比逐个点击 ▶ 箭头高效得多。实现逻辑见 src/viewer.ts。

技巧 6：✂️ ⧉ copy 按钮，只复制当前节点的值

对象节点上还有⧉ copy按钮，点击会把该节点的值以 2 空格缩进的格式 JSON 复制到剪贴板。比如只复制一个address对象，就能直接粘到下一段请求里。"按路径取值再复制"的实现见 src/content.ts。

技巧 7：🔀 Tree / Formatted / Raw 三种视图随心切换

工具栏中部的视图切换按钮支持随时切换：

模式	说明	适用场景
Tree	交互式树视图，支持折叠与全部路径功能	默认，结构化浏览
Formatted	完整 2 空格缩进格式化 JSON	复制、分享、对比差异
Raw	服务器返回的原始文本，一字不改	核对服务端实际输出

技巧 8：🌗 主题一键切换，自动跟随系统

工具栏的 ◐ 按钮在Auto（跟随系统）→ Dark（深色）→ Light（浅色）三种主题间循环，选择会保存在扩展存储中下次沿用。深色主题为默认，整套配色由 src/styles/viewer.css 的 CSS 变量驱动，切换逻辑见 src/content.ts。

技巧 9：🧪 在控制台里用 window.data 直接操作数据

扩展会自动把解析后的 JSON 注入页面上下文。打开 DevTools 控制台能看到[JSON Alexander] Data available as window.data的提示，之后就能用 JS 随意查询、筛选数据，例如输入window.data[1].address.city。注入逻辑分别在 src/content.ts 与 src/page-script.ts。

技巧 10：👆 自定义光标，让整页变成标志性"毛手"

点击工具栏右侧的 ⚙ 菜单，勾选Custom cursor（默认关闭），页面鼠标指针会变成一只标志性的大手，趣味性拉满。运行时的光标图即 src/pointer-32.png：

💡 加分项：Tree 视图中，值看起来像 URL 的字符串会自动变成可点击链接，检测逻辑见 src/viewer.ts。

快速上手：三步完成安装

Chrome / Edge

打开chrome://extensions
开启右上角的Developer mode（开发者模式）
点击Load unpacked（加载已解压的扩展程序），选择项目中的dist文件夹

Firefox

打开about:debugging#/runtime/this-firefox
点击Load Temporary Add-on...，选择dist文件夹中的manifest.json（临时加载，浏览器重启后需重新加载）
关键一步：先到about:config把devtools.jsonview.enabled设为false，否则 Firefox 自带的 JSON 查看器会抢先接管 JSON 页面

装好之后，访问任何返回 JSON 的地址即可生效；工具栏的Copy JSON按钮还能一键复制整份 2 空格缩进的格式化 JSON。完整安装说明见 README.md，扩展的权限声明与注入配置在 manifest.json——它只申请了storage权限，用来记住主题与光标偏好。

写在最后

JSON Alexander 轻量、零依赖、无需联网：不上传数据、不弹登录框。配合上面这 10 个技巧——悬停看路径、点击固定、一键复制、层级按钮折叠、window.data控制台取值——即使是 191 个节点、4 层深度的大型 JSON 也能快速定位、截取与分享。如果你经常调试 API 响应，这款 JSON viewer 浏览器扩展值得放进你的收藏夹。