変更差分記録、バージョン管理機能も充実
さらに、注目すべき点は、前ページのようなコード編集時の操作性の面だけではなく、変更差分の記録やバージョン管理といった機能が充実していることだ。
例えば、既存のCSSに変更を加え、修正後のスタイルを元のソースコードに反映したい場合も、従来のようにコピー＆ペーストで、CSSを更新する必要はない。［Resources］パネルを開き、左に表示されている該当のCSSファイル名の［▼］を押すと、変更履歴が時系列で記録されているのがわかる。以前の状態に戻したい場合は、戻したい状態のファイルを右クリックし、［Revert to this revision］を選択すると、その時点でのコードの状態へとさかのぼることができる。［Save as...］を選択すると、その状態のコードで上書き保存することが可能だ。
このように、Chrome Dev Toolsはフリーフォームで全てのリソースを編集できるため、エディタのような使い方が可能となっている。変更はブラウザですぐにプレビューができ、元のファイルを開いて修正する必要もない。開発者は手間をかけることなく、短時間で複数パターンの表示を試すことができ、気に行った状態を保存することが可能だ。
ネットワーク上の処理も可視化
続いて北村氏は、ネットワークではどのような処理が行われているかを解析する方法について説明した。
Chrome Dev Toolsのタイムラインパネル（［Timeline］を選択）では、該当のWebサイト上で行われているネットワーク処理、JavaScriptの処理、レンダリングの処理が、それぞれ色付けされたタイムラインで、分かりやすく表示される。
タイムラインパネルを使用することで、Webサイトを表示する際にどの部分に処理の時間がかかっているかを把握することができ、開発者がサイトを最適化する際の重要な手掛かりとなる。
なお、ツール右下の［歯車］ボタン -「Setting」より、［Disable cache］をチェックすると、ブラウザのキャッシュ削除の設定が可能となる。これにより、キャッシュが原因となるエクスパイアヘッダなども意識することなく、開発を続けられる。
Firebugの「Command line API」を使用可能
また、JavaScriptを使用する開発者には必須と言える、コンソールパネル（［Console］を選択）についても解説された。
Chrome Dev Toolsには、よく使用されるconsole.logコマンドだけでなく、多くの使い勝手の良いコンソールコマンドが用意されている。なぜなら、Mozillaの「Firebug」で提供されている「Command line API」と互換性があり、さまざまなAPIがほとんど使用できるからだ。これらのAPIはChrome Dev Toolsだけでなく、Internet Explorerの「F12」、Operaの「Dragonfly」などの開発ツールでも使うことが可能だ。
北村氏は、便利なコンソールコマンドの例として、以下の5つを紹介した。
- dir：document.body部分をJavaScriptオブジェクトとして取得する
- clear：コンソール内を削除
- Inspect：与えられたオブジェクトのインスペクタを開く
- $0：エレメンツパネルで選択しているDOMエレメントの中身を調べる
- copy：引数に与えたコードをクリップボードにコピー
なお、コンソールパネルの表示は、パネルにある［ConSole］をクリックする方法だけでなく、Chrome Dev Toolsのどのパネルの開いた状態でも［Esc］キーでコンソールパネルをトグルできるというチップスも紹介された。
