Google Chrome Developer Tools入門 in DevFestX Sapporo

os0x(Shogo Ohta), 2012-02-12

slide show

Profile

WEB+DB PRESS Vol.67

JavaScriptベストプラクティスラボ 【第5回】JavaScriptのノウハウとテスト

Google Chrome デベロッパー ツール

Google Chromeに付属しているウェブ開発向けの便利ツール

JavaScriptのデバッグ、HTML/CSSの変更や解析、パフォーマンスの分析、ネットワークの解析などなど、いろいろできます

WebKitのWeb Inspectorをベースにしているので、SafariのWeb Inspectorと機能はだいたい同じです

フロントエンドはHTML+CSS+JavaScriptで実装されています

FirefoxのFirebug、OperaのDragonfly、IEのF12開発者ツールなども似たような機能を備えているが、個人的に一番使いやすいと思います

使い方

起動

Elementパネル

HTMLの解析・操作、CSSの確認・編集などができます

左側で要素を絞込み、右側でその要素の状態を解析します

フォーカスしている要素の現在のスタイルを確認できます

右上のshow inheritedをチェックすると、その要素が元々持っているスタイルを確認できます(知らないプロパティが色々と出てくるので一見の価値アリ)

フォーカスしている要素のmargin、border、padding、width、heightを確認できます

フォーカスしている要素の全プロパティを一覧できます

Chrome(やSafari)は、要素がDOMを継承しており、DOMの仕様に合わせた実装になっています

Object → Node → Element → HTMLElement → HTMLDivElement

addEventListenerはNodeクラスのメソッド、setAttributeはElementクラスのメソッド、insertAdjacentHTMLはHTMLElementのメソッドなど

Resourceパネル

HTML、CSS、JavaScriptのファイルを一覧・編集でき、localStorage、Cookieなども操作できます

localStorageは値の編集も可能です(Cookieは閲覧と削除のみ)

.cssファイルや.jsは左下のボタンから編集モードに入ることができます(ソース部分のダブルクリックでも可能)

編集したファイルはタイムスタンプ付きで保存されます

編集したファイルをローカルに保存することもできます

Networkパネル

HTML、CSS、JavaScript、画像、XMLHttpRequest、WebFonts、WebSocketなどなどの通信の状況や内容を確認できます

Request Header、Response Headerも見えます

通信にかかった時間(DNS Lookup、Connecting、Sending、Waiting、Receiving)も解析できます

Scriptsパネル

Breakpointを設定して、JavaScriptのstep実行ができます

難読化されたJavaScriptを…

この{ }ボタンを押すと…

整形されます

整形された状態でブレークポイントを設置することもできます

Consoleパネル

$// getElementById
$$ // querySelectorAll
$x // XPath
clear // コンソールをクリア
copy // クリップボードにコピー
dir// オブジェクトツリーの表示
dirxml // DOMツリーの表示
$0, $1, $2, $3, $4 // 前回フォーカスした要素を選択
inspect // 要素をElementsパネルでフォーカス
keys // オブジェクトのkeyを取得
monitorEvents // 特定のイベントをモニタ monitorEvents(document.body,'click')
unmonitorEvent //モニタを解除
profile // profile実行
profileEnd //profile終了
values // オブジェクトの値を取得

などの関数が使用できます

console.log(1.1, 1.2, 'a', Math.PI, 'http://gihyo.jp/', '引数はいくつでも可');
console.log('%i', Math.PI); // バグってる
console.log('%d', Math.PI); // バグってる
console.log('%f', Math.PI);
console.log('%s', 'abc');
console.log('test%otest', {a: 1});
console.log('test%otset', 'http://gihyo.jp/');
console.warn('黄色の三角マーク付き(右下にも出る)');
console.error('赤の罰点マーク付き(右下にも出る)');
console.info({info:1});
console.debug({debug:1});
console.assert(3+3 === 6, '正解');
console.assert(3+3 === 7, '間違い!(falseのときのみ出力される)');
for (var i = 0;i < 7;i++){ console.count(3);/* 同じ値の場合まとめられるはずだが…*/}
for (var i = 0;i < 7;i++){ console.log(4); /* logがcount相当になっている */}
console.dir(document);
console.dirxml(document);
console.group('g');
console.log(1,2,3);
console.log(1,2,3);
console.groupCollapsed('g2');
console.log(1,2,3);
console.log(1,2,3);
console.groupEnd('g2');
console.groupEnd('g');
console.time('time');
(function busy_loop(start){while(new Date - start < 100);})(+new Date);
console.timeEnd('time');
(function trace(){console.trace(9);})();

