1. はじめに
Webアプリを開発していると、「なぜこのリクエストが飛んでいるんだろう？」と感じることが少なくありません。とくに外部ライブラリや複雑なJavaScriptコードを利用している場合、意図しないリクエストが発生し、パフォーマンスや安定性に影響を与えることがあります。
こうしたときに役立つのが、DevTools Networkタブの Initiator 機能です。Initiatorを使うことで、各リクエストが「どこから発生したのか」を把握でき、原因調査がスムーズになります。
2. Initiatorとは何か
Networkタブには、各リクエストごとにHeaders, Payload, Preview, Response等の詳細を確認することができます。その中の一つが Initiatorカラム です。
このカラムには「リクエストがどこから発生したのか」が示されており、たとえば「HTMLパーサーが直接読み込んだリソース」や「JavaScriptコードから呼び出されたリソース」といった分類が行われます。
つまり、Initiatorを確認すれば「このリクエストはタグ経由なのか、スクリプト経由なのか」をひと目で判断できるのです。
3. Initiatorの使い方
3.1 Initiatorカラムの確認手順
- ブラウザでDevToolsを開く（
F12またはCtrl+Shift+I/ MacならCmd+Opt+I） -
Networkタブを選択する - リクエスト一覧から任意のリクエストを選択する
- 詳細から
Initiatorカラムを押下する
これで、各リクエストの「発生元」が一覧で確認できるようになります。
3.2 Initiatorチェーンで依存関係を追跡する
任意のリクエストをクリックすると、右ペインに「Initiatorチェーン」が表示されます。これは「どのコードからこのリクエストが生まれたのか」をツリー構造で追跡できる機能です。
たとえば、App.tsx → useGithub.ts → github.ts -> getUserRepos といった流れが見えるので、どのファイルや関数が原因かを特定するのに非常に便利です。
4. 開発・デバッグでの活用例
-
不要リクエストの特定
ページを開いた直後に想定外の画像やスクリプトが読み込まれている場合、Initiatorを確認すれば「HTMLに直接書かれているのか」「JSライブラリ経由なのか」を特定できます。 -
外部APIコールのトラブルシュート
APIエンドポイントが意図せず繰り返し叩かれているとき、Initiatorを見ればどの関数から呼ばれているのかが一目瞭然です。
5. まとめ
DevToolsのNetworkタブにある Initiator は、単なるリクエスト一覧を超えて「そのリクエストがどこから来たのか」を明らかにする強力な機能です。
Initiatorチェーンで依存関係を追跡できるようになると、デバッグ効率が飛躍的に向上します。
次にリクエストの発生源が気になったら、ぜひInitiatorをチェックしてみてください。