Как пользоваться: JSON-просмотрщик
- Вставьте JSON или откройте файл
.json. - Нажмите ▸, чтобы развернуть объекты и массивы, или используйте Развернуть все.
- Введите запрос в поиск, чтобы подсветить совпадающие ключи и значения.
- Нажмите на любое значение, чтобы увидеть его путь и скопировать, например
$.items[0].sku.
Зачем нужен просмотрщик JSON в виде дерева?
Отформатированный JSON удобно читать, когда документ небольшой, но ответы API, логи и экспорты часто занимают тысячи строк. Древовидное представление сначала показывает структуру: вы сразу видите, что items — это массив из 250 объектов, без прокрутки, а затем открываете только нужную ветку.
Возможности
- Сворачиваемые узлы с количеством элементов и ключей у каждого объекта и массива.
- Цвета типов: строки, числа, логические значения и
nullлегко отличить друг от друга. - Поиск подсвечивает совпадающие ключи и значения и открывает ветки, в которых они находятся.
- Пути: нажмите на значение, чтобы получить его JSONPath (
$.customer.address.city), готовый дляjq, JavaScript или инструментов автоматизации. - Статистика: общее количество значений, глубина вложенности и размер.
Использование пути
| Инструмент | Путь $.items[0].sku принимает вид |
|---|---|
| JavaScript | data.items[0].sku |
| jq | .items[0].sku |
| Python | data["items"][0]["sku"] |
| Make / Zapier | items[1].sku (нумерация с 1) |
Для сопоставлений без кода поиск JSON-пути выводит пути в форматах Make, Zapier и n8n. Чтобы исправить некорректный JSON, используйте форматировщик JSON, а для сравнения двух документов — сравнение JSON.
Также ищут как: json viewer онлайн, json tree viewer, json explorer, json path finder.
Инструменты, которые хорошо сочетаются с JSON-просмотрщик
- JSON в TypeScript — Вставьте образец JSON, например ответ API или конфиг, и получите готовые интерфейсы TypeScript с вложенными типами, необязательными свойствами и union-типами.
- XML в JSON — Превращайте XML — ответы API, RSS-ленты, SOAP-сообщения, карты сайта или конфигурационные файлы — в чистый JSON для JavaScript, Python или любого REST API.
- Валидатор JSON Schema — Вставьте схему и JSON, чтобы увидеть, какие значения нарушают какие правила, или сгенерируйте стартовую схему по примеру данных.
- Тестер JSONPath — Введите запрос JSONPath и сразу увидите, что он выбирает, с точным путём каждого совпадения.
Часто задаваемые вопросы
Можно ли открыть большие файлы JSON?
Да. Файлы размером в несколько мегабайт открываются быстро; очень большие файлы (от 50 МБ) могут обрабатываться медленно, так как всё дерево строится в вашем браузере.
Загружается ли мой JSON на сервер?
Нет. Разбор и отображение выполняются локально в вашем браузере.
Что такое JSONPath?
Строка, которая указывает на значение внутри документа JSON, начинается с
$ для корня, например $.items[0].price.Можно ли установить JSON-просмотрщик как веб-приложение и пользоваться им офлайн?
Да. JSON-просмотрщик — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.