JSON Tree Viewer

1. 1

   Abra o seu JSON

   Arraste um arquivo .json, .jsonl, .geojson, .har ou .map para a área de soltar, escolha um, ou cole JSON diretamente na caixa de texto. Nada é enviado - o arquivo é lido no seu dispositivo.

2. 2

   Explore a árvore

   Objetos e listas abrem e fecham pela seta ao lado, e cada um mostra quantos filhos contém. Use Abrir até a profundidade ou Recolher tudo para mudar toda a forma de uma vez.

3. 3

   Encontre o que precisa

   Busque qualquer chave ou valor, com expressões regulares se quiser, e percorra as ocorrências. Para um recorte preciso, filtre com uma expressão JSONPath como $..author ou $.items[0:10].

4. 4

   Mude para a tabela

   Quando o documento é uma lista de registros, a vista de tabela os organiza em colunas em vez de repetir o mesmo ramo centenas de vezes.

5. 5

   Copie ou exporte

   Copie o caminho, a chave ou o valor de qualquer nó, ou baixe o documento inteiro - ou apenas a subárvore selecionada - formatado, minificado, inalterado ou como NDJSON.

Abrir um arquivo JSON e lê-lo: é todo o trabalho, e fazê-lo bem com um arquivo de qualquer tamanho ou forma acaba exigindo mais que uma lista recolhível. Este visualizador indexa o arquivo em vez de convertê-lo em objetos, então abre rápido, mostra exatamente o que o arquivo contém e continua respondendo tenha o documento duas linhas ou dois milhões de nós.

• Uma árvore que escala. Objetos e listas expandem e recolhem em qualquer profundidade, e só as linhas visíveis são desenhadas - uma exportação de 200.000 registros rola tão suavemente quanto um pequeno arquivo de configuração.
• Uma tabela quando os dados são tabulares. Uma lista de registros vira linhas e colunas, com as colunas deduzidas dos dados.
• Buscar e filtrar. Ocorrências em chaves, valores ou ambos, com expressões regulares; ou um recorte preciso com uma expressão JSONPath.
• Exatamente o que o arquivo diz. Números grandes mantêm todos os dígitos, chaves duplicadas são mantidas e sinalizadas, e as sequências de escape do arquivo sobrevivem.
• Leitura tolerante. Comentários, vírgulas sobrando, aspas simples e chaves sem aspas podem ser lidos, com cada mudança relatada.
• Copiar e exportar. Qualquer caminho, chave, valor ou subárvore para a área de transferência; o documento inteiro ou um ramo para um arquivo.

O tamanho é onde a maioria dos visualizadores JSON de navegador deixa de ser útil. A abordagem usual converte o documento em objetos JavaScript e desenha um elemento por nó, o que custa memória proporcional ao arquivo e monta o documento inteiro antes de mostrar qualquer coisa. Passados alguns megabytes, isso vira uma aba congelada.

O que este visualizador faz no lugar

• Indexa em vez de converter. O arquivo é percorrido uma vez para uma tabela compacta de posições. Nenhum objeto JavaScript é criado para qualquer parte do documento.
• Trabalha longe da página. Percorrer, buscar, filtrar e exportar acontecem fora da thread que desenha a tela, então a página nunca congela e a rolagem nunca engasga.
• Desenha só o que dá para ver. Existem cerca de quarenta linhas por vez, não importa quantas o documento tenha.
• Decodifica texto sob demanda. Uma chave ou valor vira texto legível quando aparece na tela, e não antes.
• Lida com profundidade sem falhar. O aninhamento é percorrido de forma iterativa, então um documento muito aninhado é lido como qualquer outro em vez de esgotar a pilha.

Encontrar um campo num documento grande é a tarefa para a qual um visualizador existe, e há duas perguntas diferentes por trás: onde este texto aparece, e o que existe neste caminho? Ambas são respondidas aqui, e ambas rodam sobre o índice em vez das linhas desenhadas, então uma ocorrência no fim de um arquivo enorme é achada tão rápido quanto uma no começo.

As duas formas de olhar

