json formatter

JSON Formatter — оригинал

Расширение Chrome, которое автоматически форматирует JSON при просмотре его на вкладке браузера.

Функции

• Быстро , даже на очень длинных страницах JSON.
• Темный режим
• Подсветка синтаксиса
• Деревья разборные, с направляющими отступами
• Кликабельные URL-адреса
• Незначительное влияние на производительность страниц, отличных от JSON (менее 1 миллисекунды).
• Работает на любой допустимой странице JSON — URL не имеет значения.
• Кнопки для переключения между необработанным и проанализированным JSON.
• Разобранный JSON экспортируется как глобальная переменная json , поэтому вы можете проверить его в консоли. *

* Ввод json в консоли не работает, начиная с Manifest v3. Если вам нужен обходной путь, вставьте этот фрагмент в консоль:

 json = JSON . parse ( document . getElementById ( "jsonFormatterRaw" ) . querySelector ( "pre" ) . innerText )

Некоторые документы JSON для тестирования: https://callumlocke.github.io/json-formatter/

Установка

Вариант 1 (рекомендуется) – установите его из Интернет-магазина Chrome.

Вариант 2. Установите его из исходного кода (см. ниже).

Разработка

Требования: Deno (и Node на данный момент).

Начальная настройка:

• Клон репо
• Запустите pnpm i , чтобы получить типизацию TypeScript для Chrome (или используйте npm i если хотите)
• Необязательно: если вы используете VSCode и вам нужно возиться со сценариями сборки Deno, установите официальный плагин Deno и установите "deno.enablePaths": ["tasks"] .

Чтобы построить его:

• Запустите deno task build

Для сборки и пересборки при каждом изменении файлов:

• Запустите deno task dev

Чтобы установить локальную сборку в Chrome

• Откройте Chrome и перейдите по адресу chrome://extensions
• Включите «Режим разработчика»,
• Нажмите «Загрузить распакованное»,
• Выберите папку dist , которую вы создали выше.

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

Почему большие числа отображаются неточно?

Это ограничение JavaScript и, следовательно, ограничение JSON, интерпретируемого вашим веб-браузером.

• Все, что выше Number.MAX_SAFE_INTEGER ( 2^53 - 1 или 9007199254740991 ), корректируется до этого числа.
• Все, что ниже Number.MIN_SAFE_INTEGER ( -2^53 + 1 или -9007199254740991 ), корректируется до этого числа.
• Чрезвычайно точные числа с плавающей запятой округляются до 16 цифр.

Это делает не JSON Formatter, а встроенный JSON.parse в V8. JSON Formatter показывает проанализированные значения, точно такие же, как те, которые вы увидите после загрузки JSON в JavaScript.

Если вашей конечной точке API действительно необходимо представлять числа за пределами безопасного диапазона JavaScript, она должна заключать их в кавычки как строки .

Почему ключи объектов иногда располагаются в неправильном порядке?

То, что вы видите в JSON Formatter, — это представление проанализированного объекта/массива. Это тот же порядок, который вы получите с помощью Object.keys( JSON.parse(json) ) в JavaScript.

Исторически сложилось так, что стандарт JavaScript явно заявлял, что ключи объекта могут повторяться в любом порядке, и V8 воспользовался этим, переместив числовые строковые ключи (например, "1" или "99999" ) вверх, чтобы облегчить небольшую оптимизацию производительности. С тех пор эта деталь реализации V8 стала стандартизированной.

Но я просто хочу посмотреть, что именно выдает сервер.

На данный момент лучший вариант — просто использовать кнопку «Raw», чтобы увидеть необработанный JSON. Это то, что прислал сервер. Кнопки «Разобрано» представляют собой то, что вы получите от JSON.parse .

В будущем JSON Formatter может переключиться с использования JSON.parse на собственный синтаксический анализатор (если позволяет производительность), чтобы определять, когда значение было «изменено» путем анализа, и отображать соответствующее предупреждение.