Visualizador de árvore JSON

O que é esta ferramenta?

Um visualizador de árvore JSON transforma um documento JSON num esquema navegável: cada objeto e cada array torna-se um nó que pode expandir ou recolher, cada chave mostra o seu tipo inferido, e cada valor final é apresentado em linha. Em vez de percorrer milhares de linhas de texto, aprofunda apenas os ramos que realmente lhe interessam.

Isto é diferente de um formatador de JSON. Um formatador reescreve o texto do seu JSON com indentação para ficar mais organizado — é a ferramenta certa quando só precisa de embelezar, minimizar ou validar a sintaxe. Um visualizador de árvore serve para explorar e navegar a própria estrutura, especialmente quando o JSON é grande, profundamente aninhado, ou ainda não sabe onde está o dado de que precisa. Se só quer embelezar ou validar texto JSON, use antes o Formatador de JSON.

Por que usar?

• Navegue por respostas de API ou arquivos de configuração muito aninhados sem perder a noção de a que nível pertence cada chaveta.
• Pesquise por nome de chave ou valor e salte diretamente para o resultado, com o caminho automaticamente expandido.
• Lida com JSON muito grandes (vários megabytes) sem esforço — os nós filhos só são construídos quando os expande, por isso o separador nunca bloqueia.
• Veja o tipo de cada valor num relance — string, número, booleano, null, objeto ou array — com rótulos claros.
• 100% privado: a análise e a renderização acontecem inteiramente no seu navegador, nada é enviado ou armazenado.

Como usar

1. Cole o seu JSON na caixa de entrada, ou use o seletor de arquivos para carregar um arquivo JSON do disco.
2. Clique em "Mostrar árvore" para construir a vista interativa.
3. Clique na seta ao lado de qualquer objeto ou array para o expandir ou recolher — nós além de dois ou três níveis começam recolhidos automaticamente para que arquivos grandes se mantenham responsivos.
4. Digite um nome de chave ou valor na caixa de pesquisa para encontrar correspondências; a ferramenta expande cada nó pai pelo caminho e desloca-se até o resultado, destacando-o.
5. Use os botões seguinte/anterior para percorrer várias correspondências.

Exemplo

Entrada

{"user":{"id":42,"name":"Ada","roles":["admin","editor"],"active":true,"manager":null}}

Resultado

user: { 4 chaves }
  id: 42 (número)
  name: "Ada" (string)
  roles: [ 2 itens ]
    0: "admin"
    1: "editor"
  active: true (booleano)
  manager: null

Cada linha mostra a chave, o seu tipo inferido, e o valor (para folhas) ou uma contagem recolhida (para objetos e arrays) até o expandir.

Dicas práticas

• Para respostas de API enormes, pesquise primeiro um nome de campo distintivo (como um id ou um código de erro) em vez de expandir nó a nó manualmente — a pesquisa leva-o diretamente até lá.
• Nós além dos dois primeiros níveis começam recolhidos de propósito, para que uma carga de vários megabytes se mantenha responsiva; expanda apenas o ramo de que precisa.
• Os rótulos de tipo (string, número, booleano, null, objeto, array) são especialmente úteis para detetar um campo que está inesperadamente null ou um array onde esperava um objeto.
• Se só precisa de embelezar ou validar um trecho de JSON em vez de explorar a sua estrutura, o Formatador de JSON é mais rápido para essa tarefa.

Onde isto se encaixa em fluxos de trabalho reais

Respostas de API profundamente aninhadas, exportações de bases de dados e arquivos de configuração são difíceis de interpretar como texto simples — perde-se facilmente a noção de qual chaveta de fecho corresponde a qual chave. Carregar a mesma carga útil numa vista em árvore permite recolher tudo o que não precisa e concentrar-se apenas no ramo que importa, o que é muito mais rápido do que percorrer um bloco de texto formatado à procura de um único campo.

Um fluxo comum: cole aqui primeiro uma grande carga útil de webhook para perceber a sua forma e encontrar o campo de que precisa, depois mude para o Formatador de JSON se precisar de uma cópia de texto limpa e indentada para colar num relatório de erro ou revisão de código.

→ Formatador JSON

Casos de uso comuns

• Explorar uma resposta de API grande e profundamente aninhada para encontrar onde está um campo específico antes de escrever código sobre ele.
• Rever um arquivo de configuração ou exportação grande sem percorrer milhares de linhas de texto em bruto.
• Verificar a forma e os tipos de uma carga útil JSON desconhecida antes de a analisar no seu próprio código.
• Localizar um valor específico (um ID, uma mensagem de erro, uma marca temporal) escondido algures dentro de um documento JSON grande.

Perguntas frequentes