• Busca. Digite qualquer texto para encontrar chaves, valores ou ambos. Diferenciar maiúsculas é opcional e expressões regulares são aceitas, com ^ e $ combinando em limites de linha como num editor.
• Percorrer as ocorrências. As ocorrências são listadas na ordem do documento; ir até uma abre todos os ramos acima e destaca o texto dentro da linha.
• Filtro JSONPath. Expressões como $.store.book[*].author, $..price, $.rows[0:100] e $['chave estranha'] reduzem a vista exatamente aos nós pedidos, cada um com sua própria estrutura.
• Filtrar e buscar juntos. Busque dentro de uma vista filtrada para estreitar duas vezes - útil quando um caminho seleciona mil registros e você quer os três que mencionam um nome.

A maior parte do JSON no mundo real é uma lista de registros: uma resposta de API, uma exportação, um arquivo de log. Desenhado como árvore, são centenas de ramos idênticos, e lê-lo significa abri-los um por um. A vista de tabela mostra os mesmos dados como linhas e colunas, que é como uma lista de registros deve ser lida.

Como ela se comporta

• As colunas vêm dos dados. Os nomes de campo são coletados ao longo dos registros em vez de supostos a partir do primeiro, então um campo que só alguns registros carregam também ganha coluna.
• Registros irregulares ficam visíveis, não escondidos. Um registro sem um campo mostra uma célula vazia, e uma entrada que nem é objeto ainda assim aparece em vez de ser pulada.
• Valores aninhados continuam navegáveis. Uma célula com um objeto ou lista mostra o que é e quanto contém; selecioná-la leva até aquele nó na árvore.
• Ele acha os registros por você. Seja a lista o documento inteiro ou um campo dentro dele, a tabela oferece a lista de registros mais próxima do que você selecionou.

Duas coisas acontecem dentro de quase todo visualizador JSON que nunca são mencionadas e mudam o que é mostrado a você. Ambas vêm da mesma decisão - converter o documento em valores JavaScript - e ambas são evitadas aqui lendo o próprio texto do arquivo.

O que se perde em outros lugares

• Números grandes são arredondados. Um número JavaScript guarda cerca de 15 dígitos significativos. Um identificador como 12345678901234567890 vira 12345678901234567000, e nada na tela diz isso. Aqui cada número é mostrado a partir dos caracteres do próprio arquivo, e qualquer número que não sobreviveria a uma conversão fica sinalizado.
• Chaves duplicadas somem. JSON permite que um objeto repita uma chave. Um analisador que constrói um objeto guarda apenas a última, então um documento discretamente errado parece certo. Aqui os dois membros são mostrados, ambos sinalizados, e a contagem aparece no resumo.
• Sequências de escape são reescritas. Formatar um documento em outro lugar pode transformar cada \u00e9 num caractere literal. Exportar aqui muda espaços e nada mais, então a diferença em relação ao seu original continua legível.
• Decimais de alta precisão são truncados. O mesmo teto de 15 dígitos vale para frações, então um valor com mais precisão do que cabe é encurtado em silêncio. Aqui ele aparece inteiro.

JSON estrito não tem comentários, nem vírgulas sobrando, nem aspas simples, nem chaves sem aspas - e arquivos de configuração reais têm os quatro. Um visualizador que simplesmente os recusa não ajuda muito quando o arquivo à sua frente é justamente o que você precisa ler.

O modo tolerante e seus limites

• Oferecido, nunca automático. O arquivo é lido primeiro de forma estrita. O modo tolerante aparece só quando a leitura estrita falhou e um reparo realmente mudaria algo.
• Tudo o que ele muda é relatado. Comentários removidos, vírgulas sobrando retiradas, aspas convertidas, chaves entre aspas, NaN e Infinity substituídos - cada um nomeado, contado, com a linha da primeira ocorrência.
• Ele nunca inventa estrutura. Um colchete faltando, uma vírgula faltando ou um arquivo truncado são corrupção, não dialeto. Isso é relatado como erro, porque adivinhar poria na tela dados que não estão no seu arquivo.
• Os erros dizem onde. Quando um arquivo não pode ser lido, a mensagem dá a linha e a coluna e mostra o texto em volta do problema, em vez de um deslocamento em bytes que nenhum editor entende.

