Chrome Developer Toolsでパフォーマンス計測・改善 - Qiita

Chrome Developer Toolsを使ったWebページのパフォーマンス計測・改善についての説明です Networkパネル、Timelineパネル、Profilesパネルの使い方を説明してから パフォーマンスの計測・改善について説明していきます Networkパネル Networkパネルはページのリクエストをしてからの通信内容の一覧を表示します 記録方法 左上のRecordボタンを押すと記録が始まる もう一度押すと記録が停止する 必要に応じて、Disable cacheやCapture screenshotsを設定する 表示項目の変更 赤枠で囲んだ部分を右クリックすると こんな感じでメニューが出てくるので表示したい項目をクリックする 項目の一例 Name：リソースの名前 Method：HTTPメソッドの種類 Status：レスポンスのステータスコードとテキスト Type：リソースの

[kiririmode]

Chromeのdevtoolsを使ったパフォーマンス解析。メモリ量のobjectごとの断面比較やメソッドレベルのプロファイリング等。非常に参考になる

[yk_ac]

“Networkパネルはページのリクエストをしてからの通信内容の一覧を表示します”

[stray346]

]

[termin2]

Http Archive あとでつかう

[amels]

webページの容量を測定する。

[yoppe9509]

わかりやすい

[d4-1977]

いろいろあるなあ

[koheisg]

ちゃんと使いこなせてないなぁ。。

[efcl]

Chrome開発者ツールのそれぞれのパネルの図解。 操作方法や項目の意味などについて書かれてる。