Google Chrome版Firebug:デベロッパーツール取扱説明書

第1回 詳説:デベロッパーツールの使い方

この記事を読むのに必要な時間:およそ 3 分

HTML・CSSプロパティビュー

HTMLツリーの右側にあるHTML・CSSプロパティビューでは,HTMLツリービューで選択している要素についてCSSの指定や要素の位置関係,DOMの属性にイベントなどをチェックすることができます。

画像

Computed Style

まず,Computed Style(上記はChrome 6の画面で,Chrome 5ではComputed StyleはStylesの中にあります)では,その要素に適用されているCSSの有効な指定だけを確認することができます。ここは閲覧のみで編集はできません。なお,右上の「Show inherited」にチェックを入れるとその要素に指定できるすべてのプロパティとデフォルトの値が表示されます。WebKitがサポートするCSSプロパティを手軽に確認できるので便利です。

画像

Styles

Stylesでは,やはりHTMLツリービューで選択している要素について,その要素が持っているstyle属性の値と,マッチするセレクタの持つプロパティを一覧してくれます。こちらは各プロパティにマウスオーバーすると右側にチェックボックスが表示され,そのプロパティを一時的にオフにしたり,プロパティをダブルクリックすることでその場で値を編集するといったことができます。

画像

編集モードは1行のテキストボックスですが,⁠;」で区切って複数のプロパティを書くことも可能です。

画像

Stylesの右端にある歯車のアイコンをクリックすると,CSSのカラーをHex表記(#RRGGBBの形)のほか,RGB(rgba(r, g, b, a))やHSL(色相, 彩度, 輝度)などで表現したものに切り替えることができます。なお,この切替はStylesビューでCSSカラーの部分をクリックすることで個別に切り替えることも可能です。

画像

また,その下の「New Style Rule」をクリックすると,セレクターとそのプロパティをセットで追加できます。

画像

Metrics

続いて,Metricsでは,要素の位置関係(margin,padding,border,width,height,top,leftなど)を確認できます。

画像

Properties

Propertiesでは,要素が継承するコンストラクタとその要素自身のプロパティを確認できます。

画像

このようにh2要素はObject,Node,Element,HTMLElement,HTMLHeadingElementを継承したHTMLHeadingElementのインスタンスです。

画像

HTMLElementはinsertAdjacentHTMLなどのメソッドを持ち,ElementはgetAttributeなどのメソッドを持っていることを確認できます。さらに一番上のタブを展開すると,次のようにその要素自身が持っている属性・プロパティを一覧することができます。

画像

HTMLだけではわかり難いchildNodesやclientHeightなどのDOMプロパティを確認できるため,非常に便利です。

Event Listeners

Event Listenersでは,要素に設定されたイベントを確認することができます。

画像

isAttributeはon~(onclickなど)の形で設定されたイベントか,addEventListenerで設定されたイベントかの違いです。また,listenerBodyはイベント発生時に処理が走る関数です。特にaddEventListenerで設定したイベントはHTML上では存在を確認できないため,このEventビューは重宝します。

著者プロフィール

太田昌吾(おおたしょうご,ハンドルネーム:os0x)

1983年生まれ。JavaScriptをメインに,HTML/CSSにFlashなどのクライアントサイドを得意とするウェブエンジニア。2009年12月より、Google Chrome ExtensionsのAPI Expertとして活動を開始。

URLhttp://d.hatena.ne.jp/os0x/