Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
260
Help us understand the problem. What is going on with this article?
@fruitriin

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

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 ...」を紹介しました。

その他のデバッグ術

260
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
studist
「伝えることを、もっと簡単に」をミッションにビジュアルSOPマネジメントプラットフォームのBtoB SaaS「Teachme Biz」を開発・運営するスタートアップ

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
260
Help us understand the problem. What is going on with this article?