Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

「Google Chrome Deveoper Tools」はこう使う!
基本機能チュートリアル & GDD 2011 セッション概要

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2011/11/09 10:00

 11月1日に開催されたソフトウェア開発者向けのイベント「Google Developer Day 2011」。午後のプログラムでは、Google デベロッパー アドボケイト 北村 英志氏による「デベロッパーツールのティップスアンドトリックス」と題した講演が行われた。

目次
Google デベロッパー アドボケイト 北村 英志氏
Google デベロッパー アドボケイト 北村 英志氏

 この記事では、「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アプリケーションのページがどのように作られているか、またどのようにネットワークの処理を行っているかなどの情報を確認・変更できる。

各パネルでWebページの構成の確認・変更ができる
各パネルでWebページの構成の確認・変更ができる

 北村氏はセッションの冒頭で、「Chrome Dev Toolsは、素晴らしいWebアプリを作るためのWebアプリ」だと語った。Chrome Dev Toolsは、それ自体がWebアプリケーションとして作られており、実際にChromiumのソースコードを見ると、HTMLJavaScriptCSSのWeb技術で構成されていることが分かる。北村氏は「Chrome Dev Tools自体がWebアプリケーションなので、別のChrome Dev Toolsからデバッグすることも可能」と例を表示し、会場の笑いを誘った。

HTML/CSSの編集時は、自由度の高い「エディタ」に

 北村氏はまず、デザイン面にフォーカスして話を進めた。Chrome Dev Toolsでは、ブラウザで表示しているページのビジュアルに関係するHTMLCSSが、簡単に変更/追加できる。

 Chrome Dev Toolsを起動すると、[Elements]パネルが開かれ、左側には表示されているページのDOMツリーが、右側には、左側のパネルで選択されたDOMに使用されているCSSのエレメンツが表示される。

左側:表示ページのDOMツリー 右側:DOMに使用されているCSSのエレメンツ
左側:表示ページのDOMツリー 右側:DOMに使用されているCSSのエレメンツ

 左下にある[虫眼鏡]ボタンをクリックすると、調べたいWebページ上に表示されている要素をクリックするだけで、該当箇所に使用されているHTML、CSSを確認することができる。

[虫眼鏡]ボタンで、調べたい要素の内容を確認できる
[虫眼鏡]ボタンで、調べたい要素の内容を確認できる

 表示されているCSSのコードは、ダブルクリックして直接編集でき、瞬時にブラウザに反映される。もちろん、変更できるのは色だけでなく、フォントの種類やサイズ、角丸などのデザインの設定も簡単だ。さらに、コード補完機能も充実しており、上下キーを押すと使用できるパラメータが一覧で表示されるため、リファレンスなども必要ない。

 例えば、既存のクラスにセレクタを追加するには、パネル右側の[Styles]にある[クラス]ボタンをクリックし、DOMツリー上で選択しているクラスに対して追加したいスタイルを書き込む。次の図のように、element.styleというクラスに「background : indianred;」と追加すると、表示されているページの背景が赤に変更される。

element.styleクラスに設定を追加し、背景を赤に変更
element.styleクラスに設定を追加し、背景を赤に変更

 また、疑似セレクタの設定も簡単だ。active、hover、focus、visitedなど、主要な疑似セレクタは一覧で表示されるので、チェックするだけで状態に応じたスタイルを簡単に設定できる。

[Toggle Element State]ボタンから、疑似セレクタの設定も可能
[Toggle Element State]ボタンから、疑似セレクタの設定も可能

 そのほか、DOMツリー内の要素も、ドラッグ&ドロップで組み替えたりするなどが可能だ。

今後実装予定の「カラーピッカー」

 Google Developer Dayの基調講演では、この日のために開発された今後実装予定の「カラーピッカー」も紹介された。現時点ではまだChrome Dev Toolsには搭載されていないが、OSネイティブのカラーピッカーをクリックして呼び出すことで、CSSの色指定が可能となる機能だ。

OSネイティブの「カラーピッカー」
OSネイティブの「カラーピッカー」

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

バックナンバー

連載:イベントレポート

もっと読む

おすすめ記事

All contents copyright © 2006-2016 Shoeisha Co., Ltd. All rights reserved. ver.1.5