Un beautifier JSON che il tuo JSON non lo vede mai.

Un JSON beautifier legge un documento, lo analizza fino a ottenere un albero di oggetti, array, stringhe, numeri, booleani e null, e riscrive quell'albero con un valore per riga e un'indentazione coerente. La parola importante è analizza. Non sta inserendo a capo dopo ogni virgola con un'espressione regolare, che è il modo in cui lo fanno moltissimi frammenti di codice in giro per il web, e che distrugge in silenzio qualunque stringa contenga una virgola o una parentesi graffa.

Questo ha una conseguenza immediata: un documento che non è JSON valido non può essere abbellito. Non c'è nessun albero da stampare. Per questo qui abbellire e validare sono la stessa operazione e non due pulsanti, e per questo un incollaggio non valido restituisce riga, colonna e una descrizione di ciò che era atteso, invece di un pannello di output vuoto.

Gli spazi fuori dalle stringhe non significano nulla in JSON. La RFC 8259 consente spazio, tabulazione, ritorno a capo e avanzamento riga fra due token qualsiasi, quindi riformattare non può cambiare il significato di un documento. Lo spazio dentro una stringa è un dato e resta esattamente com'era. Un formattatore che lavora sul testo invece che su un albero sintattico non sa distinguere i due casi, ed è questo il modo più comune in cui la formattazione corrompe un payload.

L'ordine delle chiavi viene mantenuto. La specifica considera gli oggetti non ordinati, quindi nulla dovrebbe dipenderne, ma l'ordine in cui hai incollato è quasi sempre quello che si aspettano un diff, una code review o una persona che legge, e riordinare le chiavi rende rumoroso ogni confronto successivo senza alcun guadagno.

Incolla nel pannello di sinistra e premi Abbellisci. Il documento formattato compare a destra, pronto da copiare o scaricare. Non c'è un account, non c'è un passaggio di upload, non c'è una quota giornaliera e non c'è un muro di pagamento da nessuna parte, che è ciò che intende la maggior parte delle persone quando cerca un JSON beautifier online gratis e non la prova di un prodotto desktop.

L'indentazione predefinita è di due spazi, che è dove si fermano quasi tutti gli ecosistemi e quasi tutte le guide di stile. Quattro spazi e tabulazioni sono comunque disponibili se il tuo repository ha già deciso per te, e la scelta viene ricordata localmente nel browser e non su un server, perché non c'è nessun server su cui ricordarla.

Tutto gira in un Web Worker, così l'interfaccia resta reattiva mentre un documento viene analizzato. Un payload da 100 KB si formatta in circa 9 o 13 ms, 1 MB in 70 o 119 ms, e 10 MB in circa 0,6 o 0,8 secondi, misurati su una macchina desktop nell'arco di due esecuzioni. Prendili come un intervallo e non come un benchmark, ma la forma è ciò che conta: 10 MB sono lavoro sufficiente a congelare del tutto un thread principale, e qui non girano su uno.

Dopo la prima visita la pagina resta in cache, quindi questo JSON beautifier online continua a funzionare con la rete scollegata. Non è un trucco da service worker. È il risultato naturale di una pagina statica che fa il suo lavoro in locale: senza rete il ping di analytics semplicemente fallisce, e ogni strumento prosegue, perché nessuno di essi aveva bisogno di un server in partenza.

La maggior parte dei formattatori è un'area di testo e un pulsante. Entra l'incollato, esce il testo formattato, e se il documento era rotto torni nel tuo editor a tirare a indovinare. Il pannello qui è un vero editor di codice, con evidenziazione della sintassi, corrispondenza delle parentesi, ripiegamento del codice, ricerca incrementale e marcatori di errore in linea, così puoi correggere ciò che hai incollato e riformattarlo senza lasciare la pagina.

Il ripiegamento conta più di quanto sembri. Un file di configurazione da 4.000 righe non è leggibile solo perché è indentato. Ciò che lo rende davvero leggibile è collassare ogni ramo tranne quello che ti interessa, ed è una proprietà dell'editor, non del formattatore.

Se vuoi lo stesso documento come albero ripiegabile invece che come testo, il visualizzatore JSON lo mostra così. La validazione segnala ogni problema invece di fermarsi al primo. La riparazione gestisce il quasi-JSON, come apici singoli, virgole finali e chiavi senza virgolette, ed elenca ogni modifica fatta perché tu possa rifiutare quelle che erano scelte discutibili e non correzioni.

Chi cerca il miglior visualizzatore e JSON beautifier online di solito non sta chiedendo dell'indentazione, che tutti gli strumenti fanno bene. Sta chiedendo dei documenti che rompono gli strumenti: interi più grandi di quanto JavaScript possa contenere, chiavi duplicate e caratteri invisibili incollati da un client di chat o da un elaboratore di testi. Qui vengono gestiti, sono descritti sopra con output reale, e sono l'unica parte su cui valga la pena discutere.

