[Chrome] JSON ViewerでJSONを見やすくしよう！

ChromeでJSONを見やすく表示する拡張機能「JSON Viewer」のご紹介です。

藤井元貴

2020.08.03

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

API開発や利用を行うとき、ブラウザでJSONを取得することがあります。 APIドキュメントによってはJSON構造と型のみが書かれている場合もあり、「実際にどんな値が入っているの？」を確認したい場合などです。

しかし、次のように文字列が単純表示されているとかなり見にくいです。

これは気象情報を取得するOpenWeatherMapのAPIを叩いた際のレスポンスです。分かりやすく見ようと思うと、何らかのJSON FormatterでPretty表示することが多いです。

この作業（JS0Nコピー＆JSON Fomatterに貼り付け＆Pretty表示）が地味に手間です。そこでChrome拡張機能で楽しちゃいましょう！！！

JSON Viewer

下記の拡張機能をインストーするだけです！

実際に冒頭のJSONを表示したものがこちらです。

圧倒的に見やすいですね！

上部メニューのSaveを選択すればJSONファイルとしてダウンロードができますし、Copyを押せばクリップボードにJSONをコピーしてくれます。

▼マークを押せば折りたたみ表示ができます。

上部のCollapse AllやExpand Allを押せば、「全部折りたたみ」や「折りたたみを全展開」もできます。

左上のフィルタリングを入力すると、イイカンジにフィルタリングして表示できます。KeyとValueのどちらも対象です。

Raw Dataにタブを切り替えれば生データ表示もできます。

Pretty Printを押せば整形表示もバッチリです。

リクエストとレスポンスのヘッダー情報が見れます。見る機会は少ないかもしれませんば、Webアプリ開発をしている場合などでお世話になるかもしれません。

JSONに関しては様々な拡張機能がありますが、個人的にはFirefox標準の表示が好きなので、ChromeでもFirefoxと同じ表示ができる拡張機能を求めていました。ドンピシャでした。

JSON関連の拡張機能は導入済みの方は多いと思いますが、まだ導入してない方やこっちのほうが良さそうという方の参考になれば幸いです。