JSON Tree Viewer

1. 1

   Ouvrir votre JSON

   Glissez un fichier .json, .jsonl, .geojson, .har ou .map sur la zone de dépôt, parcourez vos fichiers, ou collez du JSON directement dans la zone de texte. Rien n'est téléversé : le fichier est lu sur votre appareil.

2. 2

   Explorer l'arbre

   Les objets et les listes s'ouvrent et se ferment avec la flèche à côté, et chacun indique combien d'enfants il contient. Utilisez Ouvrir jusqu'à la profondeur ou Tout replier pour changer toute la forme d'un coup.

3. 3

   Trouver ce qu'il vous faut

   Cherchez n'importe quelle clé ou valeur, avec des expressions régulières si vous le souhaitez, et parcourez les résultats. Pour une coupe précise, filtrez avec une expression JSONPath comme $..author ou $.items[0:10].

4. 4

   Passer au tableau

   Quand le document est une liste d'enregistrements, la vue tableau les dispose en colonnes au lieu de répéter la même branche des centaines de fois.

5. 5

   Copier ou exporter

   Copiez le chemin, la clé ou la valeur de n'importe quel nœud, ou téléchargez le document entier - ou seulement le sous-arbre sélectionné - formaté, minifié, inchangé ou en NDJSON.

Ouvrir un fichier JSON et le lire : c'est tout le travail, et le faire correctement sur un fichier de n'importe quelle taille ou forme demande plus qu'une liste repliable. Ce visionneur indexe le fichier au lieu de le convertir en objets, donc il ouvre vite, montre exactement ce que le fichier contient et reste réactif que le document tienne en deux lignes ou en deux millions de nœuds.

• Un arbre qui tient la charge. Les objets et les listes se déplient et se replient à toute profondeur, et seules les lignes visibles sont dessinées : un export de 200 000 enregistrements défile aussi bien qu'un petit fichier de configuration.
• Un tableau quand les données sont tabulaires. Une liste d'enregistrements devient des lignes et des colonnes, les colonnes étant déduites des données.
• Chercher et filtrer. Trouver dans les clés, les valeurs ou les deux, avec des expressions régulières ; ou prendre une coupe précise avec une expression JSONPath.
• Exactement ce que dit le fichier. Les grands nombres gardent tous leurs chiffres, les clés en double sont conservées et signalées, et les séquences d'échappement du fichier survivent.
• Lecture tolérante. Commentaires, virgules en trop, apostrophes et clés sans guillemets peuvent être lus, chaque changement étant signalé.
• Copier et exporter. N'importe quel chemin, clé, valeur ou sous-arbre vers le presse-papiers ; le document entier ou une branche vers un fichier.

La taille est l'endroit où la plupart des visionneurs JSON du navigateur cessent d'être utiles. L'approche habituelle convertit le document en objets JavaScript puis dessine un élément par nœud, ce qui coûte de la mémoire proportionnelle au fichier et met en page le document entier avant d'en montrer quoi que ce soit. Passé quelques mégaoctets, cela devient un onglet figé.

Ce que ce visionneur fait à la place

• Indexer plutôt que convertir. Le fichier est parcouru une fois vers une table compacte de positions. Aucun objet JavaScript n'est créé pour aucune partie du document.
• Travailler à l'écart de la page. Le parcours, la recherche, le filtrage et l'export se font hors du fil qui dessine l'écran : la page ne se fige jamais et le défilement ne saccade jamais.
• Ne dessiner que le visible. Une quarantaine de lignes existent à la fois, quel que soit le nombre total.
• Décoder le texte à la demande. Une clé ou une valeur devient du texte lisible quand elle apparaît à l'écran, pas avant.
• Gérer la profondeur sans échouer. L'imbrication est suivie de manière itérative : un document très imbriqué se lit comme un autre au lieu d'épuiser la pile.

Trouver un champ dans un grand document est la tâche pour laquelle un visionneur existe, et deux questions différentes se cachent derrière : où apparaît ce texte, et qu'y a-t-il à ce chemin ? Les deux trouvent ici une réponse, et toutes deux passent par l'index plutôt que par les lignes dessinées : un résultat au fond d'un fichier énorme se trouve aussi vite qu'un résultat au début.

Les deux façons de chercher

