CodeKitHubЯк користуватися
- Вставте свій JSON у поле вводу зліва (або натисніть "Завантажити приклад", щоб спробувати).
- Оберіть відступ у 2 чи 4 пробіли.
- Натисніть "Форматувати", щоб покращити вигляд, або "Мініфікувати", щоб стиснути до одного рядка.
- Якщо JSON недійсний, прочитайте повідомлення про помилку під полями, щоб знайти проблему.
- Натисніть "Копіювати", щоб скопіювати результат у буфер обміну.
Приклад
Введення
{"name":"CodeKitHub","tools":["json","base64"],"free":true}Результат
{
"name": "CodeKitHub",
"tools": [
"json",
"base64"
],
"free": true
}Ті самі дані, відформатовані з відступом у 2 пробіли. Мініфікація робить навпаки: видаляє всі пробіли.
Що це за інструмент?
Форматер JSON бере необроблений, мініфікований чи безладний текст JSON і переписує його з послідовними відступами та розривами рядків, щоб його стало легко читати. JSON (JavaScript Object Notation) — найпоширеніший формат даних, який використовують API, конфігураційні файли та системи логування, але сервери зазвичай надсилають його як один довгий нечитабельний рядок, щоб заощадити трафік.
Цей інструмент також працює як валідатор JSON: він розбирає ваші дані за тими самими суворими правилами, які використовують браузери, тож якщо у вашому JSON бракує коми, ключ без лапок чи зайва кома в кінці, ви побачите точне повідомлення про помилку замість тихого збою.
JSON формально визначений двома узгодженими стандартами, RFC 8259 і ECMA-404 — і специфікація навмисно суворіша за сам JavaScript, тому фрагмент, що чудово виконується як код JS, може все ж не пройти сувору валідацію JSON тут.
Практичні поради
- Налагоджуєте API? Спочатку вставте необроблену відповідь, форматуйте потім — валідатор точно вказує рядок і стовпець будь-якої синтаксичної проблеми, що краще, ніж вдивлятися в однорядковий блок.
- Використовуйте відступ у 2 пробіли для читання на екрані та мініфікуйте перед вставленням JSON у URL, змінну середовища чи повідомлення в чаті — там пробіли лише коштують байтів.
- Коментарі у стилі JSON5 та зайві коми в кінці — дві найпоширеніші причини, чому написана вручну конфігурація "виглядає нормально", але не проходить валідацію: сувора специфікація JSON не допускає жодного з них.
- Для дуже великих файлів (логи, дампи баз даних) форматуйте лише той фрагмент, який вам потрібен — ваш редактор залишається чутливим, а структуру легше відстежувати.
Де це знадобиться в реальних завданнях
Найпоширеніший сценарій, який ми бачимо: API повертає JSON у форматі Base64 чи мініфікований усередині токена чи payload вебхука. Спочатку декодуйте Base64, потім відформатуйте JSON, а потім порівняйте дві відповіді, коли щось змінилося між середовищами. Для кожного кроку тут є спеціальний інструмент, і ваші payload-и ніколи не залишають браузер на жодному з них.
Frontend-розробники використовують напрямок мініфікації так само часто, як і форматування: постачаєте великий статичний файл JSON? Мініфікація зазвичай економить 20–30% ще до gzip.
Поширені помилки JSON і як їх виправити
Більшість повідомлень "недійсний JSON" зводяться до невеликого набору типових причин. Таблиця нижче охоплює найпоширеніші, з якими ви зіткнетеся під час ручного редагування конфігів чи налагодження скопійованої відповіді API.
| Помилка | Приклад | Виправлення |
|---|---|---|
| Зайва кома | {"a": 1, "b": 2,} | Видаліть кому після останнього елемента в об'єкті чи масиві. |
| Одинарні лапки | {'a': 1} | JSON вимагає подвійні лапки для ключів і рядкових значень. |
| Ключ без лапок | {a: 1} | Огорніть кожен ключ подвійними лапками: {"a": 1}. |
| Коментарі | { // примітка\n "a": 1 } | Сувора специфікація JSON не допускає коментарів — видаліть // і /* */ перед перевіркою. |
| Відсутня кома | {"a": 1 "b": 2} | Вставте кому між кожною парою ключ-значення. |
| NaN / undefined / Infinity | {"a": NaN} | Це коректний JavaScript, але не коректний JSON — використайте null або рядок. |
Поширені випадки використання
- Читання мініфікованої відповіді API, повернутої як один нечитабельний рядок, щоб зрозуміти її структуру під час налагодження.
- Перевірка конфігураційного файлу (наприклад, package.json чи налаштувань на основі JSON), який чомусь неправильно читається застосунком.
- Поширення читабельного, відформатованого фрагмента JSON у звіті про помилку, код-ревʼю чи документації.
- Зменшення payload JSON до найменшої форми перед вбудовуванням у параметр URL чи збереженням у стовпці бази даних з обмеженнями розміру.
Навіщо його використовувати?
Інтеграція з Дією повернула помилку 500, а лог зберіг усю відповідь одним рядком — вставте її сюди, щоб одразу побачити, якого поля бракувало в payload.
Ви будуєте API для держпослуг і отримуєте "Unexpected token at position 141" — інструмент точно вказує рядок і стовпець замість того, щоб рахувати символи вручну.
Потрібно передати конфігурацію стороннього API під час нестабільного мобільного зв'язку — мініфікуйте JSON одним кліком, щоб зменшити обсяг переданих даних.
JSON містить персональні дані користувачів чи ІПН, і за поточних обставин ви не хочете завантажувати такі дані на сторонній сервер — усе обробляється локально у браузері, нічого не залишає ваш пристрій.
Ви перевіряєте pull request колеги, де тестові дані — один мініфікований рядок — відформатуйте його спочатку, щоб diff справді показував, що змінилося.
Часті запитання
Чи завантажуються мої дані JSON на сервер?
Ні. Цей інструмент працює повністю у вашому браузері за допомогою JavaScript. Ваш JSON ніколи не залишає ваш пристрій, що робить його безпечним для використання з чутливими чи внутрішніми даними.
Чому мій JSON недійсний?
Найпоширеніші причини: відсутні чи зайві коми, ключі без подвійних лапок, одинарні лапки замість подвійних, зайва кома після останнього елемента та коментарі (JSON не дозволяє коментарі). Повідомлення про помилку під полем вводу повідомляє, що знайшов парсер.
У чому різниця між Форматуванням і Мініфікацією?
Форматування додає відступи та розриви рядків, щоб зробити JSON читабельним для людини. Мініфікація видаляє всі непотрібні пробіли, щоб зробити JSON якомога меншим — корисно перед передачею чи вбудовуванням.
Чи є обмеження розміру?
Інструмент не накладає жорсткого обмеження. Дуже великі файли (десятки мегабайтів) можуть працювати повільно залежно від вашого пристрою, тому що вся обробка відбувається локально у вашому браузері.
Чи може це автоматично виправити зламаний JSON?
Ні — інструмент точно повідомляє, де JSON зламаний, щоб ви могли це виправити, але не вгадує і не змінює ваші дані. Це навмисно: тихе "виправлення" даних може приховати реальні помилки.
Чи підтримує інструмент JSON5 або JSONC (коментарі, зайві коми, ключі без лапок)?
Ні, і це навмисно — інструмент перевіряє за суворим стандартом RFC 8259, який реально вимагають ваші API та JSON.parse(). Якщо потрібно відформатувати JSONC-конфіг (наприклад, tsconfig.json), спершу видаліть коментарі, інакше парсер повідомить про них як про помилки.
Чим це відрізняється від простого виклику JSON.stringify у консолі браузера?
JSON.stringify(JSON.parse(x), null, 2) робить те саме переформатування, але вимагає відкритої консолі й видає незрозумілу загальну помилку при недійсних даних замість точної вказівки рядка й стовпця, як робить цей інструмент.
Чи працює це однаково в різних браузерах, наприклад у Safari чи старому Edge?
Так. Інструмент використовує вбудований JavaScript-парсер браузера, який однаковий у всіх сучасних браузерах (Chrome, Firefox, Safari, Edge) — результат не залежить від пристрою чи операційної системи.
Чим це відрізняється від вбудованого форматування JSON у текстовому редакторі?
Принцип той самий, але цей інструмент не потребує встановлення, працює в будь-якому браузері, показує точне місце помилки і доступний навіть тоді, коли ви не за своїм комп'ютером — наприклад, на чужому пристрої чи в дорозі.
Що станеться, якщо я випадково вставлю чутливі дані, наприклад ІПН чи дані з Дії?
Оскільки вся обробка відбувається у вашому браузері і нічого не надсилається на сервер, ризик такий самий, як вставити текст у власний блокнот. Проте ми завжди радимо видаляти реальні персональні дані перед тим, як ділитися результатом з іншими.