json formatter

Formateador JSON: el original

Extensión de Chrome que formatea automáticamente JSON cuando lo ve en una pestaña del navegador.

Características

• Rápido , incluso en páginas JSON muy largas
• modo oscuro
• Resaltado de sintaxis
• Árboles plegables, con guías de sangría.
• URL en las que se puede hacer clic
• Impacto insignificante en el rendimiento en páginas que no son JSON (menos de 1 milisegundo)
• Funciona en cualquier página JSON válida: la URL no importa
• Botones para alternar entre JSON sin formato y analizado
• El JSON analizado se exporta como una variable global, json , para que puedas inspeccionarlo en la consola. *

*Escribir json en la consola no funciona desde Manifest v3. Si necesita una solución, pegue este fragmento en la consola:

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

Algunos documentos JSON para probarlo en: https://callumlocke.github.io/json-formatter/

Instalación

Opción 1 (recomendada) : instálelo desde Chrome Web Store.

Opción 2 : instalarlo desde la fuente (ver más abajo).

Desarrollo

Requisitos: Deno (y Node por ahora).

Configuración inicial:

• Clonar repositorio
• Ejecute pnpm i para obtener tipos de TypeScript para Chrome (o use npm i si lo prefiere)
• Opcional: si usa VSCode y necesita modificar los scripts de compilación de Deno, instale el complemento oficial de Deno y configure "deno.enablePaths": ["tasks"] .

Para construirlo:

• Ejecute deno task build

Para construir y reconstruir cada vez que los archivos cambian:

• Ejecute deno task dev

Para instalar su compilación local en Chrome

• Abra Chrome y vaya a chrome://extensions
• Habilite el "modo desarrollador",
• Haga clic en "Cargar descomprimido",
• Seleccione la carpeta dist que creó anteriormente.

Preguntas frecuentes

¿Por qué los números grandes no se muestran con precisión?

Esta es una limitación de JavaScript y, por lo tanto, una limitación de JSON según lo interpreta su navegador web.

• Todo lo que esté por encima de Number.MAX_SAFE_INTEGER ( 2^53 - 1 o 9007199254740991 ) se ajusta a ese número.
• Todo lo que esté debajo de Number.MIN_SAFE_INTEGER ( -2^53 + 1 o -9007199254740991 ) se ajusta hasta ese número.
• Los números de coma flotante extremadamente precisos se redondean a 16 dígitos.

No es JSON Formatter el que hace esto, es el JSON.parse nativo en V8. JSON Formatter le muestra los valores analizados , exactamente lo mismo que verá después de cargar el JSON en JavaScript.

Si su punto final API realmente necesita representar números fuera del rango seguro de JavaScript, debe citarlos como cadenas .

¿Por qué a veces las claves de los objetos están en el orden incorrecto?

Lo que ve en JSON Formatter es una representación del objeto/matriz analizados . Es el mismo orden que obtendrás con Object.keys( JSON.parse(json) ) en JavaScript.

Históricamente, el estándar JavaScript establecía explícitamente que las claves de objetos se pueden iterar en cualquier orden, y V8 aprovechó esto moviendo claves de cadena numéricas (como "1" o "99999" ) a la parte superior para facilitar una pequeña optimización del rendimiento. Desde entonces, este detalle de implementación de V8 se ha estandarizado.

Pero sólo quiero ver exactamente lo que escupe el servidor.

Por ahora, su mejor opción es simplemente usar el botón "Sin formato" para ver el JSON sin formato. Esto es lo que envió el servidor. Los botones "Analizado" representan lo que obtendrá de JSON.parse .

En el futuro, JSON Formatter podría pasar del uso de JSON.parse a un analizador personalizado (si el rendimiento lo permite) para detectar cuándo se ha "cambiado" un valor mediante el análisis y mostrar una advertencia adecuada.