• Recherche. Tapez n'importe quel texte pour trouver des clés, des valeurs ou les deux. Le respect de la casse est optionnel et les expressions régulières sont prises en charge, ^ et $ correspondant aux limites de ligne comme dans un éditeur.
• Parcourir les résultats. Les résultats sont listés dans l'ordre du document ; y aller ouvre toutes les branches au-dessus et met le texte en évidence dans la ligne.
• Filtre JSONPath. Des expressions comme $.store.book[*].author, $..price, $.rows[0:100] et $['clé étrange'] réduisent la vue exactement aux nœuds demandés, chacun avec sa propre structure.
• Filtrer et chercher ensemble. Cherchez dans une vue filtrée pour restreindre deux fois - utile quand un chemin sélectionne mille enregistrements et que vous voulez les trois qui mentionnent un nom.

L'essentiel du JSON qu'on rencontre est une liste d'enregistrements : une réponse d'API, un export, un fichier de journal. Dessiné en arbre, cela fait des centaines de branches identiques, et le lire revient à les ouvrir une par une. La vue tableau montre les mêmes données en lignes et en colonnes, ce qui est la façon dont une liste d'enregistrements doit se lire.

Comment elle se comporte

• Les colonnes viennent des données. Les noms de champs sont collectés sur l'ensemble des enregistrements plutôt que supposés à partir du premier : un champ que seuls certains enregistrements portent obtient quand même sa colonne.
• Les enregistrements irréguliers restent visibles. Un enregistrement auquel il manque un champ affiche une cellule vide, et une entrée qui n'est même pas un objet est tout de même listée plutôt qu'ignorée.
• Les valeurs imbriquées restent accessibles. Une cellule contenant un objet ou une liste indique ce que c'est et combien il contient ; la sélectionner vous amène à ce nœud dans l'arbre.
• Il trouve les enregistrements pour vous. Que la liste soit tout le document ou un champ à l'intérieur, le tableau propose la liste d'enregistrements la plus proche de votre sélection.

Deux choses se produisent dans presque tous les visionneurs JSON, jamais mentionnées, et qui changent ce qui vous est montré. Toutes deux découlent de la même décision - convertir le document en valeurs JavaScript - et toutes deux sont évitées ici en lisant le texte du fichier lui-même.

Ce qui se perd ailleurs

• Les grands nombres sont arrondis. Un nombre JavaScript retient environ 15 chiffres significatifs. Un identifiant tel que 12345678901234567890 devient 12345678901234567000, et rien à l'écran ne le dit. Ici chaque nombre est affiché à partir des caractères du fichier, et tout nombre qui ne survivrait pas à un aller-retour est signalé.
• Les clés en double disparaissent. JSON permet à un objet de répéter une clé. Un analyseur qui construit un objet ne garde que la dernière, si bien qu'un document discrètement faux paraît correct. Ici les deux membres sont montrés, tous deux signalés, et le compte figure dans le résumé.
• Les séquences d'échappement sont réécrites. Formater un document ailleurs peut transformer chaque \u00e9 en caractère littéral. Exporter ici ne change que les espaces, donc l'écart avec votre original reste lisible.
• Les décimales de haute précision sont tronquées. Le même plafond de 15 chiffres s'applique aux fractions : une valeur plus précise que ce qu'un flottant retient est silencieusement raccourcie. Ici elle est affichée en entier.

Le JSON strict n'a ni commentaires, ni virgules en trop, ni apostrophes, ni clés sans guillemets - et les vrais fichiers de configuration ont les quatre. Un visionneur qui les refuse simplement n'aide guère quand le fichier devant vous est justement celui que vous devez lire.

Le mode tolérant et ses limites

• Proposé, jamais automatique. Le fichier est d'abord lu strictement. Le mode tolérant n'apparaît que si la lecture stricte a échoué et qu'une réparation changerait effectivement quelque chose.
• Tout ce qu'il change est signalé. Commentaires supprimés, virgules en trop retirées, guillemets convertis, clés mises entre guillemets, NaN et Infinity remplacés - chacun nommé, compté, avec la ligne de la première occurrence.
• Il n'invente jamais de structure. Un crochet manquant, une virgule manquante ou un fichier tronqué sont une corruption, pas un dialecte. Cela est signalé comme une erreur, car deviner mettrait à l'écran des données absentes de votre fichier.
• Les erreurs disent où. Quand un fichier ne peut pas être lu, le message donne la ligne et la colonne et montre le texte autour du problème, plutôt qu'un décalage en octets qu'aucun éditeur ne comprend.

Le JSON arrive sous plusieurs extensions et, parfois, dans un encodage où il ne devrait pas être. Tous sont lus ici, et ce qui a été détecté est affiché plutôt que supposé en silence.

