iimon TECH BLOG

iimonエンジニアが得られた経験や知識を共有して世の中をイイモンにしていくためのブログです

Google Chrome のデベロッパーツール【Network編】について調べてみました。

二度目まして! 株式会社iimonでエンジニアをしている奥島です。 今回は普段使うデベロッパーツールの【Network】について調べてみました。

はじめに

Chrome デベロッパー ツールとは

Google Chromeにデフォルトで搭載されている開発者向けの検証ツールになります!!!! Webサイトのパフォーマンスを向上させるための多くの機能が搭載されています。

Networkパネルでできること

デベロッパーツールには、機能ごとに分かれたパネルが11個存在しています。今回のNetworkパネルはその中の1つになります。

Networkパネルは、現在開いている画面上で実行した通信のログを確認できます。 その他には、JavaScriptCSSの読み込み、URLをクリックしたときのリクエストや非同期通信のリクエスト、ページが使用しているテキストや画像データ、使用されたクッキーの情報などを確認できます。 また、各通信のリクエストやレスポンス、使用した時間や通信の成功失敗のステータスなども確認することができます。

詳細画面について

リクエストヘッダ

  • User-Agent:ブラウザの種類など(User agentを見ることで、どこのブラウザからアクセスされているのかが確認できる)

  • Referer:直前に見ていたページのURL(どのページからアクセスが来たか情報を渡すためのHTTPヘッダ)

レスポンスヘッダ

  • Content-Type:サーバがレスポンスをするためのヘッダ、MIMEタイプで指定する!!

例)サーバがレスポンスするためのファイルがHTMLならContent-Typeにはtext/html、CSSならtext/cssJPEG画像ならimage/jpeg

  • Content-Length:レスポンスボディの長さ

www.cresc.co.jp

プレビュー:テキストデータならレスポンスのテキスト、画像ファイルなら画像の情報が表示される

レスポンス :選択した通信でレスポンスされた内容(レスポンス本文)

クッキー :リクエストとレスポンス時のクッキー情報

タイミング :画面表示が完了するまでにかかった時間の詳細

まとめ

ネットワークパネルだけでも多くの情報を得られるんだなと改めて感じました!! デベロッパーツールには11個もパネルがあるのにほとんど使えておりません、理解すら出来ていません! デベロッパーツールには、まだまだ多くの機能があるのでこれから少しずつ身につけて行きたいと思います!

参考サイト

https://www.sakurasaku-marketing.co.jp/labo/blogs/developer-tools

https://zenn.dev/dekitate/articles/41785fa88efec3

https://www.fenet.jp/infla/column/server/chrome%E3%81%AE%E3%83%87%E3%83%99%E3%83%AD%E3%83%83%E3%83%91%E3%83%BC%E3%83%84%E3%83%BC%E3%83%AB%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B11%E3%81%AE%E3%83%91%E3%83%8D%E3%83%AB%E6%A9%9F%E8%83%BD%E3%81%A8/#Chrome%E3%81%AE%E3%83%87%E3%83%99%E3%83%AD%E3%83%83%E3%83%91%E3%83%BC%E3%83%84%E3%83%BC%E3%83%AB%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B11%E3%81%AE%E3%83%91%E3%83%8D%E3%83%AB%E6%A9%9F%E8%83%BD

https://developer.mozilla.org/ja/docs/Web/HTTP/Headers

https://www.cresc.co.jp/tech/java/Servlet_Tutorial/Att_03.htm

https://qiita.com/c0ridrew/items/7f2c9dad12543fa2662f

最後までご覧いただきありがとうございます。 弊社ではエンジニアを募集しております!

この記事を見て気になった方、是非一度カジュアルにお話ししましょう! ご応募心よりお待ちしております!!!

Wantedly / Green