Как посмотреть json в браузере

Просмотр форматированного JSON

Используйте средство просмотра JSON для автоматического форматирования и выделения синтаксиса ответов и файлов JSON на вкладках браузера.

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

Средство просмотра JSON улучшает удобочитаемость данных JSON несколькими способами:

• Синтаксис JSON выделен разными цветами.
• Свойства объектов отображаются в собственных строках и имеют отступ.
• Объекты могут быть свернуты или развернуты.
• Средство просмотра JSON соответствует темной или светлой теме операционной системы.

Поддерживаемые сценарии

Средство просмотра JSON не поддерживается в окнах, открытых с помощью window.open метода JavaScript. В окнах, открытых с window.open помощью , данные JSON отображаются в виде одной строки текста без форматирования или выделения синтаксиса.

Просмотр ответов сервера JSON с переформатированием

Чтобы просмотреть ответ JSON с веб-сервера в виде отформатированного JSON, выполните следующее:

1. Откройте новую вкладку или окно в Microsoft Edge.
2. Введите URL-адрес, который возвращает данные JSON в адресной строке. Например, используйте пример ответа JSON: https://microsoftedge.github.io/Demos/json-dummy-data/256KB-min.json. Дополнительные примеры ответов JSON см. в статье MicrosoftEdge /Demos > json-dummy-data.
3. Microsoft Edge обнаруживает, что возвращенные данные являются JSON, и автоматически форматирует их:

Просмотр отформатированных JSON-файлов

Чтобы просмотреть JSON-файл, хранящийся на устройстве, как формат JSON с переформатированным:

1. Откройте новую вкладку или окно в Microsoft Edge.
2. Нажмите клавиши CTRL+O в Windows и Linux или COMMAND+O в macOS, а затем выберите JSON-файл.
3. Microsoft Edge обнаруживает, что файл содержит данные JSON, и форматирует его автоматически:

Обнаружение недопустимых данных JSON

Иногда данные JSON могут быть недопустимыми. Например, следующие шаблоны недопустимы в ФОРМАТЕ JSON:

• Опустите двойные кавычки вокруг имени ключа.
• Последняя запятая после последней пары «ключ-значение».

Средство просмотра JSON применяет выделение синтаксиса к недопустимому JSON. Однако средство просмотра JSON не отформатировать содержимое, и вы не можете свернуть или развернуть объекты.

Сведения о недопустимом синтаксисе можно найти в средстве «Консоль» , где средство просмотра JSON сообщает об ошибках.

Чтобы просмотреть недопустимые данные JSON, выполните приведенные далее действия.

1. Откройте новую вкладку или окно в Microsoft Edge.
2. В адресной строке перейдите по URL-адресу, который возвращает недопустимые данные JSON. Например, используйте пример недопустимого ответа JSON: https://microsoftedge.github.io/Demos/json-dummy-data/missing-colon.json. Другие недопустимые примеры ответов JSON можно найти на странице MicrosoftEdge /Demos > json-dummy-data.
3. Microsoft Edge обнаруживает, что файл содержит недопустимые данные JSON, и раскрашивает список JSON, но не преобразует и не переформатирует описание JSON. Тот факт, что JSON не упакован в оболочку, указывает на наличие неправильного формата JSON.
4. Откройте консоль , нажав клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Ошибка JavaScript указывает, где находится синтаксическая ошибка JSON:
5. В редакторе кода, например Microsoft Visual Studio Code, перейдите к указанному номеру столбца, чтобы проверить JSON:

Посмотреть файл JSON в браузере

Это не вопрос программирования, но вам нужно несколько слов. Когда мы нажимаем на JSON-url в Broswer, он просит нас сохранить файл. Почему это происходит? Есть ли способ просмотреть его на самой странице? Есть ли доступный аддон для просмотра файла JSON в браузере?

Umesh Patil 27 март 2012, в 14:23
Поделиться

Я предполагаю, что вы используете IE, если вы используете Chrome, он появится на странице. но если вы измените Content-Type: text / html; charset = utf-8, это должно позволить вам просматривать его на странице

Qpirate 27 март 2012, в 11:43

@Qpirate Content-Type идеального файла JSON — это всегда json. Это не может быть текст / HTML. Есть ли у вас какое-либо решение для Firefox / IE? Водун решил это за хром.

Umesh Patil 27 март 2012, в 11:46
То же самое для Firefox: jsonview.com
Vodun 27 март 2012, в 11:47

