2020.4.24

Chromeの拡張機能「JSONView」でJSONデータをフォーマットして表示する

REST APIやJSON形式のファイルをブラウザで表示した際、データの内容を確認するために、JSONデータの内容をフォーマット(整形、キーや値の色変え)してほしい時があります。

そういった時はChromeの拡張機能「JSONView」を使うと確認しやすくなります。

目次

  • 素のJSONデータ
  • JSONViewで表示されたJSONデータ
  • Chromeの拡張機能に「JSONView」を追加する方法

素のJSONデータ

ブラウザから改行も何もされていないJSONファイルにアクセスすると、以下のように表示されます。

この場合、表示されたJSONデータをフォーマット可能なエディタにコピペして整形する、といったことをしないといけませんが、それでは手間です。

JSONViewで表示されたJSONデータ

Chromeの拡張機能「JSONView」を入れると、以下のように表示されます。

データのフォーマットだけでなく、キーや値の色が変わって大変見やすくなっているのが分かります。

Chromeの拡張機能に「JSONView」を追加する方法

Chromeの拡張機能に「JSONView」を追加するには、Chromeの右上の設定メニューから「その他のツール > 拡張機能」を選択します。

拡張機能の管理画面が開いたら、左上のメニューをクリックし、

表示されたメニュー左下の「Chromeウェブストアを開きます」を選択します。

Chromeウェブストアの検索ボックスに「JSONView」を入力して、検索結果に表示された拡張機能から該当の機能を「Chromeに追加」します。

追加後にブラウザでJSONファイルを開くと、JSONデータがフォーマットされて表示されます。

JavaScript】関連記事