Что делает JSON-форматтер?
JSON-форматтер берёт любую JSON-строку — ответ API, скопированный из вкладки браузера, конфиг, запись из БД, что угодно — и либо разворачивает её в читаемый отступной вид, либо сжимает в одну строку. Заодно проверяет ввод: если в JSON болтается лишняя запятая, не закрыта кавычка или скобка, форматтер скажет точно где.
Вставь {"name":"Alice","age":30,"hobbies":["reading","coding"]} — и форматтер развернёт это в:
{
"name": "Alice",
"age": 30,
"hobbies": [
"reading",
"coding"
]
}
Переключи направление — форматтер уберёт все пробелы и выдаст компактную однострочную версию. Оба режима работают мгновенно в браузере — никаких походов на сервер, данные не покидают страницу.
Когда он пригодится
JSON есть везде в современной веб-разработке, поэтому форматтер встречается в повседневной работе разных ролей:
- Бэкенд-разработчикам для отладки ответов API — вставь тело ответа из Network tab или серверных логов и увидь структуру
- Фронтенд-разработчикам для разбора пейлоадов от API или вебхуков до парсинга в коде
- Дата-инженерам для просмотра выходов пайплайнов, Kafka-сообщений или документов NoSQL
- QA-инженерам для сравнения ожидаемого и фактического ответа в отчётах об ошибках тестов
- DevOps для чтения минифицированных конфигов (Terraform-планы, манифесты Kubernetes, выводы GitHub Actions), приходящих одной строкой
- Всем, кто работает с JSON-базами: MongoDB, DynamoDB, JSONB-столбцы PostgreSQL
Форматтер полезен и в обратную сторону: когда нужно вставить JSON внутрь другого файла (значение YAML-ключа, JS-строка, HTTP-заголовок), часто требуется минификация в одну строку. Оба направления — один клик.
Валидация — недооценённая часть. Форматтер отвергает невалидный JSON с точным указанием места ошибки — куда полезнее, чем загадочное «SyntaxError: Unexpected token» в консоли браузера. Если пытаешься понять, почему API-запрос падает или конфиг не грузится, форматтер обычно находит баг за секунды.
Как работает форматтер
Под капотом форматтер прогоняет ввод через нативный JSON-парсер браузера. JSON.parse() превращает строку в JS-объект; JSON.stringify() возвращает обратно в строку с выбранным отступом. Те же API, которыми пользуется любой Node.js- и браузерный разработчик, только на клиенте.
Преимущество нативного парсера — корректность: форматтер строго следует спецификации JSON (RFC 8259). Никакого «как-нибудь сойдёт» — если у тебя висит запятая после последнего элемента массива, форматтер её отвергнет, потому что JSON запрещает «trailing commas». (Литералы JS их разрешают; JSON — нет. Частая путаница.)
Разворачивание по умолчанию использует отступ в 2 пробела — это конвенция большинства JSON-API и конфиг-файлов. Каждый элемент массива и свойство объекта на своей строке, последовательное кавычение (всегда двойные, никогда одинарные).
Ничего из этого не требует сервера — любой современный браузер парсит JSON нативно за миллисекунды даже на больших пейлоадах. Форматтер справляется с JSON-документами в несколько мегабайт без задержек.
Распространённые сценарии форматирования
Разные задачи требуют разного вывода. Вот как форматтер ведёт себя в типичных случаях:
| Вход | Выход (разворот) | Выход (минификация) |
|---|---|---|
| Простой объект | Многострочно, с отступами по ключам | Одна строка, без пробелов |
| Массив объектов | Каждый объект на своём блоке строк | Одна строка, через запятые |
| Глубоко вложенная структура | Отступы отражают глубину вложенности | Одна строка, структура — через скобки |
| Пустые объекты / массивы | {} и [] на одной строке | То же — пробелов внутри нет |
| Строки со спецсимволами | Экранированы (переносы как \n и т. д.) | То же экранирование; меняется только перенос строк |
| Числа (int, float, экспонента) | Сохраняются как есть | Сохраняются как есть |
Заметь: содержимое строк сохраняется буквально. Если в JSON есть строка со встроенными переносами (экранированными как \n в исходнике), форматтер оставляет их как есть — не превращает \n в реальные переносы, которые сломали бы JSON.
Числа тоже проходят без изменений. JSON допускает несколько форматов чисел (целое, дробное, экспонента), и JSON-форматтер сохраняет тот стиль, который был на входе — не нормализует 1e3 в 1000.
Порядок свойств в развёрнутом выводе соответствует порядку во входе. Если вставишь объект с ключами {name, age, email}, форматтер выдаст их в том же порядке. Спецификация JSON по сути не требует сохранять порядок (парсерам разрешено его игнорировать), но большинство сериализаторов — включая форматтер — сохраняют порядок вставки ради читаемости. Если код полагается на конкретный порядок ключей, эта стабильность важна.
Подсказки и тонкости
Несколько частых ловушек при работе с JSON:
- Завершающие запятые невалидны.
[1, 2, 3,]в JavaScript нормально, в JSON ломается. Убери последнюю запятую перед вставкой. - Комментарии запрещены. Строки
// noteи/* block comments */— синтаксическая ошибка JSON. Удали их или используй JSON5/JSONC, если твой инструмент это поддерживает (большинство — нет). - Одинарные кавычки не работают. Ключи и строковые значения JSON должны быть в двойных.
{'name':'Alice'}не распарсится. - Ключи без кавычек запрещены.
{name: "Alice"}— это литерал JS-объекта, не JSON. JSON требует кавычки на всех ключах. - Числа без ведущих нулей.
007валидно в некоторых языках, но не в JSON. Используй"007"как строку, если нули важны.
Подсказка: если копируешь JSON из вкладки Network в браузере, используй «Copy → Copy response», а не выделение и копирование руками. Ручное выделение иногда захватывает скрытые Unicode-символы или управляющие коды терминала, которые ломают парсинг.
Большие JSON-файлы (1 МБ и больше) работают в форматтере нормально, но вывод очень быстро становится длинным. Если нужно посмотреть глубокую вложенную структуру внутри огромного документа, возьми инструмент со сворачиванием веток — форматтер хорош для сквозного форматирования и валидации, не для интерактивного исследования гигантских документов.
Связанные инструменты разработчика
JSON-форматтер хорошо сочетается с другими dev-инструментами Microapp:
- CSV в JSON — превращай данные из таблиц в JSON-массив объектов, готовый к форматированию и использованию как фикстура или сидинг.
- JSON в CSV — выгрузи JSON-массивы в CSV-строки для просмотра в таблицах или аналитических инструментах.
- Кодировщик/декодер Base64 — для упаковки JSON-пейлоадов внутрь JWT-токенов, data URI и других контекстов с base64.
- URL-кодировщик/декодер — когда нужно безопасно встроить JSON в query-параметры URL.
- Regex-тестер — для извлечения отдельных значений из JSON-строк, когда нужен паттерн, а не парсинг.
Частые вопросы
Уходит ли мой JSON на какой-нибудь сервер?
Нет. Форматтер использует встроенные в браузер API JSON.parse и JSON.stringify — обе работают полностью на клиенте. Данные не пересекают сеть. Закрытие вкладки убирает всё.
Какой максимальный размер JSON?
На практике — сколько браузер может удержать в памяти; обычно сотни МБ до заметного замедления. Документы в несколько МБ форматируются мгновенно. Свыше ~50 МБ могут появиться короткие задержки.
Почему форматтер отвергает мой JSON, хотя выглядит нормально?
Чаще всего: завершающие запятые ([1, 2, 3,]), комментарии (// note), одинарные кавычки вместо двойных или ключи без кавычек. JSON строже, чем литералы JS — то, что работает в JS-коде, не всегда валидно в JSON.
Можно ли менять отступ (табы или пробелы, 2 или 4)?
Сейчас форматтер использует отступ 2 пробела — это конвенция большинства JSON-API (Stripe, GitHub, Twilio). Если у команды 4 пробела или табы, прогоняй вывод через переформатирование в редакторе после вставки.
Проверяет ли форматтер JSON Schema?
Нет. Форматтер проверяет синтаксис JSON (парсится ли это?), но не JSON Schema (соответствует ли конкретной схеме). Для проверки схемы возьми отдельный инструмент — Ajv или json-schema-validator.
В чём разница между minified и compact JSON?
Это одно и то же. «Minified» подчёркивает уменьшение размера (для HTTP-пейлоадов, gzip), «compact» — внешний вид (одна строка). Результат идентичен: JSON.stringify(parsed) без пробелов.
Понимает ли форматтер JSON5 или JSONC?
Нет — это надстройки над JSON с комментариями, завершающими запятыми и другими послаблениями. Форматтер строго следует RFC 8259. Чтобы работать с JSON5/JSONC, сначала убери комментарии и лишние запятые или используй инструмент с поддержкой JSON5, например пакет json5 в npm.
Меняет ли форматтер мои данные?
Меняет только пробелы. Ключи объектов, значения строк, числа, булевы и null проходят без изменений. Развёрнутый и минифицированный вывод парсятся в одни и те же JS-объекты — это эквивалентные представления одних данных.
Можно ли использовать форматтер только для валидации, не меняя сам JSON?
Да — вставь и посмотри, парсится ли. Если форматтер принял ввод без ошибки, JSON синтаксически валиден. (Для семантической валидации по схеме используй JSON Schema-валидатор.)
Почему именно 2 пробела для отступа?
Отступ 2 пробела — конвенция большинства JSON-API и инструментов разработчика (Stripe, GitHub, Twilio, дефолт у JSON.stringify). Достаточно компактно, чтобы глубокая вложенность читалась без избыточного горизонтального места, и именно этого ждут большинство редакторов при переформатировании вставленного JSON. Если у команды свой стайл-гайд, прогоняй вывод форматтера через редактор для единообразия.