アジェンダ

開発者ツールのネットワークタブを使用して、API 呼び出しを確認し、コード内での呼び出し箇所を特定する具体的な手順について簡単にまとめます。

手順

まず、ブラウザで開発者ツールを開きます。

Google Chrome や Microsoft Edge を使っている場合、次の手順で開発者ツールを開きます:
- 右クリックして「検証」を選択する。
- または、F12 キーを押すか、macOS では Cmd + Opt + I、Windowsでは、Ctrl + Shift + Iを押します。
開発者ツールのメニューが表示されたら、「ネットワーク」タブをクリックします。

「ネットワーク」タブが開いた状態で、ページをリロード（再読み込み）します。API 呼び出しはページが読み込まれる際に実行されるため、これで API リクエストがキャプチャされます。

ネットワークタブでは、膨大な数のリクエストが表示されることがあるため、XHR や Fetch フィルターを使って API 呼び出しを絞り込みます。

XHR（XMLHttpRequest）や Fetch は、主に API 呼び出しで使用されるリクエストの種類です。これらにフィルタリングすることで、API リクエストのみを表示することができます。

特定の API リクエストをクリックすると、その詳細が表示されます。ここで重要なのは以下のポイントになります。

リクエストが送信された API の URL です。これを使用して、ソースコード内でどのエンドポイントにリクエストを送信しているかを確認できます。

送信されたリクエストのペイロード（データ）を確認します。特に、POST リクエストや PUT リクエストの場合、サーバーに送信されているデータがこのセクションに表示されます。
ペイロード内のフィールドや値を使って、コード内でどのデータがどのように送られているかを確認する手がかりにできます。

API からのレスポンスを確認します。返されるデータの形式（JSON など）や内容を確認することで、どのコンポーネントでこのデータが使われているかがわかる場合があります。

API の URL やリクエストペイロードを確認したら、次にソースコード内でその URL や関数を検索します。

確認した API エンドポイント（例えば https://api.example.com/v1/products/list）で、ソースコード全体を検索します。URL が直接書かれている箇所が見つかるかもしれません。

axios や fetch、trpc など、使用されている API クライアントライブラリをソースコード内で検索します。例えば、axios.get、fetch 関数、trpc.client.query などです。これにより、API リクエストのコード箇所を特定できます。

多くの場合、API 呼び出しは useEffect の中で行われています。そのため、useEffect を探し、API 呼び出しがいつ行われるか確認します。

特定の API リクエストが行われる箇所を見つけたら、どのコンポーネントや関数で実行されているか確認し、さらにデータの流れや使い方を追跡します。