Czym jest Przeglądarka JSON?
Surowy JSON jest świetny dla maszyn i fatalny dla ludzkich oczu. Pięć poziomów nawiasów klamrowych, zbędne przecinki, jedna długa linia — znasz to. Przeglądarka JSON zamienia to w coś, co faktycznie da się przeglądać: każda tablica staje się wierszem, każdy obiekt zestawem kolumn, a zagnieżdżone struktury — tabelami wewnątrz tabel, w które możesz wejść.
Jest zrobiona na tę chwilę, kiedy po prostu chcesz ZOBACZYĆ dane. Nie parsować, nie walidować, nie konwertować — zobaczyć. Wrzuć odpowiedź z Fetch API, payload z GraphQL, linię z loga, cokolwiek. Przeglądarka rozłoży to tak, żebyś na pierwszy rzut oka wiedział, czy API zwróciło to, czego oczekiwałeś, i czy kształt pasuje do tego, czego chce Twój kod.
Wszystko działa w Twojej przeglądarce — bez uploadu, bez konta, bez limitu na liczbę cykli wklej-i-zobacz, które możesz odpalić w ciągu popołudnia.
Jak tutaj przeglądać JSON
Trzy kroki do ustrukturyzowanego widoku danych. Przyciski pod edytorem pasują do tego, co tu czytasz.
Wklej lub załaduj przykład
Skopiuj JSON z klienta API (Postman, Insomnia, zakładka Network w DevTools przeglądarki) i wklej po lewej. Jeśli chcesz najpierw zobaczyć przeglądarkę w akcji, kliknij Przykład, żeby załadować mały zestaw danych.
{"order": {"id": "ORD-4821", "customer": {"name": "Priya Shah", "tier": "gold"}, "items": [{"sku": "SKU-101", "qty": 2}, {"sku": "SKU-204", "qty": 1}], "total": 189.50}}Jeśli JSON jest nieprawidłowy, zobaczysz komunikat pod edytorem wskazujący miejsce, w którym parser się poddał.
Przeglądaj strukturę
Prawa strona przerysowuje się natychmiast przy każdej zmianie inputu. Tablice obiektów pokazują się jako wiersze z kolumnami dla każdego klucza. Zagnieżdżone obiekty i tablice stają się mini-tabelami wewnątrz komórki, więc łańcuch w stylu order.customer.tier możesz prześledzić wizualnie. Użyj Główny lub Zagnieżdżony, żeby obrócić orientację, kiedy rekord ma więcej kluczy niż wierszy — czasem łatwiej czytać klucze jako wiersze, a wartości jako kolumny. Układ trzyma się typów JSON z RFC 8259.
Zawęź to, na co patrzysz
Każda kolumna ma pole filtra. Wpisz gold w kolumnie tier, SKU-1 w kolumnie SKU, pending w kolumnie status — wiersze, które nie pasują, znikają. Filtry są bez uwzględnienia wielkości liter i łączą się (tier=gold ORAZ status=paid). Jeśli jakaś kolumna zaśmieca widok, kliknij Edytuj, a potem ikonę usunięcia (×) w nagłówku, żeby się jej pozbyć.
Przełącz na pełny ekran przy szerokich danych
Dla zbiorów z 20+ kolumnami kliknij Pełny ekran. Tabela rozszerza się na całe okno, żeby można było przewijać poziomo bez bocznego panelu. Świetne do debugowania grubego zapytania GraphQL albo zdenormalizowanego raportu.
Udostępnij lub wyeksportuj, gdy skończysz
Znalazłeś coś wartego pokazania? Kliknij Udostępnij, żeby utworzyć krótki link (1 godzina, 1 dzień lub 1 tydzień) i wyślij go koledze z zespołu — otworzy ten sam widok, ten sam JSON, bez ponownego wklejania. Albo kliknij Excel, żeby pobrać tabelę jako .xls do Excela, Google Sheets lub LibreOffice. Parsowanie leci po stronie klienta przez JSON.parse().
Kiedy przeglądarka naprawdę się przydaje
Szybki rzut oka na odpowiedzi API
Strzelasz w endpoint w Postmanie, dostajesz 8 KB JSON-a i musisz wiedzieć, czy zagnieżdżone pole shipping.address.country jest wypełnione. Wklej odpowiedź tutaj i masz odpowiedź w dwie sekundy. Bez parsowania JSON-a w głowie.
Czytanie strumieni logów
Ustrukturyzowane logi z <a href="https://www.elastic.co/elasticsearch" target="_blank" rel="noopener">Elasticsearcha</a>, CloudWatcha czy dowolnego loggera JSON-line lądują jako jednoliniowe kleksy. Wrzuć jeden tutaj, żeby zobaczyć timestamp, service, level, message i trace ID ładnie rozłożone — przydatne, kiedy o 2 w nocy śledzisz niestabilny serwis.
Przegląd przykładów schematów
Patrzysz na przykładowe payloady w specyfikacji <a href="https://swagger.io/specification/" target="_blank" rel="noopener">Swagger/OpenAPI</a> albo w README zespołu? Wklej blok z przykładem i przejdź przez kształt pole po polu. Szybciej niż czytanie wciętego JSON-a od góry do dołu i od razu wyłapiesz pola opcjonalne lub brakujące.
Pokazywanie danych interesariuszom
Twój PM chce wiedzieć, co zwraca API checkoutu, ale "oto JSON blob" nie przejdzie. Wygeneruj link, wklej na Slacku, a oni zobaczą porządną tabelę — bez wyjaśniania, czym są nawiasy i dwukropki.
FAQ
Czym różni się przeglądarka JSON od parsera JSON?
Mocno się pokrywają, ale akcent pada gdzie indziej. Parser skupia się na akcie zamieniania tekstu JSON w używalną strukturę (i wskazywaniu złej składni). Przeglądarka skupia się na wyjściu — jak sparsowany wynik jest pokazany, żebyś mógł go przeczytać. To narzędzie robi oba pod spodem, ale UI jest wyostrzony pod przeglądanie dużych lub głęboko zagnieżdżonych danych, a nie samą walidację.
Czy moje dane wychodzą z przeglądarki?
Nie. Parsowanie i renderowanie dzieje się lokalnie w JavaScripcie. Dane wychodzą tylko wtedy, kiedy klikniesz "Udostępnij", żeby wygenerować krótki link, i nawet wtedy kontrolujesz termin wygaśnięcia (od 1 godziny do 1 tygodnia). Jeśli oglądasz coś wrażliwego, po prostu nie udostępniaj — zamknij kartę i tyle.
Jak głębokie może być zagnieżdżenie?
Brak sztywnego limitu. Przeglądarka rekurencyjnie renderuje zagnieżdżone tablice i obiekty do dowolnej głębokości, jaką jej dasz. Głębokie struktury w pewnym momencie robią się wizualnie gęste — piąty czy szósty poziom w głąb warto potraktować filtrem wiersza, żeby skupić się na gałęzi, która naprawdę Cię interesuje, albo przełączyć orientację zagnieżdżenia przyciskiem Zagnieżdżony.
Czy zobaczę też tablice prymitywów, nie tylko obiektów?
Tak. Tablica taka jak ["read", "write", "admin"] renderuje się jako jednokolumnowa lista. Mieszane tablice (obiekty + prymitywy) też działają — każdy element dostaje własny wiersz, a przeglądarka sama wylicza zestaw kolumn z tego, jakie klucze występują w obiektach.
Dlaczego po odświeżeniu JSON-a brakuje niektórych kolumn?
Jeśli wcześniej usunąłeś kolumny (ikoną × w trybie edycji), przeglądarka pamięta to dla bieżącej sesji i ukrywa też te klucze z JSON-a. Wklejenie świeżego JSON-a odpala wykrywanie od nowa. Jeśli brakuje kolumny, której się spodziewałeś, sprawdź, czy tryb edycji jej nie wyrzucił albo czy klucz rzeczywiście istnieje w każdym rekordzie.
Jak duży plik JSON jest komfortowy?
Pliki do kilku MB renderują się szybko. Powyżej 5 MB poczujesz, że przeglądarka pracuje. Powyżej 10 MB robi się ślamazarnie, ale przeglądarka i tak sobie radzi — jeśli rutynowo mielisz zbiory 50 MB+, chwyć narzędzie CLI jak jq albo gron, a potem wklej tutaj odpowiedni wycinek.
Powiązane narzędzia JSON
Przeglądanie to tylko jeden wycinek tego, co możesz chcieć zrobić z JSON-em. Jeśli potrzebujesz czegoś bardziej konkretnego, spróbuj tych: