Chrome Dev toolsのチュートリアル

Chrome Dev toolsの使い方を、下記サイトを使って確認 します。

なんとなくで使っていた方法を改めて見なおす、いい機会だと思います。

基本の操作

  • Dev toolsの開き方についてはCmd+option+I(Mac使用時)を使います。
  • 調べたい要素を範囲選択してinspect,Dev Toolsで見ることができる
  • toolsのelementタブ内では、右クリックでエレメントを変更できる。elementをドラッグしてコードの順序の変更も可能。
  • ソースコード内で特定の文字列を検索するとき、Cmd+Fが使える
  • cssタブ内のforce hoverなどで、表示されるスタイルの変化を見る際に、実際に画面をクリックしなくても良い

ソースタブ内で変更したコードをsave, revertする方法

  1. コードの変更をセーブする
  2. local modificationでセーブ履歴を遡る。この際、revertやオリジナルコードに戻すなどが行える。

また、save asでは変更したコードを、自分のローカルマシーンに保存もできる。

知らない機能でしたが、かなり便利そう。詳細な説明は以下のリンク

Consoleの使い方

いくつかの、便利そうな点を挙げていきます。

  • console.assert(exp, obj) expressionがtrue or falseを返します。falseの場合、objが返されます。デバック時に使います。
  • element selectorのショートカット jQueryのショートカット$()が使用できる。
  • コンソール内でエラーを出したら、ソースパネルで該当箇所を編集する。その際、エラー文の右端にあるファイル名を右クリックして、see in source panelをクリック

JSでエラーが出たらコンソール開いて、sorceタブ内でどの箇所のコードがエラーを出しているのかを、pause on caught exceptionで調べる。

または、break pointを使うのも一つの手になります。

上記はコンソールの初期操作になので、詳しくは次の記事に説明したいと思います。

local storageについて

動画内ではresouces panelタブ内での操作となっていますが、現在はresource ではなくApplication tabでの操作となります。参照リンクです。

DevTools->Application tab->Local Storageの順で該当箇所にいきます。

Network Tabの使い方

  1. まずキャッシュを消して(Command”+ Shift+ Delete)、ページを再読み込みをし、どの箇所が読み込みに時間がかかっているのかを確認する。
    DevTools->Network tab->再読み込み->sizeで読み込むデータ量を昇順にする
  2. Google closureを使って、ファイルをまとめて、Webサイトの読み込みを早くすることも可能です。
  3. また、WEBサイトの最適化として、不必要なリクエストをなくすことも重要です。
  4. レンダリングの処理も、HTML CSS JSの順に行うことが、良いとされています。
  5. 最後に画像のスケールダウンを行います。

上記の5つの手順は、どれもページのネットワーク読み込みを早くするという目的のための、作業になります。ページの最適化の診断をしてくれる

を入れておくと、どうやったら最適化されるかの方法が見えやすいです。

レンダリング最適化の方法

レンダリングはネットワーク側ではなく、ブラウザのソースコードの読み込みが遅い場合に用いられます。

動画内のtimeline tab は現在は Performance tabに変更されています。

profiling はmore toolsの Javascript profilerに変更されています。

最新の情報は下記サイトにあります。

memory 診断

メモリーもれがされているか、どうかの確認する際に用いる機能。

DevToolsのメモリータブに三種類のチェックボックスがあります。

  • heap snapshot
    JSのobjectとそれに付随したDOMノード間のメモリ配分をみる
  • record allocation profile
    JS の各関数のメモリの割り当てをみる
  • record allocation timeline
    メモリーリークがどこで起きているのかを見る。

探す物によって、異なるsnapshotを取ることができます。

感想

このチュートリアルから、使い方の大まかな概要を理解しました。どこに何の機能があるのと、わからなかったらDevtoolsの公式サイトを見るのが、最新のバージョンが乗っている事がわかりました。

またビデオ講義のやり方として、チュートリアルで手を動かしながらビデオを一緒に見ると、理解がしやすかったです。