Firefox 3とFirebugで始めるJavaScript開発

第3回 Command Line APIとその活用,各タブからのデバッグ方法

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

さて,前回はConsole APIの解説とそれを利用してのデバッグについて簡単な解説を行いました。

今回は,Firebugに実装されているもう1つのAPIである,Command Line APIや,各タブの機能を利用してのデバッグ方法について解説をしていきたいと思います。

Command Line API

Command Line APIはFirebugのConsoleタブから利用することができます。ただし,グローバルですでに利用されている名前については利用できません。例えばPrototypeやjQueryが利用されているページのConsoleでは$()関数はそれらのライブラリのものが実行されます。

利用できるAPIは以下の通りです。

$(id)
IDを渡すと,そのID属性のHTML要素を返します。
$$(selector)
CSSセレクタを渡すと,該当するHTMLの要素を配列で返します。
$x(xpath)
XPathを渡すと,該当するHTMLの要素を配列で返します。
dir(object)
渡されたオブジェクトのプロパティと値を全て出力します。
dirxml(node)
渡されたノードのソースツリーを表示します。HTMLタブと同様に表示され,クリックすることでHTMLタブで確認することができます。
cd(window)
Conosoleタブのコマンドラインはデフォルトではそのページのトップレベルのウィンドウで実行されます。このコマンドにより,例えばそのページの別フレーム内でJavaScriptを実行したい場合は,このコマンドで実行したい別フレームを指定します。
clear()
Consoleタブの表示をクリアします。
inspect(object[, tabName])
渡されたオブジェクトをもっとも最適なタブで解析します。tabNameを指定すると,そのタブで解析され,そのタブによって解析できないオブジェクトの場合はもっとも最適なタブで解析されます。利用できるtabNameは「html」「css」「script」「dom」です。
keys(object)
渡されたオブジェクトの全てのプロパティ名を配列で返します。
values(object)
渡されたオブジェクトの全ての値を配列で返します。
debug(fn)
指定された関数オブジェクトの先頭にブレークポイントを設定します。
undebug(fn)
指定された関数オブジェクトの先頭のブレークポイントを解除します。
monitor(fn)
指定された関数オブジェクトの呼び出しを監視します。その関数オブジェクトの呼び出し先や関数オブジェクトに渡された引数をconsoleに表示させます。
unmonitor(fn)
monitorによって監視されている関数オブジェクトの監視を解除します。
monitorEvents(object[, types])
渡されたオブジェクトに対するイベントを監視することができます。typesに,監視対象とするイベントのタイプを指定することができます(mouse,key,等)※1
unmonitorEvents(object[, types])
monitorEventsによってイベントを監視されているオブジェクトのイベントの監視を解除します。※1
profile([title])
profileを実行してから,profileEndを実行するまでに実行された関数の解析を行います。
profileEnd()
profileによる解析を停止して結果を表示します。
copy(x)
渡された文字列をクリップボードにコピーします。
※1
現在,[un]monitorEventsはFirebugのバグにより,実行ができません。これらのバグを解消するにはFirebugのソースを修正する必要があります。このバグの解決方法はIT戦記のamachang氏がブログ(Firebug の monitorEvents unmonitorEvents がバグってる件とそのバグ修正方法 - IT戦記)に解決方法を記されています。

著者プロフィール

堀邦明(ほりくにあき)

徳山工業高等専門学校卒業後,ヤフー株式会社に入社。Yahoo! JAPAN トップページのフロントエンドエンジニアとして主にJavaScript,PHPによる開発を行う。

また,個人の活動として,JavaScriptに関するオンライン上のイベント「Roppongi.JS」の企画・主催を行う。

コメント

コメントの記入