Ce qui s'ouvre

• JSON. .json, et un simple .txt contenant du JSON.
• JSON Lines et NDJSON. .jsonl et .ndjson, où chaque ligne est un document à part. Ils sont présentés comme une seule liste afin que tout le flux se parcoure, se cherche et s'exporte ensemble.
• GeoJSON, HAR et source maps. .geojson, .har et .map sont du JSON ordinaire de forme particulière, et les trois s'ouvrent normalement.
• UTF-8, UTF-16 et Windows-1252. Une marque d'ordre des octets est respectée et retirée au lieu d'être signalée comme erreur de syntaxe, et un fichier qui n'est pas de l'UTF-8 valide est décodé plutôt que rempli de caractères de remplacement.

Lire un document finit généralement par en emporter quelque chose : un chemin pour un test, une valeur pour un rapport de bogue, une branche pour un collègue. Chacune de ces actions tient en un clic, et aucune ne change ce que disent vos données.

Ce que vous pouvez emporter

• Le chemin. $.store.book[0].author, dans la forme que vous collez dans un autre outil. Les clés qui demandent des guillemets en reçoivent.
• La clé ou la valeur. Une chaîne copie son texte sans les guillemets qui l'entourent ; toute autre valeur copie exactement ce que contient le fichier.
• Un sous-arbre. N'importe quel objet ou liste, formaté, sans exporter le reste du document.
• Le fichier entier, de quatre façons. Formaté avec indentation, minifié, les octets d'origine inchangés, ou NDJSON avec un élément de liste par ligne.

Rien n'est téléversé. Le fichier est ouvert, indexé, cherché et exporté entièrement sur votre propre machine, ce qui est à la fois la réponse à la confidentialité et celle à la vitesse : il n'y a pas d'aller-retour à attendre, donc un gros fichier est limité par votre appareil et non par un réseau.

Ce que cela signifie en pratique

• Fonctionne hors ligne. Une fois la page chargée, le visionneur continue de fonctionner sans aucune connexion.
• Rien n'est conservé. Fermer l'onglet met fin à tout. Il n'y a ni historique, ni cache de vos documents, ni compte qui y soit attaché.
• Sûr pour des données sensibles. Exports de production, journaux d'accès et tout ce qui relève d'un accord interdisant le traitement par un tiers peuvent être ouverts ici, puisqu'aucun tiers ne les reçoit.
• Votre appareil fixe le plafond. L'offre gratuite ouvre des fichiers jusqu'à 100 Mo. Pro remplace ce nombre par ce que votre machine peut réellement gérer.

Quelques habitudes rendent un document volumineux ou inconnu beaucoup plus rapide à parcourir, quel que soit le visionneur.

Conseils

• Replier d'abord, descendre ensuite. Repliez tout et ouvrez une branche à la fois ; la forme d'un document se voit mieux avec dix lignes à l'écran qu'avec dix mille.
• Filtrer avant de chercher. Une expression JSONPath qui restreint aux enregistrements qui vous intéressent rend une recherche de texte ensuite beaucoup plus lisible.
• Utiliser le tableau pour les listes. Si le document est une liste d'enregistrements, le tableau répond à des questions que l'arbre ne peut pas traiter, comme savoir à quels enregistrements il manque un champ.
• Regarder le résumé. Nombre de nœuds, profondeur maximale, clés en double et nombres inhabituels apparaissent à l'ouverture, et expliquent souvent un bogue avant qu'on le cherche.
• Exporter la branche, pas le fichier. Pour partager un problème, un sous-arbre est plus facile à lire pour quelqu'un d'autre qu'un lien vers un document de 40 Mo.

Usages courants

• Déboguer une API. Collez une réponse, trouvez le champ fautif et copiez son chemin directement dans un test.
• Vérifier un export. Ouvrez un export de base de données ou d'analytique, confirmez le nombre d'enregistrements et repérez ceux qui ne ressemblent pas aux autres.
• Lire un fichier HAR. Une capture réseau est du JSON de forme très profonde, ce à quoi la recherche et le filtrage servent exactement.
• Auditer une configuration. Les clés en double et les valeurs nulles inattendues d'un fichier de configuration sont visibles ici au lieu d'être appliquées en silence.
• Inspecter des journaux. Les journaux NDJSON s'ouvrent comme une seule liste parcourable au lieu de milliers de documents séparés.

• Formateur JSON
• Validateur JSON
• Minifieur JSON
• Comparateur JSON
• JSON vers YAML
• JSON vers XML