Visualizar JSON
O Visualizador de JSON exibe um documento como uma árvore recolhível no seu navegador. A árvore é virtualizada sobre uma lista de linhas achatada, então uma resposta de API com cinquenta mil nós abre e rola na mesma velocidade que uma pequena, e cada linha carrega o ponteiro RFC 6901 que a endereça.
Como funciona o Visualizar JSON?
Um visualizador de JSON é julgado inteiramente pelo comportamento com um documento grande demais para ser lido como texto — que é a única razão para alguém abrir um. A maioria falha aí, e falha pelo mesmo motivo estrutural: renderiza a árvore como componentes aninhados, um por nó. Essa é a implementação óbvia, e significa que uma resposta com cinquenta mil nós produz cinquenta mil elementos DOM, dos quais talvez quarenta estejam na tela. A rolagem engasga, expandir um ramo re-renderiza toda a subárvore, e a aba começa a consumir centenas de megabytes.
Este visualizador primeiro achata o documento em um array de linhas — cada uma carregando a sua profundidade, o seu tipo, a sua contagem de filhos e o índice em que a sua subárvore termina — e depois renderiza apenas as linhas dentro do viewport. O DOM mantém cerca de cinquenta elementos independentemente do tamanho do documento, então um arquivo grande abre tão rápido quanto um pequeno.
Registrar onde cada subárvore termina é o que torna recolher barato. Esconder um ramo é pular um único índice em vez de percorrer tudo o que está dentro dele, então recolher a raiz de um documento de 50.000 nós custa uma comparação em vez de cinquenta mil. A mesma estrutura é o que faz a busca fazer sentido: as ocorrências são encontradas no documento inteiro, e não apenas na parte expandida, e todos os ancestrais do caminho até uma ocorrência são mantidos, porque um valor sem o seu caminho não diz nada.
O achatamento é iterativo, com uma pilha explícita em vez de recursão. Um percurso recursivo estoura a pilha de chamadas do JavaScript por volta de dez mil níveis de aninhamento, e um documento nessa profundidade é precisamente o documento que alguém traz a um visualizador porque nada mais o abre. Há um teste com vinte mil níveis.
Cada linha mostra o JSON Pointer RFC 6901 que a endereça — /order/lines/0/sku — e o copia ao clicar. É a string que você cola em um JSON Patch, em um caminho jq, em uma asserção de teste ou em um relatório de bug, e tê-la exata elimina a etapa mais tediosa de trabalhar com uma resposta desconhecida.
Documento
{"order":{"lines":[{"sku":"WID-1","qty":2}]}}Árvore
▾ root { 1 }
▾ order { 1 }
▾ lines [ 1 ]
▾ 0 { 2 }
sku "WID-1" /order/lines/0/sku
qty 2 /order/lines/0/qtyQuais opções e casos-limite o Visualizar JSON suporta?
| Parâmetro | Tipo | Padrão | Comportamento e casos-limite |
|---|---|---|---|
| Profundidade inicial | níveis | 2 | Contêineres mais profundos que este começam recolhidos, para que um documento grande abra como uma visão geral legível em vez de quarenta mil linhas. Expandir tudo é só um clique. |
| Virtualização | apenas a viewport | — | Cerca de cinquenta linhas existem no DOM a qualquer momento, independentemente do tamanho do documento. Essa é a diferença entre um visualizador que abre uma resposta de 20 MB e um que trava a aba. |
| Busca | substring | insensível a maiúsculas | Corresponde a chaves e valores renderizados em todo o documento, incluindo ramos recolhidos, e mantém todos os ancestrais de uma correspondência para que o caminho permaneça visível. |
| JSON Pointer | RFC 6901 | mostrado por linha | Clique para copiar. Chaves contendo / ou ~ são escapadas como ~1 e ~0, para que o ponteiro esteja correto e não apenas plausível. |
| Cores por tipo | string, número, booleano, null | — | Escalares são coloridos por tipo, para que uma string numérica "42" seja visualmente diferente do número 42 — uma distinção que causa uma surpreendente parcela de bugs de integração. |
| Edição | não suportado | — | Este é um visualizador. Para editar valores, renomear chaves e reordenar arrays, use o Editor JSON, que mantém um painel de texto e uma árvore sincronizados. |
| Tamanho da entrada | bytes | 8 MB | A análise é executada na thread principal. Acima do limite, a ferramenta recusa-se em vez de travar. A própria árvore lida com muito mais nós do que o limite do analisador permite. |
Perguntas frequentes
Ele abre um arquivo realmente grande?
Até o teto de análise de 8 MB, sim, e a árvore não é o gargalo — ela renderiza apenas o que está na tela, então a contagem de nós quase não a afeta. O limite é a etapa de análise, que roda na thread principal e é recusada acima de 8 MB em vez de tentada, porque tentar travaria a aba.
O que é o /order/lines/0/sku ao lado de cada linha?
O JSON Pointer RFC 6901 que endereça aquele nó. Clique nele para copiar. É o caminho que você cola em uma operação de JSON Patch, em uma asserção de teste ou em um relatório de bug, e tê-lo exato — incluindo os escapes ~0 e ~1 para chaves que contêm ~ e / — elimina a parte mais propensa a erros de descrever onde algo está.
Dá para editar valores aqui?
Não, de propósito. Um visualizador que também edita precisa reconciliar duas fontes de verdade a cada tecla, e é por isso que o Editor de JSON é uma ferramenta separada: ele mantém um painel de texto e uma árvore sincronizados, com desfazer. Manter este somente leitura é o que o deixa rápido em documentos com os quais o editor sofreria.
Por que o meu número aparece de uma cor diferente da minha string?
Os escalares são coloridos por tipo. Importa mais do que parece: a string "42" e o número 42 parecem idênticos no texto bruto e se comportam de forma completamente diferente depois. Um valor entre aspas ser uma string onde se esperava um inteiro é uma causa recorrente de falhas de integração, e a cor torna isso visível de relance.
A busca olha dentro dos ramos recolhidos?
Sim. A busca percorre o documento achatado inteiro, e não apenas as linhas visíveis, então uma ocorrência enterrada em uma subárvore recolhida é encontrada e exibida junto com os ancestrais que levam a ela. Limpe a consulta e a árvore volta ao que você tinha expandido.
O documento é enviado?
Não. Ele é analisado e renderizado por JavaScript na aba que você já tem aberta. Abra o DevTools, vá ao painel Network e cole uma resposta — nada que a carregue sai. Os documentos para os quais as pessoas precisam de um visualizador costumam ser respostas de API de produção, exatamente o material que não deveria passar por um servidor desconhecido para se tornar legível.