Visualizador de árvore JSON

O que é um visualizador de árvore JSON?#

Um visualizador de árvore JSON analisa um documento JSON e desenha-o como um esquema que pode recolher, à imagem de como um explorador de arquivos apresenta uma árvore de pastas. Em vez de ler uma longa parede de texto indentado e contar chavetas para perceber o que está dentro do quê, vê a estrutura num relance: objetos e arrays são ramos que pode clicar para abrir ou fechar, e os valores folha — strings, números, booleanos, null — ficam nas pontas.

Isto importa mais quando o documento é profundo ou desconhecido. Uma única resposta de API pode facilmente chegar a centenas de linhas; um arquivo de configuração pode ter definições aninhadas quatro ou cinco níveis abaixo de nomes parecidos. Numa formatação plana, perde-se a rolar e perde-se o sítio. Numa árvore, recolhe-se tudo exceto o ramo que interessa, e o resto deixa de competir pela atenção.

Esta página analisa o seu JSON no navegador e renderiza uma árvore recolhível nó a nó, usando conteúdo de texto simples em vez de interpretar a entrada como HTML — pelo que mesmo um documento que contenha tags <script> ou strings com aspeto de HTML é mostrado inerte, não executado.

Como usar#

1. Cole o seu JSON no painel Entrada à esquerda. A análise acontece à medida que escreve.
2. A árvore aparece à direita. Cada objeto ou array mostra um alternador ▼, o seu parêntesis de abertura ({ ou [), o número de entradas lá dentro e o seu parêntesis de fecho. Clique no alternador — ou nos próprios parêntesis — para recolher ou expandir esse ramo.
3. Use Expandir tudo para abrir todos os ramos até às folhas, e Recolher tudo para encolher todo o documento de volta só à raiz. Recolher é a forma de obter uma visão geral numa linha de um payload extenso antes de aprofundar.
4. O cabeçalho à direita mostra uma contagem das entradas de topo da raiz (por exemplo 5 itens), para que se consiga perceber num relance o tamanho do documento.
5. Exemplo carrega um documento de demonstração aninhado; Limpar esvazia ambos os painéis.

Principais funcionalidades#

• Recolher qualquer ramo de forma independente. Cada contentor abre e fecha por si, pelo que pode manter um sub-objeto expandido para referência enquanto o resto se mantém recolhido.
• Guias de profundidade. Os filhos ficam indentados sob uma linha-guia vertical, tornando óbvio a que chaveta pertence uma entrada mesmo em documentos densos.
• Renderização segura contra XSS. Cada etiqueta e valor é escrito como conteúdo de texto simples — a entrada nunca é analisada como HTML. Uma string com aparência maliciosa limita-se a ser exibida como texto.
• Valores folha fiéis. As strings mantêm as aspas envolventes e os números são renderizados exatamente como JSON.stringify os escreveria, pelo que true (booleano) é visualmente distinto de "true" (string).
• Contagem em tempo real. O cabeçalho indica quantas entradas a raiz contém, atualizado à medida que edita.

Exemplo prático#

Carregue em Exemplo e a árvore analisada mostra um objeto raiz com cinco entradas de topo:

▼ { 5
    "name": "ArpGate DevTools"
    "version": 1
    "active": true
  ▼ "tags": [ 3 ]
  ▼ "features": { 2 }

Duas dessas entradas são elas próprias contentores. Expandir tags mostra o array de três elementos ("json", "encoding", "crypto"), e expandir features revela que static é true enquanto backend é null — uma distinção que a árvore renderiza explicitamente em vez de a deixar adivinhar a partir de um despejo plano.

Se só lhe interessa o sub-objeto features, clique em todos os outros ▼ do nível de topo para os recolher. A contagem 5 na raiz mantém-se correta, e a linha-guia de profundidade torna óbvio que static e backend pertencem a features, não à raiz.

FAQ#

Isto modifica ou reformata o meu JSON?#

Não. A árvore é uma vista só de leitura do valor analisado. O texto de entrada nunca é reescrito, re-indentado ou emitido. Se quiser o documento embelezado como texto, use antes o formatador; esta ferramenta serve para navegar, não para normalizar.

Porque é que as strings ainda têm aspas na árvore?#

Porque é assim que o próprio JSON distingue uma string de uma palavra-chave solta. Sem as aspas, true e "true" pareceriam idênticos, e o mesmo valeria para null e a string "null". Manter as aspas (exatamente como JSON.stringify as produz) preserva essa distinção num relance.

Como lida com documentos muito grandes?#

A análise e a renderização acontecem inteiramente no seu navegador, pelo que não há envio nem ida-e-volta ao servidor. Para configurações e respostas de API típicas é instantâneo. Para um documento de vários megabytes, a árvore tem de criar um nó para cada valor, o que pode tornar-se lento — recolha os ramos de que não precisa para manter o número de nós visível gerível.

Uma string que contenha HTML vai ser renderizada como HTML?#

Nunca. A ferramenta escreve cada valor como conteúdo de texto, que o navegador trata como caracteres inertes. Uma string que por acaso contenha <script> ou <img onerror=...> é exibida à letra como texto — não é analisada como markup nem pode ser executada.