acokikoy's notes

最近気になる=[NoCode, Shopify], I am..=[Python, ウクレレ, マニュアル車, CMS] LoveなWebディレクター

RESTful Web APIを扱う時の基本手法のまとめ(ブラウザのネットワークツール利用)

Web APIの疎通確認するとき、よくつかう操作のあんちょこ、ブラウザ編。

ちょこっとAPIの挙動を味見したい時 curlコマンドやブラウザのネットワークツールが手っ取り早い。はてなブログ など 身近なAPI を例に自分がよく使う操作についてまとめる。

ブラウザでWeb APIの疎通確認 (FireFox

ブラウザのネットワークツールによって、エンドポイントを叩いて戻り値を確認する時に使うあれこれ。ブラウザ: FireFox

エンドポイントにアクセス(GET)

ブラウザのアドレスバーからエンドポイントにアクセスする。GETリクエストが送られる。

エンドポイントにアクセス (POST)

ウェブ開発ツール > ネットワークモニター を開き、
ヘッダータブにある「編集して再送信」をクリック。リクエストヘッダーの編集画面が開くので、内容を書き換えて 「送信」する。

。。。基本方針としてはこれでイケると思うんだけど、細かいところまで検証できてない ^^;;

ウェブ開発ツール > ネットワークモニター

ウェブ開発ツール > ネットワークモニターで リクエスト、レスポンスの内容が細かく確認できる。

詳しい使い方は、ココを参照
ネットワークリクエストの詳細 - 開発ツール | MDN

f:id:acokikoy:20190929221330p:plain
ネットワークモニター

BASIC認証を通す

BASIC認証(curlなら -u id:passwrod で指定していた部分)は、 ヘッダにAuthorization: Basic ほにゃらら を追加してやる。

ほにゃらら部分は、 id:passwordBase64変換した値が入る。
例えば idがhatena_id, apiキーが api_key だったら Authorization: Basic aGF0ZW5hX2lkOmFwaV9rZXk= となる。

Google先生に「base64変換」で探してもらうと変換ツールが見つかる。

JSONビューワー

FireFoxはブラウザ本体にJSONデコード機能があるのできれいに表示される。

f:id:acokikoy:20190929220248p:plain
FireFoxJSON表示

Chrome の場合

Chrome の場合も基本は同様。

JSONをきれいに表示するには、
JSONView - Chrome ウェブストア 等エクステンション追加でFFと似たようなことができる。