Visionneuse d'arborescence JSON

Affichez un JSON sous forme d'arborescence repliable. Recherchez dans les clés et les valeurs, copiez n'importe quel chemin ou valeur et repérez les types de données d'un coup d'œil. Gratuit, dans le navigateur.

Votre JSON

354 B

Vue en arborescence

{7}
id:1024
name:"CodeItBro"
isActive:true
rating:4.8
tags:[3]
0:"tools"
1:"seo"
2:"developer"
address:{3}
city:"Bengaluru"
country:"India"
zip:null
team:[2]
0:{2}
name:"Asha"
role:"Engineer"
1:{2}
name:"Ravi"
role:"Designer"

14 clés, 3 niveaux de profondeur

Noter Visionneuse d'arborescence JSON

Dans quelle mesure cet outil vous a-t-il été utile ? Votre note aide d'autres personnes à le trouver.

Lisez n'importe quelle structure JSON d'un coup d'œil

API responses, config files, and log payloads are easy to skim once they're a tree instead of a wall of brackets. This viewer builds that tree instantly, right in your browser.

Collapsible JSON Tree
Search · Copy · Inspect

Instant Tree Structure

Every object and array becomes a collapsible branch, so nested API responses and config files stop looking like a wall of text.

Search Any Key or Value

Type a few characters and the tree jumps straight to matching keys, opening just enough of the structure to show where they live.

Copy Paths and Values

Click any node to copy its exact path or value, ready to paste into your code, tests, or documentation.

Runs Fully in Your Browser

Your JSON never leaves your device, so it's safe to inspect API keys, tokens, or production data.

Comment fonctionne Visionneuse d'arborescence JSON

Cet outil analyse tout JSON que vous collez ou importez et l'affiche sous forme d'arborescence interactive et réductible plutôt que de bloc de texte à plat. Chaque objet et chaque tableau devient une branche que vous pouvez développer ou réduire, tandis que chaque clé indique le type de sa valeur (chaîne, nombre, booléen ou null) dans une couleur distincte, ce qui permet de parcourir une réponse volumineuse sans lire chaque caractère.

Saisir du texte dans le champ de recherche filtre l'arborescence sur les clés et valeurs correspondantes, en ouvrant automatiquement uniquement les branches nécessaires pour atteindre chaque résultat et en refermant les autres. Cliquer sur l'icône de copie à côté d'un nœud copie cette valeur seule, tandis que l'icône de chemin copie le chemin exact en notation à points et crochets (par exemple, data.users[2].email) pour le coller directement dans du code, une assertion de test ou un rapport de bug. Une ligne de statistiques au bas de l'arborescence indique le nombre de clés et la profondeur du JSON actuel.

Si l'entrée n'est pas un JSON valide, l'outil signale immédiatement l'erreur d'analyse au lieu d'afficher une arborescence vide. Toute l'analyse et tout l'affichage s'effectuent localement dans votre navigateur : coller des réponses d'API, des fichiers de configuration ou du JSON contenant des jetons et des identifiants n'envoie jamais ces données à un serveur.

Comment utiliser Visionneuse d'arborescence JSON

1

Collez ou importez votre JSON

Déposez du JSON dans le panneau d'entrée ou importez un fichier .json. Un JSON invalide est signalé immédiatement par un message d'erreur.

2

Explorez l'arborescence

Développez ou réduisez n'importe quel objet ou tableau, ou recherchez une clé ou une valeur pour y accéder directement dans la structure.

3

Copiez ce dont vous avez besoin

Copiez une valeur isolée ou son chemin exact, puis collez-la dans votre code, un test ou un rapport de bug.

Exemple d'utilisation

Rechercher « email » ouvre automatiquement le tableau users et permet de copier le chemin exact de la deuxième entrée.

Entrée
{"data":{"users":[{"name":"Asha","email":"[email protected]"},{"name":"Ravi","email":"[email protected]"}]}}
Sortie
data.users[1].email → "[email protected]"

Questions fréquentes

