この記事では、「Google Chrome Developer Tools」の概要や具体的な使い方を、Google Developer Day 2011の基調講演や、北村氏のセッションで語られた最新情報も交えつつ紹介していく。
「Google Chrome Developer Tools」とは
Google Chrome Developer Tools（以下、Chrome Dev Tools）とは、Webブラウザ「Google Chrome」に付属している開発ツール。このツールを使用すると、開発者は自身が作成したWebアプリケーションの内部構造に、簡単にアクセスすることができる。
Chrome Dev Toolsの起動は簡単で、ブラウザウィンドウの右上にあるツールメニューから、［ツール］から［デベロッパーツール］をクリックするだけだ。
ツールが起動すると、画面下部にパネルが表示される（各パネルの詳細は、こちらを参照）。この各パネルから、今表示しているWebアプリケーションのページがどのように作られているか、またどのようにネットワークの処理を行っているかなどの情報を確認・変更できる。
北村氏はセッションの冒頭で、「Chrome Dev Toolsは、素晴らしいWebアプリを作るためのWebアプリ」だと語った。Chrome Dev Toolsは、それ自体がWebアプリケーションとして作られており、実際にChromiumのソースコードを見ると、HTML／JavaScript／CSSのWeb技術で構成されていることが分かる。北村氏は「Chrome Dev Tools自体がWebアプリケーションなので、別のChrome Dev Toolsからデバッグすることも可能」と例を表示し、会場の笑いを誘った。
HTML／CSSの編集時は、自由度の高い「エディタ」に
北村氏はまず、デザイン面にフォーカスして話を進めた。Chrome Dev Toolsでは、ブラウザで表示しているページのビジュアルに関係するHTMLやCSSが、簡単に変更／追加できる。
Chrome Dev Toolsを起動すると、［Elements］パネルが開かれ、左側には表示されているページのDOMツリーが、右側には、左側のパネルで選択されたDOMに使用されているCSSのエレメンツが表示される。
左下にある［虫眼鏡］ボタンをクリックすると、調べたいWebページ上に表示されている要素をクリックするだけで、該当箇所に使用されているHTML、CSSを確認することができる。
表示されているCSSのコードは、ダブルクリックして直接編集でき、瞬時にブラウザに反映される。もちろん、変更できるのは色だけでなく、フォントの種類やサイズ、角丸などのデザインの設定も簡単だ。さらに、コード補完機能も充実しており、上下キーを押すと使用できるパラメータが一覧で表示されるため、リファレンスなども必要ない。
例えば、既存のクラスにセレクタを追加するには、パネル右側の［Styles］にある［クラス］ボタンをクリックし、DOMツリー上で選択しているクラスに対して追加したいスタイルを書き込む。次の図のように、element.styleというクラスに「background : indianred;」と追加すると、表示されているページの背景が赤に変更される。
また、疑似セレクタの設定も簡単だ。active、hover、focus、visitedなど、主要な疑似セレクタは一覧で表示されるので、チェックするだけで状態に応じたスタイルを簡単に設定できる。
そのほか、DOMツリー内の要素も、ドラッグ＆ドロップで組み替えたりするなどが可能だ。
今後実装予定の「カラーピッカー」
Google Developer Dayの基調講演では、この日のために開発された今後実装予定の「カラーピッカー」も紹介された。現時点ではまだChrome Dev Toolsには搭載されていないが、OSネイティブのカラーピッカーをクリックして呼び出すことで、CSSの色指定が可能となる機能だ。