@Umesh Извините, мои мысли о желании увидеть возвращенный json состояли в том, чтобы вы могли отладить ответ, следовательно, изменив тип ответа. я не пытаюсь просмотреть мой JSON, возвращаемый в браузере, в основном, я просто использую Fiddler, чтобы увидеть, что возвращается. извиняюсь.

Qpirate 27 март 2012, в 11:52
Umesh Patil 27 март 2012, в 11:52

Поскольку сервер возвращает недопустимый «Content-Type: application / octet-stream», должен быть «application / json»

Vodun 27 март 2012, в 11:58
Где упоминается «Content-Type: application / octet-stream»?
Umesh Patil 27 март 2012, в 12:08

В заголовке http. Вы можете увидеть это с помощью curl -v content.dimestore.com/prod/survey_data/4535/4535.json

Vodun 27 март 2012, в 15:24
jmoreno 30 сен. 2015, в 00:02
Показать ещё 7 комментариев
Поделиться:
internet-explorer
google-chrome

10 ответов

Лучший ответ

В Chrome используется JSONView или Firefox используют JSONView

Vodun 27 март 2012, в 12:28
Поделиться
+1. спасибо Водун. Я жду решения по FF / IE 🙂
Umesh Patil 27 март 2012, в 11:43
@Umesh addons.mozilla.org/en-US/firefox/addon/jsonview для firefox . добавлено в ответ
ManseUK 27 март 2012, в 11:53

Как использовать это дополнение? Я установил, но когда я нажал на URL JSON. Сохраняется в загрузках браузера

Umesh Patil 27 март 2012, в 11:53

@Umesh прочитайте справку на странице плагина —-> Обычно при обнаружении документа JSON (тип содержимого «application / json») Firefox просто предлагает вам загрузить файл. С расширением JSONView документы JSON отображаются в браузере подобно тому, как отображаются документы XML. Документ отформатирован, выделен, а массивы и объекты могут быть свернуты. Даже если документ JSON содержит ошибки, JSONView все равно покажет необработанный текст.

ManseUK 27 март 2012, в 11:54

@ManseUK @Umesh Firefox все равно предложит вам загрузить файл, если есть заголовок ответа Content-Disposition: attachment файл, даже с JSONView. Я добавил ответ, чтобы также просмотреть эти файлы JSON в браузере stackoverflow.com/questions/9888861/view-json-file-in-browser/…

baptx 22 авг. 2015, в 14:10

@UmeshPatil В Chrome нужно просто щелкнуть правой кнопкой мыши и выбрать метод «Открыть в новой вкладке» в методе, который возвращает данные JSON из вкладки «Сеть» -> «XHR» браузера Chrome.

Просмотр JSON онлайн

Открывайте и просматривайте файлы JSON онлайн используя бесплатное приложение для просмотра файлов JSON.

Загружая файлы или используя наш сервис, вы соглашаетесь с нашими Условиями использования. и Политикой конфиденциальности.

Мы уже обработали 4 509 374 файлов общим размером 7 713 751 МБ.

О приложении просмотра

Современные компьютерные приложения хранят информацию в файлах разных типов. Для обработки файлов определенного типа зачастую необходимо специализированное программное обеспечение, занимающее много места, а иногда и требующее оплаты. Однако вы не станете устанавливать программный пакет, занимающий десять или более гигабайт, да еще и платить за это, чтобы просмотреть один файл. Кроме того, вы можете получить файл на мобильный телефон, а многие программные пакеты не имеют мобильных версий. Конечно, вы можете добраться до компьютера, но иногда это займет много времени, да и на компьютере может не быть необходимого программного обеспечения.

GroupDocs.Viewer — быстрый и эффективный API для рендеринга файлов более чем 170 различных форматов. Работая на высокопроизводительном облачном сервере GroupDocs, он отображает файлы JSON в браузере. Технологии GroupDocs.Viewer позволяют добиться идеального и идентичного отображения документа на любой платформе.

Это бесплатное онлайн-приложение на базе GroupDocs.Viewer API отображает файлы JSON на вашем устройстве. Мы сохраняем вашу конфиденциальность, файл виден только вам. Вы можете распечатать просматриваемый файл прямо из браузера. Вы также можете загрузить файл PDF, чтобы поделиться с кем-то или просмотреть его позже. Приложение работает на любом устройстве, включая смартфоны.

Возможности приложения для просмотра

