Visionneuse d'arborescence JSON

Qu’est-ce qu’une visionneuse d’arborescence JSON ?#

Une visionneuse d’arborescence JSON analyse un document et le dessine sous forme de plan repliable, à la manière dont un explorateur de fichiers affiche une arborescence de répertoires. Au lieu de lire un long bloc de texte indenté et de compter les accolades pour comprendre ce qui est imbriqué dans quoi, vous saisissez la structure du premier coup d’œil : les objets et les tableaux sont des branches que vous pouvez ouvrir ou fermer d’un clic, et les valeurs feuilles — chaînes, nombres, booléens, null — se trouvent aux extrémités.

Cela compte surtout quand le document est profond ou peu familier. Une seule réponse d’API peut facilement atteindre des centaines de lignes ; un fichier de configuration peut comporter des paramètres imbriqués sur quatre ou cinq niveaux sous des noms qui se ressemblent. Dans un formateur classique, vous défilez et perdez votre repère. Dans une arborescence, vous repliez tout sauf la branche qui vous intéresse, et le reste cesse de disputer votre attention.

Cette page analyse votre JSON dans le navigateur et rend une arborescence repliable nœud par nœud, en utilisant un contenu textuel brut plutôt que d’interpréter l’entrée comme du HTML — ainsi, même un document contenant des balises <script> ou des chaînes ressemblant à du HTML est affiché inerte, jamais exécuté.

Mode d’emploi#

1. Collez votre JSON dans le panneau Entrée à gauche. L’analyse se fait au fil de la frappe.
2. L’arborescence apparaît à droite. Chaque objet ou tableau affiche un commutateur ▼, son accolade ouvrante ({ ou [), le nombre d’entrées qu’il contient, et son accolade fermante. Cliquez sur le commutateur — ou sur les accolades elles-mêmes — pour replier ou déplier cette branche.
3. Utilisez Tout déplier pour ouvrir chaque branche jusqu’à ses feuilles, et Tout replier pour réduire tout le document à sa racine. Tout replier permet d’obtenir en une ligne un aperçu d’une charge utile étendue avant d’explorer les détails.
4. L’en-tête à droite affiche le nombre d’entrées de premier niveau de la racine (par exemple 5 éléments), afin que vous puissiez voir d’un coup d’œil la taille du document.
5. Exemple charge un document de démonstration imbriqué ; Effacer vide les deux panneaux.

Principales fonctionnalités#

• Chaque branche se replie indépendamment. Chaque conteneur s’ouvre et se ferme séparément, ce qui vous permet de garder un sous-objet déployé pour référence tandis que le reste reste replié.
• Repères de profondeur. Les enfants sont indentés sous une ligne guide verticale, ce qui rend évident à quelle accolade appartient une entrée, même dans des documents denses.
• Rendu protégé contre les XSS. Chaque étiquette et chaque valeur est écrit en contenu textuel brut — l’entrée n’est jamais analysée comme du HTML. Une chaîne à l’allure malveillante s’affiche simplement comme du texte.
• Valeurs feuilles fidèles. Les chaînes conservent leurs guillemets et les nombres s’affichent exactement comme les écrirait JSON.stringify, de sorte que true (booléen) se distingue visuellement de "true" (chaîne).
• Comptage en direct. L’en-tête indique le nombre d’entrées que contient la racine, mis à jour au fil de l’édition.

Exemple détaillé#

Chargez Exemple et l’arborescence analysée affiche un objet racine avec cinq entrées de premier niveau :

▼ { 5
    "name": "ArpGate DevTools"
    "version": 1
    "active": true
  ▼ "tags": [ 3 ]
  ▼ "features": { 2 }

Deux de ces entrées sont elles-mêmes des conteneurs. Déplier tags révèle le tableau à trois éléments ("json", "encoding", "crypto"), et déplier features montre que static vaut true tandis que backend vaut null — une distinction que l’arborescence rend explicite au lieu de vous laisser la deviner à partir d’un dump à plat.

Si seule la sous-arborescence features vous intéresse, cliquez sur tous les autres ▼ du premier niveau pour les replier. Le compte 5 sur la racine reste exact, et le guide de profondeur rend évident que static et backend appartiennent à features, et non à la racine.

FAQ#

Cet outil modifie-t-il ou reformatte-t-il mon JSON ?#

Non. L’arborescence est une vue en lecture seule de la valeur analysée. Votre texte d’entrée n’est jamais réécrit, réindenté ni émis. Si vous souhaitez que le document soit mis en forme comme du texte, utilisez plutôt le formateur ; cet outil sert à naviguer, pas à normaliser.

Pourquoi les chaînes conservent-elles leurs guillemets dans l’arborescence ?#

Parce que c’est ainsi que le JSON lui-même distingue une chaîne d’un mot-clé brut. Sans guillemets, true et "true" se ressembleraient, tout comme null et la chaîne "null". Conserver les guillemets (exactement comme les produit JSON.stringify) préserve cette distinction au premier coup d’œil.

Comment gère-t-il les très gros documents ?#

L’analyse et le rendu se font entièrement dans votre navigateur : aucun téléversement, aucun aller-retour serveur. Pour des configurations et des réponses d’API courantes, c’est instantané. Pour un document de plusieurs mégaoctets, l’arborescence doit créer un nœud pour chaque valeur, ce qui peut devenir lent — repliez les branches dont vous n’avez pas besoin pour garder un nombre de nœuds visibles gérable.

Une chaîne contenant du HTML sera-t-elle rendue comme du HTML ?#

Jamais. L’outil écrit chaque valeur en contenu textuel, que le navigateur traite comme des caractères inerts. Une chaîne contenant par hasard <script> ou <img onerror=...> est affichée telle quelle, comme du texte — elle n’est pas analysée comme du balisage et ne peut pas s’exécuter.