秒变清晰JSON Viewer让Chrome自动美化高亮JSON/JSONP 【免费下载链接】json-viewerIt is a Chrome extension for printing JSON and JSONP.项目地址: https://gitcode.com/gh_mirrors/js/json-viewer调试接口时返回的 JSON 常常是一整行压缩数据几千个字符挤在屏幕里肉眼几乎不可读。JSON Viewer 是一款 Chrome 扩展它会自动识别页面里的 JSON/JSONP 内容把内容格式化成带缩进的树形结构配上语法高亮、行号和可折叠节点。你不用在控制台里手动复制粘贴、也不用再装任何后处理工具打开页面它就直接生效。JSON Viewer 跑起来长什么样下图演示的是直接访问一个返回 JSON 的 API 地址原本一整行的压缩数据被自动渲染成带行号、彩色高亮、可折叠的树形视图页面顶部还带了时间戳和来源 URL 的注释头。它替你省了什么事自动识别并美化 JSON 响应收益任何返回 JSON 的 API 页面打开即读无需人工干预。检测逻辑不看 URL而是分析页面内容本身pre标签里的纯文本 JSON、甚至 Content-Type 标成 text/html 的响应都能命中判断过程见 check-if-json.js同样支持 JSONP会自动剥掉外层 callback 函数再按 JSON 处理超过maxJsonSize阈值的响应会跳过不渲染避免卡死浏览器一键切换 27 种高亮主题收益深色、浅色、护眼色随你换还能写自己的 CSS。内置 27 个主题从 base16-light 到 dracula 深浅色系都覆盖除了选主题选项页还支持直接编辑一段自定义 CSS 覆盖默认样式默认值集中定义在 defaults.js想看哪些开关可调这里就是全貌折叠展开节点并随时切回原始视图收益大 JSON 不用滚动到底结构一眼看清。节点支持点击折叠/展开也可以配置从第二层起默认全部折叠右上角 RAW 按钮一键切回格式化前的原始文本再点一次回来行号、行内换行、C 风格大括号数组等显示细节都能单独开关三步跑通获取代码把仓库克隆到本地git clone https://gitcode.com/gh_mirrors/js/json-viewer构建并加载到 Chrome。安装依赖后执行构建yarn install yarn run build打开chrome://extensions/开启右上角开发者模式点加载已解压的扩展程序选择build/json_viewer目录。做对了应看到什么扩展列表里出现 JSON Viewer 卡片版本 0.18.1再访问任意返回 JSON 的 API 地址页面自动变成带行号的高亮树形视图顶部多了一行时间戳注释。按你的习惯微调扩展详情页点扩展选项即可进入设置面板最高频的三个配置项配置项作用推荐值theme高亮主题深色系看 dracula白天看 base16-lightmaxJsonSize可高亮的 JSON 大小上限KB默认 400调试大文件时按需调大tabSize缩进宽度默认 2团队约定 4 就改成 4进阶一点在地址栏输入json-viewer后按 TAB粘贴一段 JSON 再回车内容会被直接格式化展示——这个 omnibox 热词不用打开任何网页。想反复编辑某段数据再输json-viewer TAB scratch pad会进入一个内置的 CodeMirror 编辑器改完点 Format 按钮即时重新格式化。另外格式化后的页面在控制台输入json就能拿到当前展示的数据对象调试时直接引用省掉手动复制。踩坑急救包 扩展更新后不生效本地文件也不高亮了→ 排查Chrome 更新扩展后可能让旧后台进程继续驻留顺带回收了允许访问文件网址等权限 → 解法在chrome://extensions/刷新一次扩展重新勾选本地文件访问权限即可。大 JSON 文件原样显示没有高亮→ 排查查看页面顶部提示多半是响应超过了maxJsonSize默认 400KB被主动跳过 → 解法在选项页 Add-ons 区把maxJsonSize调大或对该文件不追求格式化。同时装了两个 JSON 高亮扩展页面错乱甚至崩溃→ 排查内容脚本会互相改写 DOM → 解法只保留 JSON Viewer禁用另一个高亮类扩展后刷新页面。曾让你抓狂的一整行压缩 JSON现在打开页面就是可读的树。去项目仓库提一个 issue说说你最想加的那个开关。【免费下载链接】json-viewerIt is a Chrome extension for printing JSON and JSONP.项目地址: https://gitcode.com/gh_mirrors/js/json-viewer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考