ブラウザデバッグ - Chrome Developer Tools

fr-itaya commented 10 years ago

Google Chromeの提供するデバッグツールについて調査します。 (開発研修Ex課題)

[x] 調査結果はissueコメントに記述
[x] コメントしたらdescriptionの見出しの横にリンクを貼る

fr-itaya commented 10 years ago

本課題は開始15：00開始、工数見積は3時間で行います。

内訳

タスク	見積
動画視聴	計40分
作業	1時間
コメント	1時間20分

fr-itaya commented 10 years ago

1. Chrome Developer Toolsの概要

Google Chromeに搭載されているデバッグ(不具合を直すための)ツール

2. ブラウザの動作の仕組み

HTML/CSS/画像をブラウザで読み込むと、ブラウザがDocument Object Model(DOM)を構成する
JavaScriptは基のHTML/CSS等ではなく、ブラウザで再構成されたDOMを操作している
DOMが動的に変更される所を見るためのツール= Developer Tools

3. 起動の仕方

デベロッパーツール：Ctrl + Shift + I
JavaScriptコンソール：Ctrl + Shift + J
コンソール：>三ボタンをクリック
- unlock into separate windowボタンでブラウザから分離可能

fr-itaya commented 10 years ago

4. Elementsパネル

DOMはツリー構造になっており、パネル内で展開/折り畳みが出来る

DOMの選択
- 要素の場所とサイズが吹き出しで表示される
- パネルの虫眼鏡アイコン→ブラウザ上の知りたい要素をクリック
- 右クリック→要素を検証
DOMの移動
- 要素を選択してD&D
DOMの削除
- 要素を選択してDelete
DOMの編集
- Elementsパネルで要素を右クリック→Edit as HTMLで編集出来る
- DOMを書き換えても元のHTMLetc.は変更されない
- ブラウザ上で行った変更を保存したい場合はCopy as HTMLでエディタにコピーできる
適用されているスタイルの確認
- パネル右側Stylesでは自分で書いたcss以外に、次の設定が見られる
- user agent stylesheet：Chromeが既定値として当てているスタイル
- Computed css：自分で書いたcssとuser agent stylesheetの合成結果
スタイルの編集
- 自作cssはStyles上で編集可能
- カラーピッカーで変更可能
- 要素を追加するには空白の上でクリック
ボックススタイルの確認
- Metricsでpadding/border/marginの幅の設定を確認できる
擬似セレクタのシミュレーション
- Style横、点線の箱アイコンでhover等のシミュレートが出来る(チェックボックス式)

fr-itaya commented 10 years ago

5. Resourcesパネル

読み込まれたファイルの確認
- imgの幅やサイズ/css/js 等
CSSの編集、履歴の管理も簡易ではあるができる
その他の情報の確認
- ex) DB/Local Storage/Session Storage/Cookie/Application Cache

fr-itaya commented 10 years ago

6. Networkパネル

タイムラインの確認
- 読み込まれたファイル・読込タイミング
- Sizeや時間で並べ替え
- グラフ上にマウスオーバー→処理毎にかかった時間を表示
- 青線 = DOMが構成された時間
- 赤線 = 画像読込・iframe(他サイトから)の読込迄完了した時間
便利な設定
- 結果のフィルタリング(タブで切替)
キャッシュのクリア
- ×でキャッシュのクリア
- ●で前のログを消さずに複数ページの画面遷移が出来る
- Networkパネル上で右クリックしてもキャッシュやCookie等を削除出来る

fr-itaya commented 10 years ago

7. Scriptパネル

JavaScriptのデバッグを行えるパネル。

エラーメッセージの確認
- 右下に赤いマークが出ていたら確認
- クリックするとコンソールが立ち上がりエラーメッセージが出る
- エラーメッセージをWクリック→エラーの起きている行にジャンプ
JavaScriptの編集
- Scriptタグ
- Ctrl + Sで保存(ブラウザに読み込まれるjsが変更されるだけ。元のjsに保存ではない)
- 変更を元のjsファイルに保存するには、Resourcesパネルの差分を開く→右クリック→Save As...
ブレークポイントの設定
- 特定の行でスクリプトの処理を止めるには、止めたい行番号をクリック
値の確認はマウスオーバーもしくはConsoleパネルに変数名を打ち込むことで出来る
デバッグ
- Step Over：次の処理に行く(関数毎)
- Step into(↓)：次の処理に行く(1行毎)
- Step out(↑)：デバッグをやめる
- jsに一行debugger;を入れると、js側でブレイクポイントを制御できる

fr-itaya commented 10 years ago

8. ブラウザのパフォーマンス調査

Timelineパネル
- 処理のタイミング・メモリの推移を記録
Profilesパネル
- CPUの状態を記録
Auditsパネル
- Webサイトに対する提案を出してくる

fr-itaya commented 10 years ago

9. Consoleパネル

$0〜$5：選択した要素を表示(5つまで履歴が持てる)
$()：IDを指定して表示
$$()：要素名を指定して表示(複数でもOK)
copy()：ID・要素をコピーしてエディタに貼付

fr-itaya commented 10 years ago

10. 設定変更

各種設定の確認：歯車ボタン
User-Agentの変更：ConsoleパネルのタブEmulationで他デバイスでの表示を確認できる
ショートカットキーの確認：設定→ShortCuts

fr-itaya commented 10 years ago

11. Ajaxのデバッグ

Ajaxプログラムのデバッグ
- Networkパネルを開いてリロード→Ajaxが使われている要素をクリック→呼び出されたファイル(php等)や渡された値を確認出来る
圧縮されたコードの展開
- min.jsは圧縮されたコード
- 展開は{ }ボタン。読みやすく整形された形で表示される(編集は出来ない)

bossato commented 10 years ago

確認しました、OKです。フロントエンドやるにはデバッグツールは必須なので覚えておきましょう。

fr-itaya / training