【Chrome Developer Tools入門】Netｗorkパネルで確認できること

NetWorkパネルではどのファイルがどのタイミングで読み込まれたか確認することができます。Webサイトで読み込みが遅い際にヒントになります。

●各カラムの説明

NAME：ファイル名。ファイル名をクリックするとソースなど詳細を確認することができ、Previewで画像を見ることもできる。

Status：ステータス

TYPE：ファイルの種類

Initiator：ファイルがどこから呼び出されたか

Size：ファイルサイズ

Time：読み込みにかかった時間

Timeline：どのファイルが、どの順番で、どのタイミングで、どのくらいの時間をかけて読み込まれたか確認することができる。

Wrterfall：青い線と赤い線があり、青い線はツリー上のオブジェクトが構成されたタイミングを示します。赤い線は画像や広告などがすべて読み込まれたタイミングを示します。

※上記はデフォルトで表示されているカラムです。カラムの種類は上記以外にもあります。

※右クリックで「Clear Browser Cookies」や「Clear Browser Cache」でクッキーやキャッシュを削除することができます。