Timelineパネル

リソースの読み込み、JavaScriptの実行、レンダリングについて、それぞれの実行タイミングと処理時間を解析できます

例えば、ループ中にレンダリングをしてしまい、JavaScriptの実行とレンダリングが交互に発生してボトルネックになるようなケースが発見できます

Profileパネル

console.profile('profile');
(function busy_loop(){
  var start = +new Date(), i = 0;
  while(new Date - start < 100)i++;
  console.log(i);
})();
console.profileEnd('profile');

console.profile('profile2');
(function busy_loop2(){
  var start = Date.now(), i = 0;
  while(Date.now() - start < 100)i++;
  console.log(i);
})();
console.profileEnd('profile2');

Heap Snapshotは、ある時点でのJavaScriptのメモリ使用状況と、2点間のメモリ使用の差分を取ることができます

デベロッパーツールの設定

右下の歯車アイコンをクリックすると、デベロッパーツールの設定ウインドウが表示されます

Disable cache: キャッシュの無効化、開発時に重宝します

Override User Agent: ユーザーエージェントを任意のものに変更できます。通信時、JavaScriptのAPI(navigator.userAgent)ともに変更されます

リモートデバッグ

Chrome for Androidではリモートデバッグが搭載されました

Macでの設定例

PCと同等のデバッグができます。ブレークポイントも設置できますし、変数の中身、ネットワークの中身も見ることができます

Remote Debugging - Google Chrome for Android - Google Code

拡張との連携

chrome.experimental.* APIsに、Devtoolsを拡張するAPIが用意されています(Chromeの19だと一部正式なAPIになっています)。

about:flags で、「試験運用版の拡張機能 API」を有効にすると、chrome.experimental.* APIが使用できるようになります

Google Chrome Extensions - Samples #chrome.experimentalにサンプルがあります

FirePHP for Chromeや、Live HTTP headersなどがあります

デベロッパーツールはものすごい勢いで進化しており、今度は拡張もできるようになるので、要注目です!

ショートカットキー一覧

 Windows / LinuxMac
起動
デベロッパーツールCtrl Shift IOption Command I
JavaScriptコンソールCtrl Shift JOption Command J
パネル操作
右隣のパネルへ移動Ctrl ]Command ]
左隣のパネルへ移動Ctrl [Command [
コンソールの開閉EscEsc
検索ボックスにフォーカスCtrl FCommand F
次の検索結果Ctrl GCommand G
前の検索結果Ctrl Shift GShift Command G
コンソールの操作
次の補完候補TabTab
前の補完候補Shift TabShift Tab
補完の決定RightRight
ひとつ前のコマンド(複数行の場合1行上に)UpUp
次のコマンド(複数行の場合1行下に)DownDown
ひとつ前のコマンドcontrol P
次のコマンドcontrol N
コンソールでの改行Shift+Enteroption Return
コンソールのログを消去Ctrl LCommand K もしくは
control L
コマンドを実行EnterReturn
Elementパネルの操作
(見た目での)上の要素UpUp
(見た目での)下の要素DownDown
子要素の展開RightRight
子要素の格納LeftLeft
属性の編集EnterReturn
スタイル
ルールの編集ダブルクリックダブルクリック
次のプロパティの編集TabTab
前のプロパティの編集Shift TabShift Tab
新しいプロパティの追加空白部分のダブルクリック空白部分のダブルクリック
値の増減Up/DownUp/Down
10単位での値の増減Shift Up/Shift DownShift Up/Shift Down
10単位での値の増減PageUp/PageDownPageUp/PageDown
100単位での値の増減Shift PageUp/Shift PageDownShift PageUp/Shift PageDown
0.1単位での値の増減Alt Up/Alt DownOption Up/Option Down
ブレーク中のショートカット
次のCall Stackに移動Ctrl .control .
前のCall Stackに移動Ctrl ,control ,
再開F8 もしくは
Ctrl /
F8 もしくは
Command /
ステップオーバーF10 もしくは
Ctrl '
F10 もしくは
Command '
ステップインF11 もしくは
Ctrl ;
F11 もしくは
Command ;
ステップアウトShift F11 もしくは
Ctrl Shift ;
Shift F11 もしくは
Shift Command ;
ブレークポイントの設置・解除行数部分をクリック行数部分をクリック
ブレークポイントの状態を編集行数部分を右クリック行数部分を右クリック