members

members

Chromeのデべロッパーツールについて(Network編)

Tweet

前回に引き続き、Chromeのデベロッパーツールの便利な機能をご紹介していきます。
前回の記事はこちら

今回はNetworkパネルの機能についてです。

Networkパネルとは

Networkパネルはブラウザがサーバに要求したリソース、サーバからダウンロードしたリソースを詳しく分析したり、ページの読み込みパフォーマンスを最適化するために利用します。

まずはNetworkパネルを開いてみましょう。
デベロッパーツールを開いて、Networkと書かれてるタブをクリックすると、下記のような画面が開きます。

  1. Networkパネルの機能やパーツの表示/非表示を制御
  2. 読み込んだページのリクエストのタイムラインを表示
  3. 読み込んだページのリクエスト情報の表示(以下、リクエストテーブルと呼ぶ)(※2)
  4. リクエスト総数/転送データ量/ロード時間などを表示

では、いくつかの機能をみてみましょう。

※1.chromeのバージョンやパーツの表示/非表示の設定によって、レイアウトが異なる場合があります
※2.リクエスト情報は、デベロッパーツールを開いた状態でページが読み込まれないと表示されないため、デベロッパーツールを開いた後にリロードしてください

Capture screenshots

Capture screenshots は、ページのスクリーンショットをタイムラインにそって取得する機能です。(赤枠のオプションをチェックしてください)(※1)
※1.Networkパネルを開いた状態でページをロードしないと、スクリーンショットを取得できません。

この機能は、時間経過とともに描画されるページのスクリーンショットを取得します。
スクリーンショットをクリックすると、それに対応するタイムラインが表示され(下記画像:2参照)、その時点で読み込まれてるリソースのみがリクエストテーブルに表示されます(下記画像:3参照)。

Filter

Filterは、リソースの表示を絞り込むための機能です。
フィルタのボックスにテキストを入力すると、そのテキストにマッチするリソースのみを表示できます。

また、リソースタイプ(JS /CSS / Imgなど)をクリックして、絞り込みすることもできます。
リソースタイプは Ctrl キー(Macは Command)を押しながら複数選択できます。

Mobile simulation

Mobile simulatorは、ネットワーク環境(ダウンロード、アップロード、レイテンシー)をスロットリング(エミュレート)する機能です。

たとえば、低速なモバイルネットワーク(3Gなど)で、コンテンツがストレスなく正常に表示されるかを評価するようなことができます。

スロットリングは、赤枠のプルダウンからプリセット(Fast 3G / Slow 3G など)選択することで有効になります。スロットリングは、カスタムプロファイル(Custom > add…)でユーザ設定することもできます。
最近は、モバイルネットワークによるコンテンツアクセスが主流となっているため、パフォーマンス評価や最適化に便利な機能といえるでしょう。

Request table

Request table は、ロードされたリソースを一覧表示するため機能です。
たとえば、モバイル環境でロードに時間がかかっているような場合、
リソースファイルの容量やロード時間をソーティングする(図の赤枠)ことで、パフォーマンスに影響しているリソースを調査し、最適化の手掛かりとすることができます。

まとめ

今回は、Network パネルの一部をご紹介しました。タイムラインに沿って画面描画がどのように進行するのか、パフォーマンスのネックがどこにあるのか、モバイル環境でストレスなく表示されるか、などを客観的なデータをもとに評価することができます。

コンテンツは、意図どおり正しく表示されることは当然ですが、今やパフォーマンスの最適化も必須のため、制作においては重宝するツールといえるでしょう。

Networkパネルには、ほかにも有用な機能がたくさんありますので、みなさんもぜひ活用してみてください。

コラム執筆者

細川 太輔

BU1-AS5所属
正月の地元の腕相撲大会で優勝しました。