Просмотрщик JSON в виде дерева

Что такое просмотрщик JSON в виде дерева?#

Просмотрщик JSON-дерева разбирает документ JSON и рисует его как сворачиваемую структуру, подобно тому как файловый менеджер показывает дерево каталогов. Вместо того чтобы читать длинную стену текста с отступами и пересчитывать скобки, выясняя, что во что вложено, вы видите структуру одним взглядом: объекты и массивы — это ветви, которые можно открыть или закрыть щелчком, а листья-значения — строки, числа, булевы, null — находятся на концах.

Это важнее всего, когда документ глубок или незнаком. Один ответ API легко может потянуть на сотни строк; конфиг может содержать настройки, вложенные на четыре-пять уровней под похожими именами. В плоском форматтере вы скроллите и теряете место. В дереве вы сворачиваете всё, кроме нужной ветви, и остальное перестаёт бороться за ваше внимание.

Эта страница разбирает JSON в браузере и строит сворачиваемое дерево узел за узлом, используя обычное текстовое содержимое, а не интерпретируя ввод как HTML, — поэтому даже документ с тегами <script> или HTML-подобными строками показывается инертным, а не исполняется.

Как пользоваться#

1. Вставьте JSON в панель Ввод слева. Разбор происходит по мере ввода.
2. Дерево появляется справа. Каждый объект или массив показывает переключатель ▼, открывающую скобку ({ или [), количество записей внутри и закрывающую скобку. Щёлкните по переключателю — или по самим скобкам — чтобы свернуть или развернуть эту ветвь.
3. Используйте Развернуть всё, чтобы открыть каждую ветвь до листьев, и Свернуть всё, чтобы сжать весь документ обратно до корня. Сворачивание — способ получить однострочный обзор громоздкого документа перед тем, как провалиться в детали.
4. Заголовок справа показывает количество записей верхнего уровня у корня (например, 5 элементов), чтобы с одного взгляда было ясно, насколько велик документ.
5. Пример загружает вложенный демонстрационный документ; Очистить опустошает обе панели.

Ключевые возможности#

• Сворачивание любой ветви независимо. Каждый контейнер открывается и закрывается сам по себе, поэтому один под-объект можно держать развёрнутым для справки, пока остальное свёрнуто.
• Направляющие глубины. Дочерние элементы набирают отступ под вертикальной направляющей линией, поэтому очевидно, какой скобке принадлежит запись, даже в плотных документах.
• Безопасный от XSS рендеринг. Каждая метка и значение выводятся как простое текстовое содержимое — ввод никогда не разбирается как HTML. Подозрительная строка просто отображается как текст.
• Точные значения листьев. Строки сохраняют окружающие кавычки, а числа выводятся ровно так, как их написал бы JSON.stringify, поэтому true (булево) визуально отличается от "true" (строка).
• Живой подсчёт. Заголовок сообщает, сколько записей содержит корень, обновляясь по мере редактирования.

Разбор примера#

Загрузите Пример, и разобранное дерево покажет корневой объект с пятью записями верхнего уровня:

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

Две из этих записей сами являются контейнерами. Разворачивание tags показывает трёхэлементный массив ("json", "encoding", "crypto"), а разворачивание features открывает, что static равно true, тогда как backend равно null — различие, которое дерево показывает явно, а не заставляет угадывать по плоскому дампу.

Если вас интересует только под-объект features, щёлкните каждый ▼ верхнего уровня, чтобы свернуть остальные. Счётчик 5 на корне остаётся точным, а направляющая глубины делает очевидным, что static и backend принадлежат features, а не корню.

FAQ#

Инструмент как-то меняет или переформатирует мой JSON?#

Нет. Дерево — это представление только для чтения разобранного значения. Ваш исходный текст никогда не переписывается, не переформатируется и не выводится обратно. Если вы хотите получить красиво напечатанный текст документа, используйте форматтер; этот инструмент — для навигации, а не нормализации.

Почему у строк в дереве остаются кавычки?#

Потому что именно так сам JSON отличает строку от голого ключевого слова. Без кавычек true и "true" выглядели бы одинаково, как и null и строка "null". Сохранение кавычек (в точности как их выдаёт JSON.stringify) сохраняет это различие с одного взгляда.

Как инструмент справляется с очень большими документами?#

Разбор и отрисовка происходят целиком в вашем браузере, поэтому ничего не отправляется на сервер и нет сетевого захода. Для типичных конфигов и ответов API всё мгновенно. Для мульти-мегабайтного документа дереву приходится создавать узел для каждого значения, что может подтормаживать, — сворачивайте ненужные ветви, чтобы число видимых узлов оставалось управляемым.

Строка, содержащая HTML, будет отрендерена как HTML?#

Никогда. Инструмент выводит каждое значение как текстовое содержимое, которое браузер считает инертными символами. Строка, случайно содержащая <script> или <img onerror=...>, отображается дословно как текст — она не разбирается как разметка и не может исполниться.