json formatter

JSON 格式化程序 - 原始版本

当您在浏览器选项卡中查看 JSON 时，Chrome 扩展程序会自动格式化 JSON。

特征

• 即使在很长的 JSON 页面上也很快
• 深色模式
• 语法高亮
• 可折叠的树，带有缩进指南
• 可点击的网址
• 对非 JSON 页面的性能影响可以忽略不计（小于 1 毫秒）
• 适用于任何有效的 JSON 页面 – URL 并不重要
• 用于在原始 JSON 和解析 JSON 之间切换的按钮
• 解析后的 JSON 导出为全局变量json ，因此您可以在控制台中检查它*

*自 Manifest v3 以来，在控制台中输入json不起作用。如果您需要解决方法，请将此代码段粘贴到控制台中：

 json = JSON . parse ( document . getElementById ( "jsonFormatterRaw" ) . querySelector ( "pre" ) . innerText )

一些用于测试它的 JSON 文档：https ://callumlocke.github.io/json-formatter/

安装

选项 1（推荐） - 从 Chrome 网上应用店安装。

选项 2 – 从源代码安装（见下文）。

发展

要求： Deno（现在是 Node）。

初始设置：

• 克隆仓库
• 运行pnpm i获取 chrome 的 TypeScript 类型（如果您愿意，也可以使用npm i ）
• 可选：如果使用 VSCode 并且您需要弄乱 Deno 构建脚本，请安装官方 Deno 插件并设置"deno.enablePaths": ["tasks"] 。

构建它：

• 运行deno task build

每当文件更改时构建和重建：

• 运行deno task dev

将本地版本安装到 Chrome

• 打开 Chrome 并转到chrome://extensions
• 启用“开发者模式”，
• 点击“加载解压”，
• 选择您上面构建的dist文件夹。

常问问题

为什么大数字显示不准确？

这是 JavaScript 的限制，因此也是 Web 浏览器解释的 JSON 的限制。

• 任何高于Number.MAX_SAFE_INTEGER （ 2^53 - 1或9007199254740991 ）的值都会向下调整到该数字。
• Number.MIN_SAFE_INTEGER以下的任何内容（ -2^53 + 1或-9007199254740991 ）都会调整到该数字。
• 极其精确的浮点数四舍五入为 16 位数字。

这不是 JSON Formatter 做的，而是 V8 中的原生JSON.parse 。 JSON Formatter 向您显示解析后的值，与您在 JavaScript 中加载 JSON 后看到的内容完全相同。

如果您的 API 端点确实需要表示 JavaScript 安全范围之外的数字，则应该将它们作为 strings 引用。

为什么对象键有时顺序错误？

您在 JSON Formatter 中看到的是已解析对象/数组的表示。这与 JavaScript 中的Object.keys( JSON.parse(json) )得到的顺序相同。

从历史上看，JavaScript 标准明确指出对象键可以按任何顺序迭代，V8 通过将数字字符串键（如"1"或"99999" ）移动到顶部来促进小的性能优化，从而利用了这一点。此 V8 实现细节已成为标准化。

但我只是想看看服务器到底吐出什么

目前，您最好的选择是仅使用“Raw”按钮来查看原始 JSON。这是服务器发送的内容。 “Parsed”按钮代表您将从JSON.parse获得的内容。

将来，JSON Formatter 可能会从使用JSON.parse切换到自定义解析器（如果性能允许），以便检测值何时通过解析“更改”并显示适当的警告。