【開発環境】フロントエンドが使うべきChrome dev toolでデバックするためのTips

読了: 約 3 分

仕事で使用する頻度が多くなってきたのでメモしておきます。
前回のDATAURI化の記事から今回の記事で紹介するChromeのdeveloperツールを使って、
デバックして結局spliteに戻したので、その過程についても書いていきます。

はじめに

Chrome devloper toolとは。
Chromeの要素を検証したときに出るアレです。
下の方にあるリストの簡単な説明をしていきます。

Elements

デザイナーやマークアップエンジニアの皆さんにはなじみ深い所かと思いますが、
要素を検証ではまずここを使いますよね。

divなどの構造をいじって、class,idのネームを変えてみたりstyleを変更してみたり
かなりベーシックな使い方ですよね。

Resources

ここではLocal Storageやsessionに何を保存しているかが分かります。
swagger等でapiの管理をしているときに、clientid等を入力して、postしたい時に確認しますね。
sessionを使用したサイトを作成するときは必須ですね。

Network

ここでimages,stylesheetsなどそのとき何が読まれているかが分かります。

最初にどのページで画像等をキャッシュさせておいてその後軽くするとか考えた時に、
ちゃんと読まれているかが確認できます。

下に説明しますが、ここにも右側にタイムラインがあって、画像等がどれくらいのスピードで読み込まれているか
を確認できます。

Timeline

Timelineでは主にJavaScriptやCSS3でアニメーションやajaxをした際の確認として
使用します。上の波みたいなものでフレーム毎の負荷の状態を確認できます。
常にそれを監視したい場合、下の赤い丸ボタンをクリックして出来ます。

黄色い波は負荷の状態が高くなった事を示しています。
また、下のLoading,Scripting,Rendering,paintingはそれぞれ画像の読み出しや、ページのレンダリングスピード等を
示しています。

PageSpeed

Google Chromeのdevlop toolsの拡張の所にあります。
ダウンロードはこちらから。
Using PageSpeed Insights for Google Chrome

ポイント
・HTML/CSS/JavaScriptのボトルネックを発見出来る
・書き方の解決策のデモ出してくれる

下の画像を見て頂けると分かりますが、
優先度毎にJavaScriptとCSS,HTMLなどのスピードを高速化するために提案を出してくれます。
minifyする前の状態なのでJSの優先度の中の項目がありますが、これを見る事によって
忘れずに詰める事が出来ますね

まとめ

結局DATAURI化からなぜ戻したのか

ポイント
・spliteした画像のファイルサイズが4MBまでは行かなかったが、iOS4以下では4MBまでしかキャッシュされず、
androidでは下記のようになっているためスプライトのみにするという判断をした。
また、スプライトはスケーラビリティ(拡張性)と保守性を高めるため、カテゴリー毎にしている。

ページのonloadの数値をNetworkから見て判断した方が良いと思います。

デベロッパーの有志が集まったのか、androidのバージョン毎にどのくらいのサイズかを書いて、平均値を出したものがありますので、こちらを参照に

JavaScriptよりの使い方はまだ書いていないですが、ajax、xhrのデータを用いた所の説明も追記していきます。