À quoi sert une visionneuse d'arborescence JSON ?
Elle transforme un bloc de texte JSON à plat en arborescence réductible, ce qui permet de parcourir une réponse d'API, un fichier de configuration ou une charge utile de journal sans lire à la main chaque crochet et chaque virgule.
Mon JSON est-il envoyé à un serveur ?
Non. L'analyse et l'affichage s'effectuent entièrement dans votre navigateur. Rien de ce que vous collez ou importez, y compris les clés d'API, les jetons ou les données de production, n'est envoyé ailleurs.
Puis-je rechercher une clé précise dans un gros fichier JSON ?
Oui. Saisissez votre recherche dans le champ prévu et l'arborescence ouvre automatiquement juste assez de branches pour afficher chaque clé ou valeur correspondante, avec la correspondance mise en surbrillance.
Comment copier une seule valeur ou son chemin ?
Survolez une ligne et utilisez l'icône de copie pour récupérer la valeur seule, ou l'icône de chemin pour copier le chemin exact en notation à points et crochets, par exemple data.users[2].email.
Que se passe-t-il si je colle un JSON invalide ?
L'outil affiche immédiatement le message d'erreur d'analyse au lieu d'une arborescence vide ou cassée, pour que vous sachiez exactement quoi corriger.
Puis-je réduire des objets profondément imbriqués pour me concentrer sur une section ?
Oui. Cliquez sur la flèche à côté d'un objet ou d'un tableau pour réduire ou développer uniquement cette branche, ou utilisez Tout réduire et Tout développer pour contrôler l'ensemble de l'arborescence d'un coup.
La visionneuse prend-elle en charge les tableaux JSON en plus des objets ?
Oui. Les tableaux s'affichent avec des index numériques et un badge indiquant le nombre d'éléments, et chaque élément de tableau peut être développé comme une propriété d'objet.
Puis-je l'utiliser pour déboguer une réponse d'API ?
Oui. Collez le corps brut de la réponse et l'arborescence permet de vérifier facilement les noms de champs, l'imbrication et les types de données sans ajouter d'instructions console.log à votre code.
Affiche-t-elle différemment les types de données comme les chaînes, les nombres et les booléens ?
Oui. Les chaînes, les nombres, les booléens et les valeurs null ont chacun une couleur différente, comme dans la console développeur d'un navigateur, ce qui permet de repérer d'un coup d'œil les incohérences de type.
Existe-t-il une limite à la taille du fichier JSON que je peux afficher ?
L'outil s'exécute sur votre appareil, la limite pratique dépend donc de la mémoire de votre navigateur. Les fichiers de quelques mégaoctets s'affichent sans problème ; les charges utiles extrêmement volumineuses peuvent mettre un instant à se développer entièrement.

Outils associés

Essayer

Formateur JSON

Embellissez et validez vos données JSON.

Essayer

Validateur JSON

Validez et déboguez vos données JSON.

Essayer

JSON Pretty Print

Formatez vos données JSON instantanément. Rendez lisible un JSON minifié grâce à une indentation correcte.

Essayer

Éditeur JSON en ligne

Modifiez et affichez vos données JSON en ligne avec un éditeur visuel puissant.

Essayer

Analyseur JSON

Analysez la structure d'un JSON en ligne. Validez la syntaxe, comptez les clés, objets, tableaux, valeurs, la profondeur et la taille de la charge utile dans votre navigateur.

Essayer

Comparateur JSON

Comparez deux objets JSON côte à côte et repérez instantanément les différences. Visionneuse diff JSON gratuite en ligne pour les développeurs.

Commentaires

Les commentaires sont fournis par Disqus. Les charger vous connecte à Disqus, qui dépose des cookies et traite des données selon sa propre politique de confidentialité.

Visionneuse d'arborescence JSON est maintenu par CodeItBro. Notre objectif est de proposer les meilleurs outils gratuits pour développeurs sur le web. Si vous avez des remarques ou des suggestions, rendez-vous sur notre page de contact.

Cité par

CodeItBro - Free dev tools + practical guides to help you ship faster | Product HuntCodeItBro - Free Online Developer Tools badgeCodeItBro badge