JSON chega com várias extensões e, de vez em quando, numa codificação em que não deveria estar. Todas são lidas aqui, e o que foi detectado é mostrado em vez de suposto em silêncio.

O que abre

• JSON. .json, e .txt simples contendo JSON.
• JSON Lines e NDJSON. .jsonl e .ndjson, onde cada linha é um documento próprio. São apresentados como uma única lista para que todo o fluxo possa ser percorrido, buscado e exportado junto.
• GeoJSON, HAR e source maps. .geojson, .har e .map são JSON comum com formas particulares, e os três abrem normalmente.
• UTF-8, UTF-16 e Windows-1252. Uma marca de ordem de bytes é respeitada e removida em vez de reportada como erro de sintaxe, e um arquivo que não é UTF-8 válido é decodificado em vez de virar caracteres de substituição.

Ler um documento normalmente termina com levar algo dele: um caminho para um teste, um valor para um relatório de bug, um ramo para um colega. Cada uma dessas coisas é um clique, e nenhuma muda o que os seus dados dizem.

O que você pode levar

• O caminho. $.store.book[0].author, na forma que você cola em outra ferramenta. Chaves que precisam de aspas as recebem.
• A chave ou o valor. Um texto copia seu conteúdo sem as aspas em volta; qualquer outro valor copia exatamente o que o arquivo contém.
• Uma subárvore. Qualquer objeto ou lista, formatado, sem exportar o resto do documento.
• O arquivo inteiro, de quatro formas. Formatado com recuo, minificado, os bytes originais inalterados, ou NDJSON com um elemento de lista por linha.

Nada é enviado. O arquivo é aberto, indexado, buscado e exportado inteiramente na sua própria máquina, o que é ao mesmo tempo a resposta de privacidade e a de velocidade: não há ida e volta para esperar, então um arquivo grande é limitado pelo seu dispositivo e não por uma rede.

O que isso significa na prática

• Funciona offline. Depois que a página carrega, o visualizador continua funcionando sem conexão nenhuma.
• Nada é guardado. Fechar a aba é o fim. Não há histórico, nem cache dos seus documentos, nem conta ligada a eles.
• Seguro para dados sensíveis. Exportações de produção, logs de acesso e qualquer coisa sob um acordo que proíba processamento por terceiros podem ser abertos aqui, porque nenhum terceiro os recebe.
• Seu dispositivo define o teto. O plano gratuito abre arquivos até 100 MB. O Pro troca esse número pelo que a sua máquina realmente aguenta.

Alguns hábitos tornam um documento grande ou desconhecido muito mais rápido de percorrer, seja qual for o visualizador.

Dicas

• Recolha primeiro, depois desça. Recolha tudo e abra um ramo por vez; a forma de um documento se vê melhor com dez linhas na tela do que com dez mil.
• Filtre antes de buscar. Uma expressão JSONPath que reduza aos registros que importam torna uma busca de texto seguinte muito mais legível.
• Use a tabela para listas. Se o documento é uma lista de registros, a tabela responde perguntas que a árvore não responde, como quais registros estão sem um campo.
• Olhe o resumo. Número de nós, profundidade máxima, chaves duplicadas e números incomuns aparecem quando o arquivo abre, e muitas vezes explicam um bug antes de você procurar.
• Exporte o ramo, não o arquivo. Ao compartilhar um problema, uma subárvore é mais fácil de ler para outra pessoa do que um link para um documento de 40 MB.

Usos comuns

• Depurar uma API. Cole uma resposta, encontre o campo errado e copie o caminho dele direto para um teste.
• Conferir uma exportação. Abra uma exportação de banco de dados ou de analytics, confirme a contagem de registros e procure os que destoam do resto.
• Ler um arquivo HAR. Uma captura de rede é JSON com forma muito profunda, que é exatamente para o que servem busca e filtro.
• Auditar configuração. Chaves duplicadas e nulos inesperados num arquivo de configuração ficam visíveis aqui em vez de serem aplicados em silêncio.
• Inspecionar logs. Arquivos de log NDJSON abrem como uma única lista navegável em vez de milhares de documentos separados.

• Formatador JSON
• Validador JSON
• Minificador JSON
• Comparar JSON
• JSON para YAML
• JSON para XML