• Приложение Viewer — это бесплатное онлайн-приложение, позволяющее просматривать файлы более чем в 170 форматах, от широко распространенного Microsoft Office до узкоспециализированных CorelDRAW, Adobe Illustrator или AutoCAD.
• Используйте это приложение для открытия файлов, навигации по страницам и преобразования файлов в формат PDF.
• Онлайн-приложение не требует установки. Запустите браузер, откройте страницу приложения и просмотрите файлы.
• Ограничений нет. Просмотр любого количества файлов в день абсолютно бесплатно.

JsonDiscovery: Меняем опыт просмотра JSON в браузере

Сегодня я хочу рассказать о JsonDiscovery, браузерном расширении для просмотра JSON. Возможно вы скажете: «у нас и так полно подобных расширений!». Да, полно, но фичи JsonDiscovery отличают его от других и делают его действительно мощным.

Давайте же взглянем поближе.

Для демонстраций я использовал JSON-файл коллекции всех карт из проекта Hearthstone-DB (спасибо Ольге Кобец за идею). И вот как он выглядит, если открыть его в браузере с установленным JsonDiscovery:

На первый взгляд это всего лишь еще один раскрасчик JSON. Все потому, что большинство фич не на поверхности, чтобы не отвлекать вас от вашего JSON. Давайте их раскроем:

• Простое копирование фрагментов JSON в буфер
• Сигнатура структуры JSON
• Трансформация JSON с помощью запроса
• Подсказки при написании запроса к JSON
• Настройка отображения данных из JSON
• Шаринг «отчетов» по ссылке

Рассмотрим каждый пункт детальнее.

Простое копирование фрагментов JSON в буфер

Бывает что нужно скопировать фрагмент JSON’а, то есть некоторого вложенного объекта или массива. С JsonDiscovery это простая задача, так как каждый развернутый объект и массив имеют кнопки действий. Одна из них кнопка «ƒ» button, нажав которую можно скопировать JSON в компактном или форматированном виде:

Сигнатура структуры JSON

Когда вы изучаете данные, полезно иметь представление об их структуре. Просто наведите на кнопку «S» в панели действий на развернутом объекте или массиве и вы увидите сигнатуру структуры поддерева, как примерно это выглядит в TypeScript:

Вы так же можете навести на свойство или тип значения в сигнатуре структуры чтобы получить некоторые детали, например о том какие значения использовались для поля:

Запросы к JSON

Клик по кнопке «Make report» переводит вас на страницу, где вы можете делать запросы к вашему JSON и/или настраивать его отображение:

Для запросов используется язык Jora. Он частично основывается на синтаксисе JavaScript 2015+, но в большей степени, задуман быть компактным и выражать больше (в рамках задачи запроса к данным).

Обычно вам нужно только выбрать некоторое подмножество данных используя некоторый путь, вроде foo.bar.baz . Если ключ имеет запрещенные символы просто используйте [] (квадратные скобки), то есть foo[‘a key with whitespaces’] . Все как в JavaScript, за исключением того, что не нужно переживать существует путь или нет:

Часто необходимо использовать фильтрацию или мапинг. Jora предоставляет .[] для фильтрации и .() для мапинга:

Пример на скриншоте выше ( cards.[health].(< name, health >) ) можно записать на JavaScript так:

cards.filter($ => $.health).map($ => (< name: $.name, health: $.health >))

Что гораздо многословнее, не так ли?

Вы можете найти больше о самом Jora и его синтаксисе в его репозитории на github. (Кстати, у него так же есть CLI и песочница)

Подсказки при написании запроса к JSON

Эту фичу невозможно описать правильно. Это нужно попробовать самому. Хотя бы раз:

Настройка отображения данных

Когда вы выбрали необходимые данные из JSON, вы можете настроить их отображение. Например, вывести их таблицей, или списком, вроде такого:

К сожалению, на данный момент нет достаточной документации о том, как описывать отображение (все что можно найти, может быть найдено в репозитории discovery.js). Но я верю это исправится в ближайшем будущем.

Шаринг «отчетов» по ссылке

Это были наиболее впечатляющие фичи JsonDiscovery, но есть гораздо больше фич поменьше, потому что расширение и проекты, лежащие в его основе, создаются с вниманием к деталям. И я могу с уверенностью сказать, все это меняет опыт работы с JSON в браузере!

JsonDiscovery доступен как расширение к Chrome и Firefox, и разрабатывается exdis как проект с открытым исходным кодом. Расширение построено на основе проекта Discovery.js, который еще на раней стадии разработки, но уже полезен для проектов вроде JsonDiscovery. Так что ожидается больше улучшений и фич в будущем. Следите за анонсами!

• json
• визуализация данных
• расширения chrome
• расширение firefox

• Визуализация данных
• Расширения для браузеров