Webエンジニア向け！画面操作に対応するControllerの探し方

#ツール

記事をシェア：

コピー

こんにちは。飯塚です。

Webエンジニアをやっていると、後輩から「Controllerがどこにあるのか分からない」という質問をよく受けます。画面からの操作（リクエスト送信）に対応するプログラムを、どうやって見つければいいのか分からないということですね。

今回は、Chrome開発者向けツールの「Network」タブを使って簡単に見つけるための方法をご紹介します。

Chrome開発者ツールを開く

まずはChromeを起動して、対象のページを開きましょう。

Googleアカウント登録画面を例に解説します。
（参考）Googleアカウント作成画面

まずはF12を押して開発者向けツールを開きます。

開発者ツールの「Network」タブを開く

「Network」タブが隠れている場合は、「>>」を押して、メニューを表示させてから開きます。

「NetWork」タブに切り替わりました。

過去の通信の記録が残っていますが、今回は不要なのでクリアしておきましょう。

クリアするとまっさらになるので、次にリクエストを送信したときに対象の通信を見つけやすくなります。

リクエストを送信して「Network」タブで対象の通信を特定する

試しにリクエストを送ってみましょう。登録画面に適当な値を入力します。

ボタンを押してリクエストを送信します。

通信の記録が表示されます。

今回調査したいリクエストを探します。主な観点は3つです。

通信にかかった時間（一番時間がかかったリクエストが対象であることが多い、「Time」列でソート可能）
リクエストの名称（機能が想像できる名称になっていることが多い）
通信名の拡張子（CSS, JavaScript, フォント系は対象外）

対象の通信をワンクリックすると、詳細が表示されます。

リクエストの送信先を確認してエディターでGrep検索する

「Header」タブの「Request URL」にリクエストの送付先が書かれています。

このリクエスト先をキーワードとして、エディター上でGrep検索（全文検索）すれば、対象のControllerを見つけることができます。

Grep検索の手順は下記参考です。
（Eclipse）複数のファイルから該当する単語を検索する方法【grep検索】
（VSCode）2018/12 開発で大切なgrep

おまけ「Network」タブでリクエストとレスポンスの内容も確認できる

「Network」タブではリクエストとレスポンス内容を確認することができます。開発で役立つので、おまけとして紹介します。

「Payload」タブを開くと、リクエストの送信内容を確認できます。

「Preview」タブを開くと、レスポンスの送信内容を確認できます。デバッグしなくてもブラウザ上で送受信の値を確認できるのが便利ですね。