Visualiser du JSON
Le visualiseur JSON affiche un document sous forme d’arbre dépliable dans votre navigateur. L’arbre est virtualisé sur une liste de lignes aplatie, si bien qu’une réponse d’API de cinquante mille nœuds s’ouvre et défile à la même vitesse qu’une petite, et chaque ligne porte le pointeur RFC 6901 qui l’adresse.
Comment fonctionne Visualiser du JSON ?
Un visualiseur JSON est jugé entièrement sur son comportement face à un document trop gros pour être lu comme du texte — et c’est la seule raison pour laquelle on en ouvre un. La plupart échouent là-dessus, et échouent pour la même raison structurelle : ils rendent l’arbre en composants imbriqués, un par nœud. C’est l’implémentation évidente, et elle signifie qu’une réponse de cinquante mille nœuds produit cinquante mille éléments DOM, dont peut-être quarante sont à l’écran. Le défilement devient saccadé, déplier une branche re-rend tout son sous-arbre, et l’onglet se met à consommer des centaines de mégaoctets.
Ce visualiseur aplatit d’abord le document en un tableau de lignes — chacune portant sa profondeur, son type, son nombre d’enfants et l’index auquel son sous-arbre se termine — puis ne rend que les lignes situées dans la zone visible. Le DOM ne garde qu’une cinquantaine d’éléments quelle que soit la taille du document, si bien qu’un gros fichier s’ouvre aussi vite qu’un petit.
Enregistrer où chaque sous-arbre se termine est ce qui rend le repli bon marché. Masquer une branche est un simple saut d’index plutôt qu’une traversée de tout ce qu’elle contient, donc replier la racine d’un document de 50 000 nœuds coûte une comparaison au lieu de cinquante mille. La même structure rend la recherche pertinente : les correspondances sont cherchées dans tout le document, pas seulement la partie dépliée, et chaque ancêtre du chemin menant à une correspondance est conservé, car une valeur sans son chemin ne vous apprend rien.
L’aplatissement est itératif, avec une pile explicite plutôt que de la récursion. Une traversée récursive fait déborder la pile d’appels JavaScript aux alentours de dix mille niveaux d’imbrication, et un document aussi profond est précisément celui que quelqu’un apporte à un visualiseur parce que rien d’autre ne l’ouvre. Il existe un test à vingt mille niveaux.
Chaque ligne affiche le pointeur JSON RFC 6901 qui l’adresse — /order/lines/0/sku — et le copie au clic. C’est la chaîne que vous collez dans un JSON Patch, un chemin jq, une assertion de test ou un rapport de bug, et l’avoir exacte supprime l’étape la plus fastidieuse du travail avec une réponse inconnue.
Document
{"order":{"lines":[{"sku":"WID-1","qty":2}]}}Arbre
▾ root { 1 }
▾ order { 1 }
▾ lines [ 1 ]
▾ 0 { 2 }
sku "WID-1" /order/lines/0/sku
qty 2 /order/lines/0/qtyQuelles options et quels cas limites Visualiser du JSON prend en charge ?
| Paramètre | Type | Valeur par défaut | Comportement et cas limites |
|---|---|---|---|
| Profondeur initiale | niveaux | 2 | Les conteneurs plus profonds que cette valeur sont initialement repliés, de sorte qu’un grand document s’ouvre comme une vue d’ensemble lisible plutôt que quarante mille lignes. Développer tout est accessible en un seul clic. |
| Virtualisation | vue uniquement | — | Environ cinquante lignes existent dans le DOM à tout moment, quelle que soit la taille du document. C’est ce qui fait la différence entre un visualisateur qui ouvre une réponse de 20 MB et un autre qui fige l’onglet. |
| Recherche | sous-chaîne | insensible à la casse | Correspond aux clés et aux valeurs rendues sur l’ensemble du document, y compris les branches repliées, et conserve tous les ancêtres d’une correspondance afin que le chemin reste visible. |
| Pointeur JSON | RFC 6901 | affiché par ligne | Cliquez pour copier. Les clés contenant / ou ~ sont échappées comme ~1 et ~0, afin que le pointeur soit correct plutôt que simplement plausible. |
| Couleurs de type | string, number, boolean, null | — | Les scalaires sont colorés par type, afin qu’une chaîne numérique "42" soit visuellement différente du nombre 42 — une distinction qui est à l’origine d’une part surprenante de bugs d’intégration. |
| Édition | non pris en charge | — | Ceci est un visualisateur. Pour modifier des valeurs, renommer des clés et réordonner des tableaux, utilisez l’Éditeur JSON, qui garde un panneau texte et un arbre synchronisés. |
| Taille d'entrée | octets | 8 MB | L’analyse s’exécute sur le thread principal. Au-delà de cette limite, l’outil refuse plutôt que de se figer. L’arbre lui-même gère beaucoup plus de nœuds que la limite autorisée par l’analyseur. |
Questions fréquentes
Peut-il ouvrir un fichier vraiment volumineux ?
Jusqu’au plafond d’analyse de 8 MB, oui, et l’arbre n’est pas le goulot d’étranglement — il ne rend que ce qui est à l’écran, donc le nombre de nœuds l’affecte à peine. La limite est l’étape d’analyse, qui s’exécute sur le thread principal et est refusée au-delà de 8 MB plutôt que tentée, car la tenter fige l’onglet.
Qu’est-ce que le /order/lines/0/sku à côté de chaque ligne ?
Le pointeur JSON RFC 6901 qui adresse ce nœud. Cliquez dessus pour le copier. C’est le chemin que vous collez dans une opération JSON Patch, une assertion de test ou un rapport de bug, et l’avoir exacte — y compris les échappements ~0 et ~1 pour les clés contenant ~ et / — supprime la partie la plus sujette aux erreurs quand on décrit où se trouve quelque chose.
Puis-je modifier des valeurs ici ?
Non, délibérément. Un visualiseur qui édite aussi doit réconcilier deux sources de vérité à chaque frappe, et c’est pourquoi l’éditeur JSON est un outil séparé : il garde un volet de texte et un arbre synchronisés, avec annulation. Garder celui-ci en lecture seule est ce qui lui permet de rester rapide sur les documents avec lesquels l’éditeur peinera.
Pourquoi mon nombre est-il affiché d’une couleur différente de ma chaîne ?
Les scalaires sont colorés par type. Cela compte plus qu’il n’y paraît : la chaîne "42" et le nombre 42 se ressemblent en texte brut et se comportent de façon totalement différente en aval. Une valeur quotée qui est une chaîne là où un entier était attendu est une cause récurrente d’échecs d’intégration, et la couleur le rend visible d’un coup d’œil.
La recherche regarde-t-elle à l’intérieur des branches repliées ?
Oui. La recherche porte sur tout le document aplati plutôt que sur les lignes visibles, si bien qu’une correspondance enfouie dans un sous-arbre replié est trouvée et affichée avec les ancêtres qui y mènent. Effacez la requête et l’arbre revient à ce que vous aviez déplié.
Le document est-il envoyé ?
Non. Il est analysé et rendu par du JavaScript dans l’onglet que vous avez déjà ouvert. Ouvrez DevTools, allez dans le panneau Réseau et collez une réponse — rien qui la transporte ne part. Les documents pour lesquels on a besoin d’un visualiseur sont généralement des réponses d’API de production, exactement le matériel qui ne devrait pas passer par un serveur inconnu pour être rendu lisible.