JSON 뷰어

트리 뷰는 내가 쓰지 않은 페이로드를 살펴보기 위한 것입니다. 관심 없는 부분은 접고, 필요한 부분만 펼치고, 어떤 값이든 경로를 복사해 코드에서 바로 집어 올 수 있습니다.

큰 문서를 염두에 두고 만들었습니다. 노드는 부모가 펼쳐졌을 때만 그려지므로, 접힌 10MB 파일은 노드 수가 아니라 루트 길이만큼의 비용만 듭니다.

트리가 보여 주는 것

구조 자체 말고도, 날 텍스트에서는 알아보기 어려운 것들이 몇 가지 있습니다.

모든 노드의 경로

RFC 9535의 정규화된 형태라서 JSONPath 테스터에 바로 붙여 넣을 수 있습니다. 행 위에 마우스를 올리고 복사하세요.

자식 개수

접힌 객체는 키가 몇 개인지, 배열은 항목이 몇 개인지 알려 줍니다. 펼치지 않아도 형태를 가늠할 수 있습니다.

중복 키

그 자리에 표시합니다. 날 텍스트에서는 500줄 떨어진 쌍둥이 키가 사실상 보이지 않습니다.

정밀도를 잃은 숫자

해당 값에 표시합니다. 2^53-1을 넘는 정수는 원래 자릿수 그대로 보여 주고, 대부분의 파서는 그렇게 읽지 않는다는 경고를 함께 답니다.

키보드 탐색

이 트리는 클릭 가능한 요소를 모아 놓은 것이 아니라 진짜 ARIA 트리입니다. 그래서 트리가 응당 그래야 하는 대로 동작합니다. 방향키로 이동과 펼치기, Home과 End로 양 끝 이동, Enter와 Space로 토글. 마우스 없이 도달하고 조작할 수 있고, 스크린 리더에도 제대로 전달됩니다.

이 분야에서는 드문 일인데, 자랑이라기보다는 이 분야의 기준이 낮다는 뜻입니다.

트리를 쓸 때와 날 텍스트를 쓸 때

전체를 파악하는 데는 트리가 낫습니다. 이게 어떤 모양인지, 필요한 필드가 어디 있는지, 얼마나 깊은지. 편집과 검색에는 날 텍스트가 낫고, 에디터에서는 Ctrl+F로 전체 텍스트 검색이 그대로 됩니다.

같은 질의를 반복할 생각이라면 JSONPath 테스터로 가세요. 표현식을 쓰고, 일치 0건을 보고, 고치는 순환이 트리를 클릭해 돌아다니는 것보다 빠릅니다.

How to do this in code

브라우저가 없을 때 터미널에서 페이로드를 살펴보는 방법입니다.

# Top-level keys
jq 'keys' data.json

# The shape, without the values
jq 'walk(if type == "object" then map_values("...") else . end)' data.json

# Every distinct path in the document
jq -r 'paths | join(".")' data.json | sort -u

import json

with open('data.json') as f:
    data = json.load(f)

def walk(node, path=''):
    if isinstance(node, dict):
        for k, v in node.items():
            yield from walk(v, f'{path}.{k}')
    elif isinstance(node, list):
        for i, v in enumerate(node):
            yield from walk(v, f'{path}[{i}]')
    else:
        yield path, node

for path, value in walk(data):
    print(path, '=', value)

// console.dir gives you a collapsible tree in the terminal
console.dir(JSON.parse(text), { depth: null, colors: true });

자주 묻는 질문

얼마나 큰 파일까지 열 수 있나요?

제약은 파싱이 아니라 메모리입니다. 10MB 문서는 약 294MB 크기의 트리를 만들기 때문에 데스크톱에서는 여유가 있고 휴대폰에서는 빠듯합니다. 25MB쯤을 넘으면 체감이 됩니다. 트리는 이 페이지가 필요할 때만 만들어지므로, 포맷터와 검증기는 훨씬 큰 파일도 처리합니다.

왜 한 번에 일부 가지만 펼쳐지나요?

"모두 펼치기"는 의도적으로 여섯 단계로 제한했습니다. 큰 문서의 모든 노드를 펼치면 수십만 행이 되고 아무에게도 도움이 되지 않습니다.

트리에서 편집할 수 있나요?

없습니다. 편집은 텍스트 패널에서 합니다. 그쪽에는 실행 취소, 검색, 완전한 키보드 지원이 있습니다. 트리 편집기는 다른 제품이고, 텍스트 편집기로서는 더 나쁩니다.