Chrome DevTools入門

Chrome DevTools とは？ †

• Chrome のデバッグツール
• 公式サイト: https://developer.chrome.com/ >> DEVTOOLS

• 環境 / 事前知識
  • Chrome バージョン: 60.0.3112.113
  • OS X 10.11 El Capitan
  • HTML/CSS/JavaScript

• 起動方法
  • 表示 >> 開発 / 管理 >> デベロッパー ツール
  • Shortcut: cmd + alt + I
  • サイトコンテンツの特定箇所から起動: 範囲をドラッグ >> 右クリック >> 検証
  • Console の On / Off: esc キー

Elements パネルを使ってみよう †

• ブラウザが HTML を読み込んだ時に作られるツリー上のオブジェクトを表示
• 左上のアイコンを使うとページ内の特定箇所の Elements を表示
  • アイコンをマウスオーバーで "Select an element in the page the page to inspect it" 表示
  • Shortcut: cmd + shift + C
• 要素の編集も可能
  • 右クリック >> "Edit as HTML" で HTML エディター形式で編集可能

Styles を操作してみよう †

• Elements パネル選択時に右側に表示
• stylesheet を確認・編集可能
• user agent stylesheet: ブラウザがデフォルトで持っているスタイル
• CSS の継承元 (Inherited from ***)
• 要素の margin, padding 等サイズに関する情報表示
• "Computed" タブにてまとめてスタイルを確認可能
• 各スタイルのチェックボックスを外すと当該スタイルが無効に
• 特定要素を選択して Styles タブ右上の "+" アイコンでスタイルの追加も可能
• Styles タブの ":hov" >> ":hover" にチェックをすると要素をマウスオーバーした際のスタイルも確認可能

Network パネルを使ってみよう †

• どのファイルがどのタイミングで読み込まれたか確認可能
• 表示が遅く時等に有用
• Initiator: どのファイルがどこ (ファイル名, ソースコードの箇所) から呼ばれたか表示
• Waterfall
  • 青い縦線はツリー上オブジェクトが構成された時点を示す
  • 赤い縦線は画像等含め全てのオブジェクトの読み込みが完了した時点を示す
• ファイルを選択すると個別に Headers, Preview, Response 等が確認可能
• 右クリック
  • カラムの表示項目を選択可能
  • パネル上でブラウザキャッシュや Cookie を削除可能
• パネル左上のアイコン群にて Clear や View の変更等が可能
• Preserve log: ページをリロードしてもリロード前のコンテンツログを保存する (クリアしない) 機能

Sources パネルを使ってみよう †

• コンテンツのファイルの中身を表示
• Elements パネルで stylesheet 等を選択すると Sources パネルで表示される
• JS, CSS を編集可能
• cmd + S で編集内容をブラウザ内で保存可能 -> 要素を右クリックで Local Modifications (編集履歴確認可能)

JavaScript のデバッグをしてみよう †

• Sources パネルで構文エラーを確認可能
• ロジックエラーの可能性が高い場合は Sources パネルでブレークポイントを活用
  • 通常の "次へ" に加えて関数の中まで処理を追う "次へ" もあり
  • 1行ずつ処理を追っていきマウスオーバーで各時点での変数の値を確認する等

他のパネルを見てみよう †

• Performance
  • ブラウザの描画パフォーマンスやメモリの使用状況を確認可能
  • 上級者向けパネル

• Memory
  • メモリのアローケション等を記録可能
  • 上級者向けパネル

• Application
  • ブラウザの Local Storage / Session Storage や Cookies の中身を確認することが可能
  • web アプリケーション開発時に有用

• Audits
  • web サイトのパフォーマンスに関する提案を行ってくれるパネル

Console を使ってみよう †

• JavaScript をそのまま試すことが可能 ... ex. alert(1)
• 複数行の時は shift + enter で改行

> for (var i = 0; i < 10; i++) {
   console.log(i);
   }
   0
   1
   2
   3
   4
   5
   6
   7
   8
   9

• Elements パネルとの組み合せ
  • Elements パネルで選択した要素に対して Console で "$0" と入力すると要素情報を表示
  • 選択した要素の1つ前の要素は "$1" で 2つ前は "$2" で指定可能 ($4 まで使用可能)
  • CSS のセレクタを指定することも可能 ... ex. $('h1')
  • 指定したセレクタの全要素情報を取得する場合は $$('h1') で指定
  • copy コマンドで要素をクリップボードに保存 ... ex. copy($0)

他の機能 †

• Console 表示領域の他機能 (右クリックで表示 -> 選択)
  • Search: 横断的にファイルを検索, 正規表現も利用可能

• Toggle device toolber
  • 左上のアイコン or cmd + shift + M で On / Off
  • Emulated Devices を追加可能 (iPhone 5, iPhone 6, iPad, etc.)
  • スマートフォンやタブレットで閲覧した時の画面をエミュレーション可能