Afficher le format JSON

Utilisez la visionneuse JSON pour mettre en forme et syntaxe automatiquement mettre en surbrillance les réponses et les fichiers JSON dans les onglets du navigateur.

La visionneuse JSON modifie les données JSON retournées pour faciliter la lecture. Parfois, un serveur web répond aux requêtes HTTP en retournant des données encodées au format JSON. Les données JSON peuvent être difficiles à lire lorsqu’elles sont mises en forme sous la forme d’une seule ligne de texte longue et concaténée. La même chose peut se produire lors de l’ouverture d’un fichier JSON à partir d’un disque.

La visionneuse JSON améliore la lisibilité des données JSON de plusieurs façons :

  • La syntaxe JSON est mise en surbrillance avec différentes couleurs.
  • Les propriétés de l’objet sont affichées sur leurs propres lignes et mises en retrait.
  • Les objets peuvent être réduits ou développés.
  • La visionneuse JSON correspond au thème sombre ou clair de votre système d’exploitation.

Scénarios pris en charge

La visionneuse JSON n’est pas prise en charge dans les fenêtres ouvertes à l’aide de la window.open méthode JavaScript. Dans les fenêtres ouvertes avec window.open, les données JSON sont affichées sous la forme d’une seule ligne de texte, sans mise en forme ni mise en surbrillance syntaxique.

Afficher les réponses du serveur JSON reformatées

Pour afficher une réponse JSON d’un serveur web en tant que JSON reformaté :

  1. Ouvrez un nouvel onglet ou une nouvelle fenêtre dans Microsoft Edge.

  2. Tapez une URL qui retourne des données JSON dans la barre d’adresses. Par exemple, utilisez cet exemple de réponse JSON : https://microsoftedge.github.io/Demos/json-dummy-data/256KB-min.json.

    Vous trouverez plus d’exemples de réponses JSON sur MicrosoftEdge / Demos > json-dummy-data.

  3. Microsoft Edge détecte que les données retournées sont JSON et les met en forme automatiquement :

    Données JSON retournées par un serveur web, mises en forme et mises en évidence par la syntaxe par la visionneuse JSON

Afficher les fichiers JSON reformatés

Pour afficher un fichier JSON stocké sur votre appareil en tant que JSON reformaté :

  1. Ouvrez un nouvel onglet ou une nouvelle fenêtre dans Microsoft Edge.

  2. Appuyez sur Ctrl+O sur Windows et Linux, ou sur Cmd+O sur macOS, puis sélectionnez un fichier JSON.

  3. Microsoft Edge détecte que le fichier contient des données JSON et le met en forme automatiquement :

    Données JSON stockées dans un fichier local, mises en forme et mises en surbrillance par la syntaxe par la visionneuse JSON

Détecter les données JSON non valides

Les données JSON peuvent parfois être non valides. Par exemple, les modèles suivants ne sont pas valides dans JSON :

  • Omettre les guillemets doubles autour d’un nom de clé.
  • Avoir une virgule de fin après la dernière paire clé/valeur.

La visionneuse JSON applique la mise en surbrillance de la syntaxe à json non valide. Toutefois, la visionneuse JSON ne met pas en forme le contenu et vous ne pouvez pas réduire ou développer des objets.

Vous trouverez des informations sur la syntaxe non valide dans l’outil Console , où la visionneuse JSON signale des erreurs.

Pour afficher des données JSON non valides :

  1. Ouvrez un nouvel onglet ou une nouvelle fenêtre dans Microsoft Edge.

  2. Dans la barre d’adresse, accédez à une URL qui retourne des données JSON non valides. Par exemple, utilisez cet exemple de réponse JSON non valide : https://microsoftedge.github.io/Demos/json-dummy-data/missing-colon.json.

    Vous trouverez d’autres exemples de réponses JSON non valides sur MicrosoftEdge / Demos > json-dummy-data.

  3. Microsoft Edge détecte que le fichier contient des données JSON non valides et colorise la liste JSON, mais ne l’encapsule pas ou ne la reformater. Le fait que le json ne soit pas encapsulé indique qu’il existe un code JSON mal formé.

  4. Ouvrez l’outil Console en appuyant sur Ctrl+Maj+J (Windows, Linux) ou Cmd+Option+J (macOS).

    Une erreur JavaScript indique où se trouve l’erreur de syntaxe JSON :

    JSON non valide, mis en surbrillance par non mis en forme, avec une erreur de syntaxe affichée dans l’outil console

  5. Dans un éditeur de code, tel que Microsoft Visual Studio Code, accédez au numéro de colonne indiqué pour inspecter le json :

    Affichage du code JSON mal formé par numéro de colonne dans VS Code

Recherche les données JSON

Pour rechercher du texte dans les données JSON, utilisez la fonctionnalité Rechercher de la visionneuse JSON, comme suit :

  1. Afficher une réponse ou un fichier JSON dans la visionneuse JSON.

  2. Cliquez n’importe où dans les données JSON mises en forme pour mettre le focus sur les données JSON.

  3. Appuyez sur Ctrl+F (Windows, Linux) ou Cmd+F (macOS). La barre d’outils de recherche s’affiche en haut de la visionneuse JSON :

    Barre d’outils de recherche de la visionneuse JSON

  4. Dans la zone de texte Rechercher , commencez à taper le texte que vous souhaitez rechercher. Au fur et à mesure que vous tapez, la visionneuse JSON met en surbrillance toutes les occurrences de la chaîne de texte dans les données JSON.

Pour arrêter la recherche, cliquez sur le bouton Annuler dans la barre d’outils de la visionneuse JSON.

Parcourir les résultats de la recherche

Pour passer au résultat de recherche suivant ou précédent, une fois les résultats trouvés, cliquez sur les boutons Suivant ou Précédent dans la barre d’outils de recherche. Le résultat de la recherche actuellement sélectionné est mis en surbrillance dans une couleur différente :

Boutons Suivant et Précédent dans la barre d’outils de recherche de la visionneuse JSON

La barre d’outils de recherche contient les cases à cocher Match Case, Regexp et By Word pour modifier le type de recherche :

Les cases à cocher Match Case, Regexp et By Word, qui changent la façon dont la recherche est effectuée

Par défaut, la recherche ne respecte pas la casse. Par exemple, une recherche sur hello correspond Helloà , HELLO, helloou toute chaîne qui contient les caractères hello avec une casse quelconque.

Pour que la recherche respecte la casse, cochez la case Match Case dans la barre d’outils de recherche.

Recherche par une expression régulière

Par défaut, la chaîne de recherche est traitée comme une chaîne littérale.

Pour effectuer une recherche à l’aide d’une expression régulière, cochez la case Regexp dans la barre d’outils de recherche.

Recherche par mot entier uniquement

Par défaut, la recherche ne se limite pas à la recherche du mot entier isolé entouré d’espaces. Par exemple, une recherche sur hello correspond helloà , hello-worldet world-hello, ou à toute chaîne qui contient la séquence de caractères hello.

Pour limiter la recherche à la seule chaîne entourée d’espaces, sans lettres adjacentes, cochez la case Par Word dans la barre d’outils de recherche.