Cos’è il Visualizzatore JSON?
Il JSON grezzo va benissimo per le macchine ed è un incubo per gli occhi. Cinque livelli di graffe, virgole finali, tutto su una riga sola — sai com’è. Il Visualizzatore JSON trasforma quella roba in qualcosa che puoi davvero sfogliare: ogni array diventa una riga, ogni oggetto diventa un insieme di colonne, e le strutture annidate diventano tabelle dentro tabelle in cui puoi entrare.
È pensato per quel momento in cui vuoi solo VEDERE i dati. Non analizzarli, non validarli, non convertirli — vederli. Buttaci dentro una risposta fetch, un payload GraphQL, una riga di log, quello che capita. Il viewer ti mostra il tutto in modo che a colpo d’occhio capisci se l’API ha restituito quello che ti aspettavi e se la forma combacia con quello che vuole il tuo codice.
Tutto gira nel tuo browser — niente upload, niente account, nessun limite al numero di cicli incolla-e-visualizza che puoi fare in un pomeriggio.
Come visualizzare JSON qui
Tre passi per avere una vista strutturata dei tuoi dati. I pulsanti sotto l’editor corrispondono a quello che leggi qui.
Incolla o carica un esempio
Copia il JSON dal tuo client API (Postman, Insomnia, scheda Network dei DevTools del browser) e incollalo a sinistra. Se vuoi prima vedere il viewer in azione, clicca Esempio per caricare un piccolo dataset.
{"order": {"id": "ORD-4821", "customer": {"name": "Priya Shah", "tier": "gold"}, "items": [{"sku": "SKU-101", "qty": 2}, {"sku": "SKU-204", "qty": 1}], "total": 189.50}}Se il tuo JSON è malformato, vedi un messaggio subito sotto l’editor che indica dove il parser si è arreso.
Sfoglia la struttura
Il lato destro si ridisegna all’istante ogni volta che cambia l’input. Array di oggetti diventano righe con una colonna per ogni chiave. Oggetti e array annidati diventano mini-tabelle dentro la cella, così puoi seguire una catena come order.customer.tier a colpo d’occhio. Usa Principale o Annidato per cambiare orientamento quando un record ha più chiavi che righe — a volte è più comodo leggere le chiavi come righe e i valori come colonne. Il layout segue i tipi JSON definiti in RFC 8259.
Restringi quello che stai guardando
Ogni colonna ha una casella di filtro. Scrivi gold nella colonna tier, SKU-1 in una colonna SKU, pending in una colonna status — le righe che non combaciano spariscono. I filtri sono case-insensitive e si combinano (tier=gold AND status=paid). Se una colonna ti intralcia, clicca Modifica, poi l’icona rimuovi (×) nell’intestazione per toglierla.
Vai a schermo intero per dati larghi
Per dataset con 20+ colonne, premi Schermo intero. La tabella si espande su tutta la viewport così puoi scrollare orizzontalmente senza il pannello laterale tra i piedi. Ottimo per debuggare una query GraphQL cicciona o un report denormalizzato.
Condividi o esporta quando hai finito
Hai trovato qualcosa da segnalare? Premi Condividi per creare un link breve (1 ora, 1 giorno o 1 settimana) e mandalo a un collega — apre la stessa vista, stesso JSON, senza re-incollare nulla. Oppure clicca Excel per scaricare la tabella come .xls per Excel, Google Sheets o LibreOffice. Il parsing avviene lato client via JSON.parse().
Quando il viewer ripaga
Dare un’occhiata alle risposte API
Chiami un endpoint in Postman, ti tornano 8 KB di JSON e devi capire se un campo annidato tipo shipping.address.country è valorizzato. Incolla la risposta qui e hai la risposta in due secondi. Niente parsing mentale di JSON.
Leggere stream di log
I log strutturati di <a href="https://www.elastic.co/elasticsearch" target="_blank" rel="noopener">Elasticsearch</a>, CloudWatch o di qualunque logger JSON-line arrivano come blob su una sola riga. Buttane uno qui dentro e vedi timestamp, servizio, livello, messaggio e trace ID ben disposti — utile quando stai seguendo un servizio ballerino alle 2 di notte.
Rivedere esempi di schema
Stai guardando payload di esempio in una spec <a href="https://swagger.io/specification/" target="_blank" rel="noopener">Swagger/OpenAPI</a> o nel README del team? Incolla il blocco di esempio e scorri la forma campo per campo. Più veloce che leggere JSON indentato dall’alto in basso, e i campi opzionali/mancanti li noti subito.
Mostrare i dati agli stakeholder
Il tuo PM vuole sapere cosa restituisce l’API del checkout, ma “ecco un blob JSON” non basta. Genera un link di condivisione, incollalo in Slack e lui vede una tabella vera — senza spiegare cosa sono parentesi e due punti.
FAQ
Che differenza c’è tra un visualizzatore JSON e un parser JSON?
Si sovrappongono parecchio, ma l’inquadratura è diversa. Un parser si concentra sull’atto di trasformare il testo JSON in una struttura usabile (e segnalare sintassi sbagliata). Un viewer si concentra sull’output — su come il risultato parsato viene presentato per renderlo leggibile. Questo strumento fa entrambe le cose sotto il cofano, ma l’UI è tarata per sfogliare dati grandi o profondamente annidati, più che per validarli.
I miei dati escono dal browser?
No. Parsing e rendering avvengono localmente con JavaScript. L’unica volta in cui i dati escono è se clicchi “Condividi” per creare un link breve, e anche lì la scadenza la scegli tu (da 1 ora a 1 settimana). Se stai guardando qualcosa di sensibile, semplicemente non condividere — chiudi la tab e sparisce.
Quanto può essere profondo l’annidamento?
Nessun limite rigido. Il viewer renderizza ricorsivamente array e oggetti annidati a qualunque profondità. Ovviamente le strutture molto profonde diventano visivamente pesanti a un certo punto — a cinque o sei livelli, conviene usare la riga di filtro per concentrarti sul ramo che ti interessa, oppure cambiare l’orientamento annidato col pulsante Annidato.
Posso vedere anche array di valori primitivi, non solo di oggetti?
Sì. Un array tipo ["read", "write", "admin"] viene renderizzato come una lista a singola colonna. Anche gli array misti (oggetti + primitivi) funzionano — ogni elemento ha la sua riga e il viewer deriva l’insieme delle colonne da tutte le chiavi presenti negli oggetti.
Perché mancano alcune colonne dopo che ho aggiornato il JSON?
Se avevi rimosso colonne prima (con l’icona × in modalità modifica), il viewer se lo ricorda per la sessione corrente e nasconde anche le chiavi sottostanti del JSON. Incollando JSON nuovo viene rifatta la rilevazione. Se manca una colonna che ti aspetti, controlla se la modalità modifica l’ha tolta, o se la chiave esiste davvero in ogni record.
Quanto può essere grande un file JSON senza problemi?
File fino a qualche MB vengono renderizzati velocemente. Oltre i 5 MB il browser inizia a faticare. Sopra i 10 MB diventa lento ma il viewer regge comunque — se hai a che fare regolarmente con dataset da 50 MB+, prima passalo da un tool CLI come jq o gron, poi incolla qui la fetta che ti interessa.
Altri strumenti JSON correlati
Visualizzare è solo una fetta di quello che potresti voler fare col JSON. Se ti serve qualcosa di più specifico, prova questi: