前端开发工具【免费下载链接】FeHelperFeHelper--Web前端助手AwesomeChrome Firefox MS-Edge Extension, All in one Toolbox!项目地址https://gitcode.com/gh_mirrors/fe/FeHelper点击查看免费下载FeHelperWeb 前端助手内置的 JSON 格式化工具是面向 Web 开发者的全功能 JSON 处理面板不仅能一键完成格式化、压缩、语法校验还内置了 JSONP 识别、URL/Unicode 自动解码、BigInt 大数精度保护、按键排序、节点级复制/下载/编辑以及 JSONPath 提取、表格视图与基于 Chrome 内置 Gemini Nano 的本地 AI 修复/类型生成能力。阅读本文后你将掌握该工具的完整操作路径、每一项开关的真实作用以及其底层宽松解析 → BigInt 还原 → 嵌套解码 → 排序 → 安全序列化的完整处理管线可直接套用到自己的 JSON 调试与接口联调工作中。一、工具定位与功能全景JSON 格式化工具是 FeHelper 提供的核心 JSON 数据处理工具帮助开发者快速完成 JSON 的美化格式化、压缩、校验、乱码解码、按键排序、BigInt 处理、JSONPath 提取与表格化阅读。它同时具备两种存在形态手动工具页在 FeHelper 工具市场中打开独立的 JSON 格式化页面apps/json-format/index.html粘贴 JSON 后手动格式化页面自动格式化通过内容脚本apps/json-format/content-script.js在浏览器直接访问.json接口地址时自动把纯文本 JSON 渲染成可折叠、可高亮的树形视图并常驻顶部工具栏。从功能类别看工具覆盖四大部分类别能力清单基础格式化自动格式化、手动格式化按钮、单行压缩、语法校验JSONLint高级处理JSONP 识别与解包、URL/Unicode 自动解码、BigInt 精度保护、节点级编辑/复制/下载、默认/升序/降序按键排序编码转换Unicode 编码、Unicode 解码、URL 解码进阶阅读JSONPath 查询提取、表格视图、本地 AI 结构体检 / TS 类型 / JSON Schema / Zod 生成二、界面布局Lite / Omni 双模式与左右 / 上下双布局1. Lite 与 Omni 两种模式工具页在apps/json-format/index.html中通过 Vue 的uiMode字段切换两种模式Lite精简模式默认顶部只保留格式化 / 压缩主按钮、左右/上下布局切换和排序单选组适合快速处理Omni全功能模式在 Lite 基础上增加完整工具栏——JSONLint、自动解码、节点编辑、嵌套解析四个开关Uni 编码 / Uni 解码 / URL 解码三个转换按钮以及JSON 片段 / 在线 JSON / Mock 数据 / 工具市场入口。模式切换通过setUiMode()写入chrome.storage.local的JSON_FORMAT_UI_MODE键FH_UI_MODE为全局产品模式兜底刷新后仍然保持见 index.js 中loadUiMode实现。Omni 模式的解析结果区还会出现提取JSONPath、表格、AI三个进阶动作按钮。2. 左右 / 上下布局通过changeLayout(type)在left-right与up-down之间切换并持久化到 localStorage 的local-layout-key键左右布局输入区在左、解析结果在右适合宽屏显示器上下布局输入区在上、结果区在下适合窄屏或浏览器窗口较矮的场景。切换后页面容器会挂载layout-left-right/layout-up-down类并调用 CodeMirror 的refresh()保证编辑器重排正确。三、基础使用格式化、压缩与语法校验1. 基本操作流程在输入框CodeMirror 编辑器#jsonSource粘贴待处理的 JSON 数据点击格式化按钮或直接等待自动格式化触发见下文实时格式化解析结果展示在右侧左右布局或下方上下布局支持折叠/展开、元数据视图与纯文本 JSON 视图切换。2. 压缩点击压缩后工具会先执行一次format()然后把格式化结果的安全序列化文本回写到输入框实现一行 JSON。该行为由compress()方法配合disableEditorChange()实现见 index.js。3. JSONLint 语法校验与错误定位默认开启的JSONLint开关存储键jsonformat:json-lint-switch使用 Jison 生成的严格解析器apps/json-format/json-lint.js。当输入不合法时结果面板会给出精确错误位置错误位置N行M列缺少字符或字符不正确并高亮出错片段反斜杠专项提示当错误信息包含Invalid escape/Unexpected token/Bad escaped character且原文含\时工具会额外提示JSON 字符串中的反斜杠需要写成\\例如 Windows 路径应写为\C:\\a\\b\原文兜底解析失败时提供查看原文预览按钮超大响应超过 12000 字符默认只展示前 12000 字符避免失败态拖慢页面。提示格式化过程中的解析并非只走严格 JSON 解析而是走宽松修正管线见第五节因此 JSONLint 更常用于验证修正前的原始文本是否标准。四、高级处理功能逐个拆解1. JSONP 自动识别与解包在format()中工具首先用正则/^([\w\.])\(\s*([\s\S]*)\s*\)$/判断输入是否为callbackName({...})形式的 JSONP匹配成功则取出callbackNamefuncName只对其中的 JSON 主体做解析格式化完成后结果区上下会分别渲染callbackName(与)还原完整 JSONP 形态jfCallbackName_start/jfCallbackName_end复制或下载时也保持完整包裹。2. 自动解码URL 编码 Unicode 解码勾选自动解码存储键jsonformat:auto-decode后格式化流程会追加两个步骤JsonEnDecode.urlDecodeByFetch(source)通过data:text/javascript;charsetutf8的 fetch 方式做 URL 解码兼容各种编码场景见 json-decode.jsJsonEnDecode.uniDecode(txt)把\uXXXX形式的 Unicode 转义还原为可读字符。这适合处理接口返回的被双重编码的 JSON如日志中看到的%7B%22...%22%7D或\u5f00\u53d1之类内容。3. 嵌套解析字符串中的内嵌 JSON开启嵌套解析存储键jsonformat:nested-escape-parse后工具会递归扫描对象/数组的值unpackTopLevelEscapedJSON()若顶层本身是被转义成字符串的 JSON先解包一层deepParseJSONStrings()对任意字符串值尝试JSON.parse成功且结果是对象/数组的递归展开成真实节点。这对接口把整个 JSON 当字符串塞在字段里的场景非常有效。若开启后反而解析失败例如普通字符串被误判结果区会提供关闭嵌套解析后重试的一键降级按钮。4. BigInt 大数精度保护重点JSON 标准数字在 JavaScript 中受Number双精度限制超过 15 位精度的整数如995815895020119788889会被舍入失真。本工具通过双保险解决解析侧parseWithBigInt()见 format-lib.js 与 json-auto-utils.js先把引号外16 位及以上的整数字面量标记为__BigInt__xxx再用JSON.parse的 reviver 还原为原生BigInt15 位及以下保持number不引入额外开销序列化侧safeStringify()用占位符策略__FH_BIGINT__、__FH_NUMSTR__、__FH_BIGNUM__让 BigInt、科学计数法大数、json-bigint 的{s,e,c}结构都还原为不带引号的纯数字文本保证格式化后能再次被解析且不丢精度排序侧JsonABC.sortObj显式跳过JSON.BigNumber实例避免大数对象参与字符串比较导致意外结果见 json-abc.js。对应回归测试见 test/json-utils.test.js验证了 16 位及以上整数、负大整数、科学计数法、BigNumber duck-type 还原等场景{id: 995815895020119788889}解析后等于BigInt(995815895020119788889)。5. 节点编辑开启节点编辑开关存储键jsonformat:edit-on-click后点击格式化结果中的任意节点该节点文本会回填到输入框通过window._OnJsonItemClickByFH回调方便对单个片段做再处理。此外每个节点悬停时提供三个操作复制仅复制当前节点含其子节点的 JSON下载把当前节点片段下载为FeHelper-时间戳.json优先走chrome.downloads沙盒环境降级为弹窗展示原文删除从结果树中删除当前节点。6. 按键排序排序单选组支持三种模式Omni 与 Lite 均有值模式行为0默认保持原始顺序1升序对象键名按字典序升序toLowerCase后比较-1降序对象键名按字典序降序排序由JsonABC.sortObj(jsonObj, parseInt(sortType), true)执行第三个参数noarraytrue表示不排序数组内部顺序仅排序对象键且选择后立即触发format()重新渲染。五、编码转换按钮Omni 工具栏提供三个转换按钮作用对象都是输入框全文Uni 编码JsonEnDecode.uniEncode()把中文、符号等转为\uXXXX保留{}[]:,等 JSON 结构字符见 json-decode.js 中的白名单替换逻辑Uni 解码JsonEnDecode.uniDecode()把\uXXXX还原为原始字符URL 解码JsonEnDecode.urlDecodeByFetch()对全文做 URL 解码适合处理%编码的报文。六、JSONPath 提取与表格视图解析成功且结果是对象/数组时结果区右上角出现两个进阶入口1. JSONPath 提取点击提取打开查询弹窗支持一套内置 JSONPath 引擎queryJsonPath/evaluateJsonPath见 index.js内置示例包括$ 根对象 $.data 获取 data 属性 $.data.* 获取 data 下所有属性 $.data[0] data 数组第一个元素 $.data[*] data 数组所有元素 $.data[?(.name)] 过滤有 name 属性的元素 $..name 递归查找所有 name 属性 $.data[0:3] 数组切片前 3 个元素 $.data[-1] 最后一个元素负索引查询结果以表格列出序号 / Path / 类型 / 值预览并支持复制值 JSON、复制路径、复制明细 JSON、下载 JSON单个结果行也可单独复制路径或值。文件名会根据表达式自动生成如$.data.items[*].name→jsonpath_data_items__name.json。2. 表格视图点击表格openTableViewModal table-utils.js把 JSON 转成更易阅读的表格数组型数据 →网格表格列 字段行 数组元素并展示来源路径$...单对象数据 →键值对表格字段 / 值。七、本地 AI 能力修复、体检与类型生成解析结果区集成基于Chrome 内置 Gemini Nano本地执行不会静默上传云端的 AI 动作详见 index.js 中JSON_DERIVED_AI_TASKS与 test/json-format-ai-actions.test.jsAI 修复仅当解析失败时出现AI 解释错误原因、定位可疑位置并生成可应用的合法 JSON应用前会用本地parseWithBigInt再次校验且要求输入快照未变化防止误覆盖结构体检扫描根类型、节点数、nullable 字段、数组可选字段、类型不稳定字段、混合数组、超深嵌套6 层等输出结论 / 风险字段 / 建议TS 类型根据样例保守推断并生成可复制到项目中的ts类型定义根类型RootJSON Schema按 JSON Schema Draft 2020-12 生成required只包含样例中稳定出现的字段Zod Schema生成import { z } from zod风格的可复用校验代码RootSchematype Root z.infertypeof RootSchema。AI 可用性通过AI.getBuiltInAvailability()检测状态包括checking / unsupported / unavailable / downloadable / downloading / available模型未就绪时面板会明确提示FeHelper 不会在本地模型不可用时把 JSON 自动发送到云端。八、页面自动格式化与可配置项在浏览器中直接打开.json接口地址时apps/json-format/content-script.js会接管页面并注入自动格式化 UI。其行为由后台脚本 apps/background/background.js 中requestJsonformatOptions维护的一组默认配置驱动配置键默认值说明JSON_PAGE_FORMATtrue总是开启 JSON 页面自动格式化JSON_TOOL_BAR_ALWAYS_SHOWtrue总是显示顶部工具栏STATUS_BAR_ALWAYS_SHOWfalse启用底部状态栏节点路径/类型预览AUTO_TEXT_DECODEfalse自动进行 URL / Unicode 解码FIX_ERROR_ENCODINGtrue修正乱码编码ENABLE_JSON_KEY_SORTtrue启用 JSON 键排序KEEP_KEY_VALUE_DBL_QUOTEtrue保留键值双引号NESTED_ESCAPE_PARSEfalse嵌套转义解析JSON_FORMAT_COMPACT_MODEtrue紧凑视图模式JSON_FORMAT_EXCLUDED_ORIGINS排除自动格式化的站点MAX_JSON_KEYS_NUMBER10000最大 JSON 键数量超限不再渲染JSON_FORMAT_THEME0渲染皮肤编号FH_UI_MODE/JSON_FORMAT_UI_MODEliteLite / Omni 模式自动格式化页面的皮肤主题定义在 content-script.js 的SKIN_THEME中0默认、1simple、2light、3dark、4vscode、5github、6vegetarian。后台脚本还内置了配置迁移逻辑FH_JSONFORMAT_DEFAULTS_MIGRATED/FH_JSONFORMAT_FIX_ENCODING_RESTORED标记老用户升级后自动补全新默认值相关行为由 test/json-format-settings.test.js 回归守护。九、底层原理一条完整的解析 → 转换 → 渲染管线从源码看手动工具页一次格式化的完整链路为index.js 的format()→ format-lib.js 的Formatter.format()宽松修正normalizeLooseJSONSource()只把引号外的单引号键、裸键如{name: x}补成标准双引号不破坏字符串内部内容JSONP 解包提取funcName(...)中的主体BigInt 安全解析parseWithBigInt()标记大整数 → reviver 还原 BigInt嵌套转义解析可选unpackTopLevelEscapedJSON/deepParseJSONStrings递归展开字符串内嵌 JSON排序可选JsonABC.sortObj按键升/降序重排安全序列化safeStringify()用占位符技术输出不丢精度的文本编码还原可选URL 解码 Unicode 解码异步渲染优先创建Workerapps/json-format/json-worker.js异步渲染大 JSON遇到 CSP 限制、沙盒环境或 5 秒超时自动回退到同步formatSync保证任何环境下都能出结果。渲染结果支持折叠/展开全部节点、元数据/纯文本视图切换、全文复制以及基于节点的多语言 JSONPath 提示JavaScript / PHP / Python / Java / C# / Go / Ruby / Swift 八种语言格式见 format-lib.js 的_formatJsonPath选中即得可直接粘贴的取值代码。十、使用技巧与注意事项快速格式化输入框内容变化即自动触发格式化editor.on(change)→this.format()无需手动点击在自动格式化页面上Ctrl A可全选格式化结果Ctrl C直接复制全文Esc退出选择态大 JSON 处理建议用压缩模式减小体积自动格式化页面受MAX_JSON_KEYS_NUMBER默认 10000保护超限不渲染避免卡死编辑安全手动编辑节点时注意保持 JSON 合法性若输入含未转义反斜杠如 Windows 路径C:\a\b必须先写成C:\\a\\b否则 JSONLint 会报Invalid escape自动解码前提确保原始数据确实是 URL / Unicode 编码过的对普通文本开启会改变原文语义BigInt 精度数值超过 15 位时以bigint类型处理复制出的仍是纯数字文本排序时大数不参与键排序避免{s,e,c}结构被误比较嵌套解析取舍接口把 JSON 当字符串返回时开启普通字符串场景若解析异常可一键关闭重试。十一、常见问题Q: 为什么我的 JSON 格式化后显示错误A: 请先检查原始数据是否符合标准格式键名必须用双引号包围、不能使用单引号、不能有多余逗号、括号必须配对若原文含反斜杠需要双写转义。JSONLint 会给出精确的行列位置。Q: 如何处理包含特殊字符的 JSONA: 使用工具栏的Uni 编码把特殊字符转为\uXXXX对已编码数据使用自动解码或Uni 解码 / URL 解码还原。Q: 为什么我的 BigInt 数据格式化后发生了变化A: 正常情况下不会——工具对 16 位及以上整数全程以 BigInt 处理并在序列化时还原为纯数字文本若仍发现变化请确认原始数据本身就是字符串化的数字或数据在进入工具前已被其他程序截断。Q: JSONP 数据能直接格式化吗A: 可以。工具自动识别callback({...})形态并剥离方法名格式化结果会以callback( 格式化 JSON )的形式完整还原。Q: AI 按钮什么时候出现A: AI 修复仅在解析失败时出现结构体检 / TS 类型 / Schema / Zod仅在解析成功且使用 Chrome 内置 Gemini Nano本地可用时出现默认不联网上传数据。十二、相关工具JSON 比对工具比较两个 JSON 数据的差异定位结构变更代码美化工具支持多种编程语言的代码格式化信息编码转换支持多种编码格式的转换与本文的 Uni/URL 解码互补。赞分享前端开发工具【免费下载链接】FeHelperFeHelper--Web前端助手AwesomeChrome Firefox MS-Edge Extension, All in one Toolbox!项目地址https://gitcode.com/gh_mirrors/fe/FeHelper点击查看免费下载相关推荐JSON格式化、压缩、一键修复JSONEditor代码模式与Ace编辑器深度整合实战JSON格式化、压缩、一键修复JSONEditor代码模式与Ace编辑器深度整合实战 JSONEditorjsoneditor是一款强大的 Web 端 J前端UI组件FeHelper 代码美化工具实战指南一站式格式化 JavaScript、CSS、HTML、XML 与 SQLFeHelper 代码美化工具实战指南一站式格式化 JavaScript、CSS、HTML、XML 与 SQL 导读 本文围绕 FeHelper 扩展中的「代前端开发工具GNvim光标动画与滚动效果打造流畅的Neovim GUI编辑体验GNvim光标动画与滚动效果打造流畅的Neovim GUI编辑体验 GNvim是一款基于GTK4的Neovim图形用户界面它通过 光标动画 和 滚动效果 为开发工具桌面应用上一篇3大核心优势Umi-OCR让文字识别从繁琐到高效的智能革命下一篇如何永久保存微信聊天记录5分钟掌握数据留痕终极方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考