Вставьте или наберите JSON слева — справа он в реальном времени форматируется и разбирается в сворачиваемое дерево, а при синтаксической ошибке сразу указывается её место. Можно также просто указать адрес JSON и загрузить содержимое (сервер должен разрешать кросс-доменные запросы). Узлы раскрываются и сворачиваются по одному или все сразу, есть форматирование и сжатие, а также копирование пути и значения узла. Весь разбор выполняется локально в браузере — ваше содержимое не передаётся этому сайту.
О форматировании и проверке JSON
Когда форматировать, а когда сжимать
И то и другое меняет только пробельные символы — сами данные в обоих случаях одинаковы. Форматирование добавляет переносы строк и отступы для человеческих глаз: оно нужно при отладке API, чтении журналов и проверке конфигураций. Сжатие убирает все необязательные пробелы, чтобы уменьшить объём: оно нужно, когда вы формируете тело запроса, кладёте значение в базу данных или запихиваете его в переменную окружения. JSON, втиснутый в одну строку, не «сломан» — он просто не свёрстан для чтения: вставьте его сюда и отформатируйте.
Самые частые причины ошибки разбора
Примерно в порядке убывания частоты: лишняя запятая после последнего элемента; одинарные кавычки вместо двойных; комментарий через два слэша; ключ без кавычек; значение NaN или undefined либо True / None в стиле Python; неэкранированный перенос строки или обратный слэш внутри строки. Всё перечисленное допустимо в исходном коде на JavaScript или Python, но стандарт JSON этого не принимает — именно поэтому фрагмент, скопированный прямо из кода, так часто спотыкается. Есть и невидимый вариант: BOM или непечатаемые пробельные символы в начале файла, которые легко проникают туда при сохранении из «Блокнота» или копировании с веб-страницы.
Зачем смотреть ответы API в виде дерева
Настоящие ответы API сплошь и рядом уходят на пять-шесть уровней вглубь, и продираться сквозь них по одним отступам утомительно. Дерево позволяет свернуть ветки, которые вам сейчас неинтересны, сразу показывает, сколько элементов в массиве и на какой глубине лежит поле, а путь к узлу можно скопировать прямо в код. При разборе проблемы на продакшене JSON в журнале обычно снова вложен как строка и тащит за собой гору обратных слэшей: снимите экранирование, и он развернётся как надо.
JSON — это не объект JavaScript
JSON — формат обмена данными ровно с шестью типами: объект, массив, строка, число, логическое значение и null. Ключи обязаны быть в двойных кавычках, а функции, объекты даты, комментарии и завершающие запятые запрещены. Объектный литерал JavaScript устроен куда свободнее. Кроме того, стандарт JSON не ограничивает точность чисел, тогда как большинство анализаторов работают с числами как с двойной точностью: целые больше 2^53 (например, идентификаторы вроде snowflake) возвращаются с изменёнными последними цифрами. Такие поля лучше передавать в API строками.
Частые вопросы
Отправляется ли мой JSON на сервер?
Нет. Разбор, форматирование, дерево и копирование выполняются локально в браузере средствами JavaScript. У страницы нет бэкенда, и вставленное вами содержимое не отправляется ни на какой сервер. Поэтому здесь безопасно смотреть ответы API с внутренними полями, фрагменты логов и конфигурационные файлы. Загрузка через «Адрес JSON» тоже не идёт через этот сайт: запрос отправляется прямо из вашего браузера по указанному адресу. Разумеется, сам тот сервер этот запрос увидит, так что с адресами во внутренней сети и ссылками, содержащими token, решайте по обстоятельствам.
Можно ли просто ввести адрес JSON-файла?
Да. Впишите адрес в поле «Адрес JSON» вверху и нажмите «Загрузить» или просто Enter — содержимое загрузится в левую панель и сразу разберётся. Голый адрес вида example.com/data.json тоже подойдёт; https:// будет подставлен автоматически. Но этот адрес обязан разрешать кросс-доменный доступ — браузер отдаёт содержимое странице, только если видит Access-Control-Allow-Origin в ответе. raw.githubusercontent.com, jsDelivr и большинство публичных API этому условию отвечают, а корпоративные внутренние API и всё, что требует входа, — обычно нет.
Почему появляется сообщение «Не удалось загрузить»?
Чаще всего это блокировка кросс-доменного запроса. Из соображений безопасности браузер не сообщает странице причину сбоя — он выдаёт лишь общую ошибку, поэтому и инструмент может ответить только в общих словах. Нажмите F12 и откройте консоль: настоящая причина написана там. Если дело действительно в кросс-доменном запросе, обойти это на стороне страницы нельзя: сайт полностью статический, бэкенда, который сходил бы за вас, нет, и пересылать ваш адрес стороннему прокси он тоже не станет — это означало бы отдать адрес вместе с token, который в нём может быть. Работающий вариант — скачать JSON на свой компьютер и вставить его слева либо получить его через curl в командной строке. Кроме того, любой адрес вида http браузер блокирует, ведь эта страница работает по защищённому протоколу (https) — это смешанное содержимое, запрос даже не уходит.
Можно ли задать свой Referer?
Нет — это жёсткое ограничение браузера. Referer относится к запрещённым для изменения заголовкам: присваивание ему из скрипта страницы молча игнорируется. У fetch есть отдельная опция referrer — но стоит указать в ней чужой домен, как браузер точно так же тихо подменит его адресом самой этой страницы. Ни один из двух вариантов не выдаёт ошибку, они просто не работают. Поэтому за любым веб-инструментом, который обещает подделать Referer, обязательно стоит сервер, отправляющий запрос за вас. Странице на деле доступны лишь два варианта: по умолчанию отправлять адрес этого сайта или поставить флажок «Не отправлять Referer» и не отправлять ничего — второе помогает с адресами, которые используют реферер для защиты от хотлинкинга.
Что делать, если сообщается об ошибке разбора JSON?
Справа показывается собственное сообщение браузера об ошибке и приблизительные номера строки и столбца. Частые причины: одинарные кавычки вместо двойных, ключи без кавычек, лишняя запятая после последнего элемента, затесавшиеся комментарии или JSON, обрезанный при копировании. Перейдите к указанному месту и исправьте его.
Почему очень большой JSON открывается медленно?
Дереву нужен отдельный элемент DOM на каждый узел, поэтому при очень большом их числе отрисовка замедляется. Для огромных документов инструмент по умолчанию разворачивает только первые несколько уровней, остальное держит свёрнутым и отрисовывает по мере разворачивания — это заметно снижает подтормаживания. Если файл совсем большой, сначала вырежьте из него интересующую вас часть.
Что делают кнопки «Экранировать / Снять экранирование»?
Некоторые журналы и поля баз данных хранят кусок JSON как обычную строку, поэтому содержимое усеяно обратными слэшами вида \" . «Снять экранирование» превращает такую строку обратно в обычный JSON и разбирает его; «Экранировать» делает обратное — переводит текущий JSON в вид, пригодный для вставки внутрь строки.
Можно ли скопировать путь к отдельному узлу?
Да. Наведите указатель на строку любого узла — справа появится значок копирования; нажатие на него копирует путь доступа к этому узлу, например data.items[0].name, который можно вставить прямо в код или в отладчик. Нажатие с удерживаемым Shift копирует вместо этого значение узла.
Поддерживаются ли JSON5, JSONC и JSON с комментариями?
Разбор выполняет встроенный в браузер стандартный JSON.parse, поэтому работает только стандартный синтаксис JSON: ни комментариев, ни одинарных кавычек, ни завершающих запятых, ни ключей без кавычек. Если ваше содержимое написано в JSON5 / JSONC, сначала уберите эти расширения вручную.
Показываются ли очень большие числа неточно?
Точность чисел в JavaScript ограничена, поэтому целые больше 2^53 (например, идентификаторы snowflake) после разбора могут вернуться с изменёнными последними цифрами. Это общее ограничение всех инструментов, построенных на JSON.parse . Столкнувшись с таким полем, возвращайте идентификатор с сервера строкой — это и есть решение.
Что за десятизначное число в ответе API?
Почти наверняка метка времени Unix. Десять цифр — секунды, тринадцать — миллисекунды. После форматирования это по-прежнему просто число: дерево не переведёт его за вас. Вставьте его в соседний инструмент —Конвертер меток времени— и увидите, какой дате оно соответствует; там же можно проделать обратное и превратить дату в метку времени, когда собираете параметры запроса.