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

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

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

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

JSONが見にくい様子

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

VSCodeでJSONを整形した様子

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

JSON Viewer

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

JSONが構造化されて表示される

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

Chrome拡張機能でJSONを見た様子

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

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

SaveやCopyができる

折りたたみ表示ができる

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

折りたたみ表示ができる

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

全体に対する折りたたみや展開ができる

フィルタリングができる

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

フィルタリング表示ができる(Key)

フィルタリング表示ができる(value)

生データ表示ができる

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

生データ表示もできる

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

生データ表示でも整形できる

Header情報が見れる

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

リクエストとレスポンスのHeaderが見れる

さいごに

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

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

参考