Una scheda del browser non è sempre il posto in cui vuoi che questo accada. Se il file è già aperto nel tuo editor, il JSON beautifier più veloce è quello legato lì a un tasto.

Notepad++ non ha un formattatore JSON integrato. La risposta abituale è il plugin JSTool: apri Plugins, poi Plugins Admin, cerca JSTool, installalo, riavvia, e il comando compare sotto Plugins, JSTool, JSFormat. Funziona, e per i payload di tutti i giorni è lo strumento giusto. Tieni presente che JSTool analizza i numeri come float a 64 bit, quindi un ID in stile Twitter o Snowflake sopra 9007199254740991 torna indietro con cifre diverse da quelle con cui era entrato, senza dirlo.

Sublime Text usa il pacchetto Pretty JSON, installato tramite Package Control e associato a Ctrl+Alt+J per impostazione predefinita. Formatta attraverso Python, il che significa che gli interi grandi sopravvivono esatti, un vantaggio reale rispetto alle opzioni basate su JavaScript. In compenso elimina le chiavi duplicate senza dire nulla, tenendo l'ultima.

VS Code non ha bisogno di alcun plugin. Formatta documento, cioè Maiusc+Alt+F su Windows e Linux e Maiusc+Opzione+F su macOS, formatta qualsiasi file che l'editor riconosca come JSON. C'è anche un comando Format JSON nella palette.

Ciò che nessuno di questi ti dà è una diagnosi. Formattano un documento valido e rifiutano un documento non valido, il che va benissimo finché il documento non è invalido e lungo 40.000 righe. È il caso per cui questa pagina è fatta, ed è anche quello di una macchina su cui non ti è concesso installare plugin.

Un'estensione JSON beautifier per Chrome fa una cosa davvero utile: intercetta le risposte servite come application/json e le mostra formattate e ripiegabili nella barra degli indirizzi, così una API che stai esplorando diventa leggibile senza passare da un formattatore. Firefox lo fa in modo nativo dalla versione 44 e per questo non ha bisogno di alcuna estensione.

Vale la pena leggere il costo prima di installarne una. Per riscrivere la pagina di qualunque API tu visiti, l'estensione deve chiedere il permesso di leggere e modificare i tuoi dati su tutti i siti web, cioè il permesso più ampio che Chrome conceda. Quel permesso copre la tua banca, la tua posta e la console di amministrazione della tua azienda, e persiste attraverso ogni aggiornamento silenzioso che l'estensione pubblicherà in seguito. Un'estensione JSON beautifier è una cosa ragionevole da installare se viene da un manutentore di cui hai motivo di fidarti, e una pessima cosa da installare perché era il primo risultato.

Questa pagina non ha bisogno di niente di tutto ciò. Funziona allo stesso modo in Chrome, Firefox, Safari ed Edge, non installa nulla e non detiene alcun permesso sugli altri siti che visiti, perché una pagina non è un'estensione: può leggere se stessa e nient'altro. Incollare è un tasto in più rispetto a un'estensione che intercetta, ed è tutta la differenza.

Per questo non serve una libreria. JSON.stringify accetta un terzo argomento che controlla l'indentazione, ed è presente in ogni runtime JavaScript: JSON.stringify(valore, null, 2) indenta con due spazi, e passare una stringa invece di un numero, come in JSON.stringify(valore, null, "\t"), indenta con tabulazioni.

È quando si riversa il risultato in una pagina che un JSON beautifier in HTML sbaglia. L'output deve stare dentro un elemento <pre> o ogni sequenza di spazi collassa e hai disfatto la formattazione, e va sottoposto a escaping prima di essere inserito come HTML. Altrimenti un valore stringa che contiene </script> o una parentesi angolare viene consegnato al parser come markup, che è un buco di cross site scripting con qualche passaggio in più.

In React quell'escaping è già fatto per te. <pre>{JSON.stringify(dati, null, 2)}</pre> è per intero un JSON beautifier React ai fini del debug, e poiché React esegue l'escaping del testo interpolato per impostazione predefinita, è sicuro anche con input non attendibile. La regola è semplicemente non ricorrere mai a dangerouslySetInnerHTML per mostrare JSON, che è l'unico modo di perdere quella garanzia.

L'avvertenza valida per tutti questi casi è la precisione numerica. JSON.parse trasforma ogni numero in un double, quindi un identificatore sopra 2^53-1 è già il numero sbagliato prima ancora che JSON.stringify lo veda, e nessuna formattazione riporta indietro quelle cifre. Se il tuo payload porta ID grandi, leggi prima che cosa succede a un intero sopra 2^53-1. Il beautifier di questa pagina riemette le cifre esatte che hai incollato, ed è il motivo per cui il suo output e un giro di andata e ritorno per JSON.parse non sempre coincidono.