242
259

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[サーバーサイドAPIデバッグ術]ブラウザのリクエストを簡単にリトライしてサーバーの挙動を見る方法

Last updated at Posted at 2020-07-05

APIの開発してますか?挙動の確認を見る時どうしてますか?
curlを手書きしている?パラメータがないリクエストなら手軽で良いですね。
Postmanのようなツールを使っている?素晴らしい!
ブラウザで実際に画面を表示している?うーん…それって繰り返したいとき大変なんじゃ……

とはいえ、ブラウザで実際に画面を表示すると、パラメータの組み立てが非常に楽というメリットがあります。
認証情報付きリクエストとか組み立てるの大変ですもんね。

ここで、ブラウザのリクエストをそのまま繰り返したり、ちょっとだけパラメータを組み替えられたら便利だと思いませんか?

今回はそんな方法を紹介します。

cURLでコピーしてリトライする

Chromeの開発者ツール(Windows F12、Mac Cmd + Opt + I)を開いてネットワークタブを開いてください。
この状態で目的のページを開いてください。

スクリーンショット_2020-07-05_22_30_52-5.png Preserve Logのチェックが外れていれば、最後にブラウザをリロードしてから現在までのリクエストがここに上がってきます。 (逆に、チェックをつけると、リロードしてもリクエストのログが破棄されなくなります) スクリーンショット_2020-07-05_22_30_52.png フィルターをXHRにするとJavaScriptによる非同期通信に絞り込むことができます。 リストから目的のAPIを探してください。見つからないときはPreviewやHeadersタブを頼りに一個一個探していきましょう。 スクリーンショット_2020-07-05_22_39_08.png

目的のAPIを見つけたら右クリックしてメニューを出してください。
この中のCopyから「Copy as cURL」を選択しましょう。

すると、クリップボードにcURL形式でコピーされます。
cURL形式であれば、Terminalから実行することができます。
この形式であれば他のエンジニアにも試してもらうということが簡単にできるでしょう。
(POSTリクエストではクッキー情報なども入ってくるので共有する内容には気をつけてください)

スクリーンショット 2020-07-05 22.42.25.png

fetchとしてコピーしてリトライする

コピーのもう一つの方法として、「copy as fetch」も便利です。先程と同様に、リクエストを探して今度はcopy as fetchを選択してください。
スクリーンショット 2020-07-05 22.50.30.png

このように、開発者ツールのConsoleに入れて有効なfetchとしてコピーされています。
スクリーンショット_2020-07-05_22_53_46.png

こちらのほうが、Request Bodyがエスケープされてなくて若干可読性が高く修正しやすいかもしれません。
好みですかね。

ちょっとだけ改変してリクエストする

いずれもリクエスト情報が完全に文字列になっているので、リトライも容易であれば改変も容易です。
copy as cURLは --data オプションに続けたJSON文字列をエスケープしたもの、
copy as fetchは bodyパラメータはURLSearchParamsです。
URLSearchParamsを展開するには[...new URLSearchParams("Bodyパラメータの中身").entries()] とすると良いでしょう。
JSON.stringify()すればJSONにもなりますし、加工しやすいかと思います。
スクリーンショット 2020-07-05 23.37.51.png

Copy all as ...

並列して存在する項目に「Copy all as cURL」や「Copy all as fetch」があります。
こちらの項目ですが、選択項目によらず、リストアップされているリクエストが全部クリップボードに放り込まれてしまいます。
場合によっては便利なのでしょうがうっかり押し間違えて貼り付けたらなにこれ?!みたいなことが多いので気をつけてください。

まとめ

しれっと便利な機能がブラウザにはたくさんありますが、今回はその中で「Copy as ...」を紹介しました。

その他のデバッグ術

242
259
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
242
259

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?