JSON Viewer 三步用起来：让 Chrome 自动高亮 JSON 的完整实战指南

JSON Viewer 三步用起来让 Chrome 自动高亮 JSON 的完整实战指南【免费下载链接】json-viewerIt is a Chrome extension for printing JSON and JSONP.项目地址: https://gitcode.com/gh_mirrors/js/json-viewer在浏览器里打开 API 接口返回的 JSON 挤成一行天书你得手动复制进格式化工具再贴回来。JSON Viewer 是一个 Chrome 扩展它会自动识别并格式化页面上的 JSON 与 JSONP 内容调试时接口响应自动缩进、按类型着色不关心的节点还能一键折叠。两分钟先看到格式化效果装好扩展后随便打开一个返回 JSON 的 API 地址你会看到这样的页面它把一行一行要眯眼看的天书变成了有层级、有色块、可折叠的结构顶部的按钮还能在格式化视图和原始响应之间来回切换。三步从源码构建并加载到 Chrome喜欢从源码构建的话下面三步就够克隆仓库并安装依赖git clone https://gitcode.com/gh_mirrors/js/json-viewer cd json-viewer yarn install构建扩展产物在build/json_viewer目录yarn run build打开chrome://extensions/右上角打开开发者模式点击加载已解压的扩展程序选中build/json_viewer目录。刷新任意 JSON 页面即可生效。一天的使用路径从打开接口到查字段上午调接口打开接口地址响应自动格式化用全部折叠按钮把二级及以下节点折掉只看一级结构掌握全貌。下午看大 JSON文件太大渲染慢时在选项里限制最大高亮体积或关掉自动高亮、手动触发。路上想格式化一段地址栏输入json-viewerTAB把 JSON 直接粘进去立即高亮再输入scratch pad则打开可编辑区同一段 JSON 可以反复编辑、反复格式化。晚上查某个字段页面控制台输入json拿到解析后的对象直接找字段或者点顶部 raw 按钮切回原始视图用浏览器自带搜索定位。按场景拆功能它们各自帮你做什么看又深又大的 JSON节点可以在任意层级折叠默认展开深度可选配合行号、制表符宽度和 C 风格花括号贴合你读代码的习惯。格式化视图和它顶部的切换按钮都组装在 extension/src/json-viewer/viewer/。处理 JSONP 和脏数据有些接口在 JSON 外包一层回调还爱带while(1);或for(;;)尾巴扩展会在解析前用正则剥掉这些外壳URL 不是.json结尾也能高亮。这段核心逻辑就是几行替换在 extension/src/json-viewer/extract-json.js。切换外观与主题内置 27 个主题浅色系从低调的base16-light到coy深色系有dracula、monokai、material等在选项页一次切换缩进大小也能跟着主题一起微调。全部主题文件放在 extension/themes/ 下想加新主题照着抄一份 scss 就行。两个值得学的设计细节大数字不变科学计数超过Number.MAX_VALUE的数字渲染时按字符串保留长 ID 和时间戳不会被变成1e21这种失真形式。用JSON来配置自己主题、缩进、折叠深度在选项页里都是 JSON 键值保存时先校验 JSON 合法性、不合法直接报错——这个工具本身就是怎么读 JSON的示范。排障速查扩展不生效的高频问题Q打开页面不格式化A确认页面确实包含 JSON 内容本地文件的话先在扩展页勾选允许访问文件网址。Q更新后访问本地文件失效A重新勾选允许访问文件网址——更新后旧后台进程有时会把这项权限撤掉。Q和其他 JSON 高亮扩展冲突A禁用其他 JSON 格式化类扩展两个内容脚本改写同一段代码会互相打架。Q想恢复出厂设置A选项页点重置为默认。Q隐身模式不生效A在扩展管理页打开在隐身模式下启用。下次打开 API 文档或接口响应把缩进和着色交给 JSON Viewer你只管看数据。【免费下载链接】json-viewerIt is a Chrome extension for printing JSON and JSONP.项目地址: https://gitcode.com/gh_mirrors/js/json-viewer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考