Formatowanie JSON za darmo
Formatuj, waliduj, minimalizuj i przeglądaj dane JSON. Widok drzewa, podświetlanie składni i kopiowanie jednym kliknięciem.
Typowe zastosowania
- Formatuj Odpowiedzi APIWklej surowe odpowiedzi JSON API i natychmiast sformatuj je na czytelne, wcięte dane wyjściowe.
- Formatuj Pliki Konfiguracyjne JSONWyczyść i sprawdź poprawność plików konfiguracyjnych JSON — package.json, tsconfig.json, ustawienia i inne.
- Formatuj JSON do DebugowaniaNatychmiast rozszyfruj zmniejszone lub ucieczkowe dzienniki JSON, ładunki błędów i dane wyjściowe bazy danych.
- Formatuj Pliki Tłumaczeń JSONSprawdź i sformatuj pliki tłumaczeń JSON i18n (en.json, de.json) używane w aplikacjach React, Vue i Next.js.
- Inspekcja i Formatuj Ładunki WebhookWklej surowe ładunki webhook z Stripe, GitHub lub Shopify i czytaj je czytelnie sformatowane.
Jak to działa
Formater działa w całości w przeglądarce, z użyciem wbudowanych w JavaScript JSON.parse i JSON.stringify — bez biblioteki i serwera. Parsowanie, formatowanie, minifikacja i interaktywny widok drzewa odbywają się lokalnie podczas pisania.
- 1Parsowanie na żywoJSON.parse uruchamia się 200 ms po ostatnim naciśnięciu klawisza. Jeśli parsowanie się nie powiedzie, ręcznie napisana funkcja lokalizacji błędu odczytuje komunikat SyntaxError z V8 lub Firefoksa, wyodrębnia numer wiersza i kolumny i oferuje link przenoszący do błędu w polu tekstowym.
- 2Wykrywanie niebezpiecznych liczb całkowitychPrzed wyświetleniem wyniku narzędzie skanuje surowe źródło w poszukiwaniu literałów całkowitych o 16 lub więcej cyfrach (z pominięciem tych w ciągach w cudzysłowach) i sprawdza każdy przez Number.isSafeInteger. Jeśli którykolwiek zostałby po cichu zaokrąglony przez zapis podwójnej precyzji IEEE-754, przed skopiowaniem lub pobraniem pojawia się ostrzeżenie.
- 3Formatowanie, minifikacja i sortowanie kluczyJSON.stringify(value, null, indent) tworzy sformatowany lub zminifikowany wynik. Gdy sortowanie kluczy jest włączone, funkcja rekurencyjna przechodzi przez każdy obiekt w sparsowanym drzewie i odbudowuje go z Object.keys(...).sort() przed serializacją — tablice pozostają w oryginalnej kolejności.
- 4Interaktywny widok drzewaWidok drzewa to ręcznie napisane rekurencyjne spłaszczanie, które zamienia sparsowany obiekt na płaską listę węzłów z głębokością, ścieżką i stanem rozwinięcia/zwinięcia. Renderowanie jest ograniczone do 5000 widocznych węzłów, aby karta nie zamarzała przy wielomegabajtowych dokumentach z dużymi rozwiniętymi tablicami.
Wszystko działa lokalnie w przeglądarce — Twój JSON nigdy nie jest wysyłany na żaden serwer.
Powiązane narzędzia
Minifikator i upiększacz CSS
Minifikuj CSS, aby zmniejszyć rozmiar pliku, lub upiększaj minifikowany CSS dla czytelności. Natychmiastowo, w Twojej przeglądarce.
Upiększacz CSS
Formatuj zminifikowany CSS z równymi wcięciami albo go minifikuj. Opcjonalne sortowanie właściwości alfabetycznie dla czytelnych różnic.
Upiększacz i minifikator HTML
Formatuj lub minifikuj HTML z właściwym wcięciem zagnieżdżenia. Zachowuje treść wewnątrz bloków <pre>, <script>, <style>.