json formatter

Formateur JSON - l'original

Extension Chrome qui formate automatiquement JSON lorsque vous l'affichez dans un onglet de navigateur.

Caractéristiques

• Rapide , même sur de très longues pages JSON
• Mode sombre
• Mise en évidence de la syntaxe
• Arbres pliables, avec guides d'indentation
• URL cliquables
• Impact négligeable sur les performances sur les pages non-JSON (moins de 1 milliseconde)
• Fonctionne sur n'importe quelle page JSON valide – l'URL n'a pas d'importance
• Boutons pour basculer entre JSON brut et analysé
• Le JSON analysé est exporté en tant que variable globale, json , afin que vous puissiez l'inspecter dans la console *

*Taper json dans la console ne fonctionne pas depuis Manifest v3. Si vous avez besoin d'une solution de contournement, collez cet extrait dans la console :

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

Quelques documents JSON pour le tester : https://callumlocke.github.io/json-formatter/

Installation

Option 1 (recommandée) – Installez-le depuis le Chrome Web Store.

Option 2 – Installez-le à partir des sources (voir ci-dessous).

Développement

Exigences : Deno (et Node pour l'instant).

Configuration initiale :

• Cloner le dépôt
• Exécutez pnpm i pour obtenir les saisies TypeScript pour Chrome (ou utilisez npm i si vous préférez)
• Facultatif : si vous utilisez VSCode et que vous devez modifier les scripts de construction Deno, installez le plugin Deno officiel et définissez "deno.enablePaths": ["tasks"] .

Pour le construire :

• Exécuter deno task build

Pour créer et reconstruire chaque fois que les fichiers changent :

• Exécuter deno task dev

Pour installer votre version locale sur Chrome

• Ouvrez Chrome et accédez à chrome://extensions
• Activez le "Mode développeur",
• Cliquez sur "Charger décompressé",
• Sélectionnez le dossier dist que vous avez créé ci-dessus.

FAQ

Pourquoi les grands nombres ne sont-ils pas affichés avec précision ?

Il s'agit d'une limitation de JavaScript et donc d'une limitation de JSON telle qu'interprétée par votre navigateur Web.

• Tout ce qui dépasse Number.MAX_SAFE_INTEGER ( 2^53 - 1 ou 9007199254740991 ) est ajusté à ce nombre.
• Tout ce qui est inférieur à Number.MIN_SAFE_INTEGER ( -2^53 + 1 ou -9007199254740991 ) est ajusté jusqu'à ce nombre.
• Les nombres à virgule flottante extrêmement précis sont arrondis à 16 chiffres.

Ce n'est pas JSON Formatter qui fait cela, c'est le JSON.parse natif de la V8. JSON Formatter vous montre les valeurs analysées , exactement les mêmes que ce que vous verrez après le chargement du JSON en JavaScript.

Si le point de terminaison de votre API doit réellement représenter des nombres en dehors de la plage de sécurité de JavaScript, il doit les citer sous forme de chaînes .

Pourquoi les clés d'objet sont-elles parfois dans le mauvais ordre ?

Ce que vous voyez dans JSON Formatter est une représentation de l'objet/du tableau analysé . C'est le même ordre que vous obtiendrez avec Object.keys( JSON.parse(json) ) en JavaScript.

Historiquement, la norme JavaScript stipulait explicitement que les clés d'objet pouvaient être itérées dans n'importe quel ordre, et la V8 en profitait en déplaçant les clés de chaîne numérique (comme "1" ou "99999" ) vers le haut pour faciliter une petite optimisation des performances. Ce détail d’implémentation V8 est depuis devenu standardisé.

Mais je veux juste voir exactement ce que le serveur crache

Pour l'instant, votre meilleure option est d'utiliser simplement le bouton "Raw" pour voir le JSON brut. C'est ce que le serveur a envoyé. Les boutons "Parsed" représentent ce que vous obtiendrez de JSON.parse .

À l'avenir, JSON Formatter pourrait passer de l'utilisation de JSON.parse à un analyseur personnalisé (si les performances le permettent) afin de détecter lorsqu'une valeur a été « modifiée » par l'analyse et d'afficher un avertissement approprié.