企业官网建设流程全解析

调试 API 时，接口返回的巨型 JSON 动辄上千行，翻来翻去找一个字段让人抓狂。JSON Alexander是一款免费的 JSON viewer 浏览器扩展：它能自动接管任何返回 JSON 的页面，变成可交互的树形视图，配合层级按钮与路径固定功能，让你秒级定位字段、一键复制 JSON path。

是什么：开箱即用的 JSON 查看器扩展

无需任何配置，在浏览器打开任意返回 JSON 的接口地址，扩展会自动检测响应并接管页面，把原始文本变成：

• 树形视图🌳：可折叠/展开的层级结构，键名、字符串、数字、布尔值、null 均语法高亮
• 信息栏：一眼看到总节点数与层级深度（如191 nodes · 4 levels deep）
• 缩进参考线：悬停高亮，嵌套字段的归属关系一目了然
• 三种视图：交互式 Tree、格式化 Formatted、原始 Raw 随时切换
• 三种主题：跟随系统 / 深色 / 浅色

自动检测与页面接管逻辑见 src/content.ts，树形渲染核心在 src/viewer.ts。

快速安装：3 步装进浏览器

Chrome

1. 打开chrome://extensions
2. 开启右上角Developer mode
3. 点击Load unpacked，选择项目中的dist文件夹

Firefox

1. 打开about:debugging#/runtime/this-firefox
2. 点击Load Temporary Add-on...，选择dist里的 manifest.json
3. 关闭内置查看器：在about:config中把devtools.jsonview.enabled设为false，否则扩展无法接管 JSON 页面

构建脚本定义在 package.json：npm run build产出dist目录，npm run zip还能直接生成可分发的压缩包。

层级按钮：一键把巨型 JSON 折叠到任意深度

工具栏顶部有一排层级按钮1、2、3 … All（最多 8 个数字按钮）。点击任一数字，整棵树立即折叠到对应深度；点All则全部展开。

推荐调试姿势：

1. 先点1，只看接口响应的顶层结构，快速判断目标字段在哪个模块
2. 再点2或3，逐步放大到目标模块
3. 需要细看时，用行首小箭头单独展开

批量折叠由collapseToLevel()实现：src/viewer.ts。每行节点都带有data-depth深度标记，点击按钮后深度达到目标的行被整体收起——所以即使上千行也能瞬间完成。

💡小技巧：每个对象/数组行旁还有内联⇕ children按钮，一键批量展开或收起该节点下的所有子层（src/viewer.ts），比逐个小箭头点击高效得多。

悬停看路径，点击即固定：JSON path 一秒到手

这是定位字段最省时间的功能 📌：

• 悬停任意一行→ 工具栏立刻显示该行的完整 JSON 路径（如data[1].address.city），同时高亮该行及整条祖先链
• 点击该行→ 路径被固定在工具栏，鼠标移走也不会消失
• 点 Copy→ 路径复制到剪贴板，按钮短暂显示 "Copied!"
• 按 Esc→ 取消固定，回到悬停模式

路径遵循 JSONPath 风格：普通字段用点号a.b，数组元素用方括号a[0]，非常规键名自动带引号a["weird-key"]。生成逻辑见buildPath()：src/viewer.ts；悬停高亮、点击固定与复制的完整实现在setupHoverPath()：src/viewer.ts。

另外，每个对象/数组行还有内联⧉ copy按钮，可直接复制该节点的格式化值——贴进 bug 单或文档特别方便。

图中data[1].address.city已固定在工具栏；手部图标是 Settings（⚙）里开启的自定义指针。

调试再提速：console 里的 window.data

扩展会把解析好的 JSON 注入页面，你可以直接在控制台以window.data取到完整数据：

window.data[1].address.city // "Wiscoskyburgh"

控制台还会打印[JSON Alexander] Data available as window.data提示，注入逻辑见 src/page-script.ts。和"路径固定"搭配起来就是一套丝滑流程：悬停找到字段 → 点击固定拿到路径 → 切到控制台取值验证。

总结：巨型 JSON 定位字段三步法

功能速查表：

JSON Alexander 把"翻 JSON"这件体力活变成了 3 秒钟的操作，下次调试 API 时不妨试试，用过就回不去了 ✨

<输出文章结束> </输出文章>

等等，我发现结尾多了一个标签，让我重新输出正确格式的文章。

