Zum Hauptinhalt springen
ToolsByUs

JSON anzeigen

Dieses Tool stellt ein Dokument in Ihrem Browser als aufklappbaren Baum dar. Der Baum wird über eine flache Zeilenliste virtualisiert; eine API-Antwort mit fünfzigtausend Knoten öffnet und scrollt dadurch genauso schnell wie eine kleine, und jede Zeile trägt den JSON Pointer nach RFC 6901, der sie adressiert.

Nur lokal
Die Zeilen zeigen den RFC-6901-Zeiger; klicken Sie zum Kopieren darauf.
JSON-Dokument
0 B1 ZeileZ. 1, Sp. 1
Gültiges JSON-Dokument einfügen oder auf „Beispiel testen“ klicken, um den Baum zu sehen.

Wie funktioniert JSON anzeigen?

Ein JSON-Viewer wird allein daran gemessen, wie er sich bei einem Dokument verhält, das als Text zu groß zum Lesen ist – der einzige Grund, warum überhaupt jemand einen öffnet. Die meisten scheitern dort, und zwar aus demselben strukturellen Grund: Sie rendern den Baum als verschachtelte Komponenten, eine pro Knoten. Das ist die naheliegende Implementierung, und sie bedeutet, dass eine Antwort mit fünfzigtausend Knoten fünfzigtausend DOM-Elemente erzeugt, von denen vielleicht vierzig auf dem Bildschirm stehen. Das Scrollen wird ruckelig, das Aufklappen eines Zweigs rendert den gesamten Teilbaum neu, und der Tab fängt an, hunderte Megabyte zu verbrauchen.

Dieser Viewer wandelt das Dokument zuerst in ein flaches Array von Zeilen um – jede mit ihrer Tiefe, ihrem Typ, ihrer Kinderzahl und dem Index, an dem ihr Teilbaum endet – und rendert dann nur die Zeilen innerhalb des Viewports. Das DOM hält unabhängig von der Dokumentgröße rund fünfzig Elemente, sodass eine große Datei genauso schnell öffnet wie eine kleine.

Dass aufgezeichnet wird, wo jeder Teilbaum endet, macht das Zuklappen günstig. Einen Zweig auszublenden ist ein einzelner Sprung im Index statt eines Durchgangs über alles darin, sodass das Zuklappen der Wurzel eines Dokuments mit 50.000 Knoten einen Vergleich kostet statt fünfzigtausend. Dieselbe Struktur macht die Suche sinnvoll: Treffer werden im gesamten Dokument gefunden, nicht nur im aufgeklappten Teil, und jeder Vorfahre auf dem Pfad zu einem Treffer bleibt erhalten, denn ein Wert ohne seinen Pfad sagt Ihnen nichts.

Das Flatten läuft iterativ, mit einem expliziten Stack statt Rekursion. Ein rekursiver Durchlauf lässt den JavaScript-Call-Stack irgendwo bei rund zehntausend Verschachtelungsebenen überlaufen, und ein so tief verschachteltes Dokument ist genau das, das jemand zu einem Viewer bringt, weil nichts anderes es öffnet. Einen Test gibt es bei zwanzigtausend Ebenen.

Jede Zeile zeigt den JSON Pointer nach RFC 6901, der sie adressiert – /order/lines/0/sku – und kopiert ihn per Klick. Das ist die Zeichenkette, die Sie in einen JSON Patch, einen jq-Pfad, eine Test-Assertion oder einen Fehlerbericht einfügen; sie exakt zu haben erspart den mühsamsten Schritt im Umgang mit einer unbekannten Antwort.

Dokument

{"order":{"lines":[{"sku":"WID-1","qty":2}]}}

Baum

▾ root            { 1 }
  ▾ order         { 1 }
    ▾ lines       [ 1 ]
      ▾ 0         { 2 }
          sku     "WID-1"     /order/lines/0/sku
          qty     2           /order/lines/0/qty

Welche Optionen und Sonderfälle unterstützt JSON anzeigen?

