Chrome DevTools には仕事でよくお世話になっています。とはいえ、まだまだ知らない機能がたくさんあって全然使い切れていません。その中で、最近たまに使う Network タブの機能2つです。
Initiator
リクエストを投げたファイルやプロセスを表示します。JavaScript コードの場合、リンクをクリックするとソースコードの該当箇所にジャンプします。
(余談)
ある画面でメニューリンクをクリックするとモーダルが表示される機能があるのですが、先日、そのメニューをクリックするとモーダル表示と同時に画面全体がリロードされる不具合がありました。リロードというか、表示中のページURLをそのままリクエストしている感じ。
当初、メニュー周りの実装にバグがあるかと思って調べてたのですが、どのタイミングで誰がリクエストしているのか分からず。
ここで、DevTools の Network タブで Initiator を確認します。誰がそのリクエストを投げているのか一発で分かります。
結局、ある jQuery ライブラリがメニューのリンクに click イベントを引っかけていて、特定の条件でリクエストが投げられていることが分かりました。ライブラリ側の設定で回避。
Timing
リクエストの内訳を詳細表示します。
(余談)
ある画面で、更新ボタンをクリックしたところ非常に時間がかかるという問い合わせがありました。
当初、サーバー側の更新処理が遅いかと思ったのですが、アプリケーションログを見ても特にレスポンスが遅いところは見られず。
ここで、DevTools の Network タブで Timing を確認します。Request/Response の欄を見ると Request sent に 10 sec 近くかかってる...。ちなみに Waiting は 1 sec 以内。
結局、画面側にファイルを添付する機能があり、このファイル送信に時間がかかっていました。更新とファイルアップロードを分離して、少しは UX 改善になったはず...。