<输出文章>

如何在巨型JSON中快速定位字段：用JSON Alexander层级按钮与路径固定高效调试API

调试 API 时，接口返回的巨型 JSON 动辄上千行，翻来翻去找一个字段让人抓狂。JSON Alexander是一款免费的 JSON viewer 浏览器扩展：它能自动接管任何返回 JSON 的页面，变成可交互的树形视图，配合层级按钮与路径固定功能，让你秒级定位字段、一键复制 JSON path。

是什么：开箱即用的 JSON 查看器扩展

无需任何配置，在浏览器打开任意返回 JSON 的接口地址，扩展会自动检测响应并接管页面，把原始文本变成：

• 树形视图🌳：可折叠/展开的层级结构，键名、字符串、数字、布尔值、null 均语法高亮
• 信息栏：一眼看到总节点数与层级深度（如191 nodes · 4 levels deep）
• 缩进参考线：悬停高亮，嵌套字段的归属关系一目了然
• 三种视图：交互式 Tree、格式化 Formatted、原始 Raw 随时切换
• 三种主题：跟随系统 / 深色 / 浅色

自动检测与页面接管逻辑见 src/content.ts，树形渲染核心在 src/viewer.ts。

快速安装：3 步装进浏览器

Chrome

1. 打开chrome://extensions
2. 开启右上角Developer mode
3. 点击Load unpacked，选择项目中的dist文件夹

Firefox

1. 打开about:debugging#/runtime/this-firefox
2. 点击Load Temporary Add-on...，选择dist里的 manifest.json
3. 关闭内置查看器：在about:config中把devtools.jsonview.enabled设为false，否则扩展无法接管 JSON 页面

构建脚本定义在 package.json：npm run build产出dist目录，npm run zip还能直接生成可分发的压缩包。

层级按钮：一键把巨型 JSON 折叠到任意深度

工具栏顶部有一排层级按钮1、2、3 … All（最多 8 个数字按钮）。点击任一数字，整棵树立即折叠到对应深度；点All则全部展开。

推荐调试姿势：

1. 先点1，只看接口响应的顶层结构，快速判断目标字段在哪个模块
2. 再点2或3，逐步放大到目标模块
3. 需要细看时，用行首小箭头单独展开

批量折叠由collapseToLevel()实现：src/viewer.ts。每行节点都带有data-depth深度标记，点击按钮后深度达到目标的行被整体收起——所以即使上千行也能瞬间完成。

💡小技巧：每个对象/数组行旁还有内联⇕ children按钮，一键批量展开或收起该节点下的所有子层（src/viewer.ts），比逐个小箭头点击高效得多。

悬停看路径，点击即固定：JSON path 一秒到手

这是定位字段最省时间的功能 📌：

• 悬停任意一行→ 工具栏立刻显示该行的完整 JSON 路径（如data[1].address.city），同时高亮该行及整条祖先链
• 点击该行→ 路径被固定在工具栏，鼠标移走也不会消失
• 点 Copy→ 路径复制到剪贴板，按钮短暂显示 "Copied!"
• 按 Esc→ 取消固定，回到悬停模式

路径遵循 JSONPath 风格：普通字段用点号a.b，数组元素用方括号a[0]，非常规键名自动带引号a["weird-key"]。生成逻辑见buildPath()：src/viewer.ts；悬停高亮、点击固定与复制的完整实现在setupHoverPath()：src/viewer.ts。

另外，每个对象/数组行还有内联⧉ copy按钮，可直接复制该节点的格式化值——贴进 bug 单或文档特别方便。

图中data[1].address.city已固定在工具栏；手部图标是 Settings（⚙）里开启的自定义指针。

调试再提速：console 里的 window.data

扩展会把解析好的 JSON 注入页面，你可以直接在控制台以window.data取到完整数据：

window.data[1].address.city // "Wiscoskyburgh"

控制台还会打印[JSON Alexander] Data available as window.data提示，注入逻辑见 src/page-script.ts。和"路径固定"搭配起来就是一套丝滑流程：悬停找到字段 → 点击固定拿到路径 → 切到控制台取值验证。

总结：巨型 JSON 定位字段三步法

功能速查表：

JSON Alexander 把"翻 JSON"这件体力活变成了 3 秒钟的操作，下次调试 API 时不妨试试，用过就回不去了 ✨