Technische Referenz und Optionen
ParameterTypStandardVerhalten & Sonderfälle
Anfängliche TiefeEbenen2Container, die tiefer liegen, werden standardmäßig eingeklappt, sodass ein großes Dokument als lesbare Übersicht statt als vierzigtausend Zeilen geöffnet wird. Alle erweitern ist nur einen Klick entfernt.
Virtualisierungnur Viewport—Unabhängig von der Dokumentengröße befinden sich jederzeit etwa fünfzig Zeilen im DOM. Dies ist der Unterschied zwischen einem Viewer, der eine 20-MB-Antwort öffnet, und einem, der den Tab einfriert.
SucheTeilzeichenfolgeGroß-/Kleinschreibung ignorierenSucht nach Schlüsseln und gerenderten Werten im gesamten Dokument, einschließlich eingeklappter Zweige, und behält alle Vorfahren eines Treffers bei, damit der Pfad sichtbar bleibt.
JSON-PointerRFC 6901pro Zeile angezeigtKlicken zum Kopieren. Schlüssel, die / oder ~ enthalten, werden als ~1 bzw. ~0 maskiert, damit der Zeiger korrekt und nicht nur plausibel ist.
Typfarbenstring, number, boolean, null—Skalare werden nach Typ eingefärbt, sodass eine numerische Zeichenkette "42" visuell von der Zahl 42 unterschieden wird – eine Unterscheidung, die für einen überraschend großen Anteil der Integrationsfehler verantwortlich ist.
Bearbeitennicht unterstützt—Dies ist ein Viewer. Zum Bearbeiten von Werten, Umbenennen von Schlüsseln und Neuordnen von Arrays verwenden Sie den JSON-Editor, der einen Textbereich und eine Baumansicht synchron hält.
EingabegrößeBytes8 MBDas Parsing läuft im Hauptthread. Darüber hinaus lehnt das Tool das Laden ab, anstatt einzufrieren. Der Baum selbst kann deutlich mehr Knoten verarbeiten, als vom Parsing-Limit erlaubt.

Häufig gestellte Fragen

Öffnet es auch eine wirklich große Datei?

Bis zur Parse-Obergrenze von 8 MB: ja. Der Baum ist nicht der Flaschenhals – er rendert nur, was sich auf dem Bildschirm befindet, die Knotenzahl beeinflusst ihn kaum. Die Grenze ist der Parseschritt; er läuft auf dem Main-Thread und wird über 8 MB abgelehnt statt versucht, weil ein Versuch den Tab einfrieren würde.

Was ist der /order/lines/0/sku neben jeder Zeile?

Der JSON Pointer nach RFC 6901, der diesen Knoten adressiert. Klicken Sie ihn an, um ihn zu kopieren. Das ist der Pfad, den Sie in eine JSON-Patch-Operation, eine Test-Assertion oder einen Fehlerbericht einfügen; ihn exakt zu haben – einschließlich der Escapes ~0 und ~1 für Schlüssel, die ~ und / enthalten – nimmt den fehleranfälligsten Teil davon weg zu beschreiben, wo sich etwas befindet.

Kann ich hier Werte bearbeiten?

Nein, und zwar mit Absicht. Ein Viewer, der auch bearbeitet, müsste bei jedem Tastenanschlag zwei Wahrheitsquellen abgleichen; deshalb ist der JSON-Editor ein eigenes Tool: Er hält eine Textansicht und einen Baum synchron, mit Undo. Dass dieser Viewer rein lesend ist, hält ihn schnell auch bei Dokumenten, mit denen sich der Editor schwertun würde.

Warum wird meine Zahl in einer anderen Farbe angezeigt als meine Zeichenkette?

Skalare werden nach Typ eingefärbt. Das ist wichtiger, als es klingt: Die Zeichenkette „42“ und die Zahl 42 sehen im Rohtext identisch aus und verhalten sich weiter unten im System völlig unterschiedlich. Dass ein Wert in Anführungszeichen eine Zeichenkette ist, wo eine Ganzzahl erwartet wird, ist ein wiederkehrender Grund für Integrationsfehler – und die Farbe macht das auf einen Blick sichtbar.

Durchsucht die Suche auch zugeklappte Zweige?

Ja. Die Suche läuft über das gesamte flach aufgelöste Dokument statt nur über die sichtbaren Zeilen; ein Treffer tief in einem zugeklappten Teilbaum wird also gefunden und mitsamt den Vorfahren gezeigt, die zu ihm führen. Löschen Sie die Suchanfrage, kehrt der Baum zu dem zurück, was Sie aufgeklappt hatten.

Wird das Dokument hochgeladen?

Nein. Es wird von JavaScript in dem Tab geparst und gerendert, den Sie schon offen haben. Öffnen Sie die DevTools, gehen Sie in den Netzwerk-Tab und fügen Sie eine Antwort ein – nichts, was sie enthält, verlässt den Browser. Dokumente, für die Leute einen Viewer brauchen, sind meist API-Antworten aus der Produktion – genau das Material, das nicht durch einen unbekannten Server soll, nur um lesbar gemacht zu werden.

ToolsByUs-Team · Wie wir unsere Tools prüfen