DT Dev Tools

JSON Diff — Сравнение JSON

Рекурсивно сравнивайте два объекта JSON и подсвечивайте добавленные, удалённые и изменённые ключи. Всё работает локально в браузере, без загрузки ваших данных.

🔒 Работает полностью в вашем браузере — ничего не загружается

 
Advertisement

Что делает JSON Diff

JSON Diff сравнивает два разобранных значения JSON и показывает, что изменилось по каждому пути. Он полезен для проверки изменений в ответах API, правок конфигурации, обновлений фикстур, payload-ов feature flag, примеров вебхуков, файлов переводов и сгенерированных данных, когда построчный diff даёт слишком много шума. Вместо показа изменений пунктуации он рекурсивно обходит объекты и массивы и помечает пути как добавленные, удалённые, изменённые или неизменённые. Поскольку обе стороны сначала разбираются как строгий JSON, синтаксические ошибки обнаруживаются до сравнения, что помогает отличить некорректные входные данные от настоящих структурных различий.

В отчёте используются цветные строки, чтобы значимые изменения сразу бросались в глаза. Добавленные значения отображаются зелёным, удалённые пути — красным, изменённые значения — янтарным, а неизменённые примитивные пути — приглушённым текстом. Отчёт в виде простого текста можно скопировать в задачу, pull request, заметку об отладке или обзор тестов, когда нужно объяснить, чем отличаются два payload-а.

Приватная работа в браузере

Вся обработка выполняется в вашем браузере с помощью клиентского JavaScript. Инструмент не загружает на сервер фрагменты кода, значения конфигурации, сгенерированные данные, текст запросов или скопированные примеры и не требует учётной записи. Такая исключительно локальная модель важна для инструментов разработчика, ведь вставляемое в них содержимое часто похоже на реальные данные приложения: ответы API, журналы, образцы в виде переменных окружения, запросы к базе данных, разметка из черновиков или значения, скопированные во время отладки в продакшене. Локальная обработка снижает риски и ускоряет работу, так как нет обращений к сети.

Интерфейс намеренно компактен: вы вставляете входные данные, настраиваете параметры, просматриваете результат, копируете его и возвращаетесь в свой редактор. Тем не менее результаты стоит проверять, прежде чем коммитить их, публиковать или использовать в производственном процессе. Браузерные инструменты отлично подходят для быстрой проверки и подготовки, но не могут знать все соглашения проекта, правила классификации данных и специфические требования к валидации в вашем приложении.

Практические советы

Используйте этот инструмент для небольших и средних фрагментов JSON, которые нужно быстро понять. Очень большие документы удобнее сравнивать в специализированном редакторе, особенно если массивы содержат элементы в другом порядке или записи без стабильных идентификаторов. Этот браузерный diff сравнивает позиции в массивах напрямую, поэтому элемент, вставленный в начало, может сделать последующие записи массива изменёнными, хотя идентичность объектов концептуально та же. Перед сравнением нормализуйте сгенерированные метки времени, случайные идентификаторы и значения, зависящие от окружения, чтобы реальные изменения контракта было проще заметить.

Как использовать

  1. Вставьте исходный JSONДобавьте слева базовый объект или массив.
  2. Вставьте изменённый JSONДобавьте справа объект или массив для сравнения.
  3. СравнитеПросмотрите цветные пометки добавленных, удалённых и изменённых путей.

Часто задаваемые вопросы

Какие различия показываются?
Diff сообщает о добавленных, удалённых, изменённых и неизменённых вложенных путях в объектах и массивах.
Сортирует ли он ключи?
Нет. Он рекурсивно сравнивает разобранные значения и показывает пути в порядке обхода.
Загружается ли JSON на сервер?
Нет. Оба входных блока разбираются и сравниваются локально в браузере.
Advertisement