Firefox 3とFirebugで始めるJavaScript開発

第2回 Firebugによるデバッグの基本,Console APIとその活用

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

オブジェクトの出力

まずは,console.logによってオブジェクトを出力させてみます。サンプルとしてYahoo! User Interface Library(通称,YUI)の基礎となるYAHOOオブジェクトを出力してみます。以下のコードを埋め込んだページを作成してください。

リスト1 ex.01.html(抜粋)

<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript">
console.log(YAHOO);
</script>

作成したページ(ex01.html)を読み込むと,console画面に出力がされます図1⁠。

図1 console.logの出力画面

図1 console.logの出力画面

さらに,出力された内容をクリックすると,次のようにDOMタブに切り替わります図2⁠。

図2 DOMの出力画面

図2 DOMの出力画面

このように,console.logによって出力されたものがオブジェクトの場合は,DOMタブでそのオブジェクトの中を確認することができます。

タブの遷移なしに確認をしたい場合はconsole.dirを使うといいでしょう。また,今回はconsole.logで例をあげましたが,行数を表示してくれるconsole.debugを利用するといいでしょう図3⁠。

図3 console.debugの行数表示

図3 console.debugの行数表示

その他の出力

console.logは渡されるオブジェクトの内容によって,出力のされかたが微妙に異なります。

ここでは代表的ないくつかの例を挙げてみます。先ほどのサンプルにscriptの中身に以下の赤字部分を追加し,body要素の中に"test"というID要素を持つHTMLを挿入してください。

リスト2 ex02.html(抜粋)

<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript">
console.log(YAHOO);
YAHOO.util.Event.on(window, "load", function() {
var String = "Yahoo! JAPAN"; // 文字列
var Func = function(str) { alert(str); }; // 関数
var Arr = new Array("Yahoo!", "JAPAN"); // 配列
var Dom = document.getElementById("test"); // HTML Element
console.debug(String);
console.debug(Func);
console.debug(Arr);
console.debug(Dom);
});
</script>

作成したページ(ex02.html)を読み込んでみてください。すると,文字列・関数・配列・HTML Element,それぞれの出力のされかたを確認することが出来ます図4⁠。

図4 文字列・関数・配列・HTML Elementの表示例

図4 文字列・関数・配列・HTML Elementの表示例

詳細の部分はそれぞれ,次のことを意味します。

文字列
文字列の場合は,文字列そのものをテキストで表示します。
関数
関数の場合は,Scriptタブの該当する関数の行へのリンクとして表示されます。
配列
配列の場合は,配列の一覧が表示されます。配列の各要素の中身は,中身のオブジェクトの内容ごとにそれぞれ最適な形で表示されます。
HTML Element
HTML Elementの場合は,HTMLタブの該当するHTMLの行へのリンクとして表示されます。また,右クリックより,HTMLのコピー,innerHTMLのコピー,XPathのコピー,そのHTMLに対するイベントの監視,そのHTMLを表示領域までスクロールする,DOMタブで表示,といったことを行うことができます図5⁠。

図5 HTML Elements

図5 HTML Elements

このように,渡される内容によってconsoleの出力やそこからたどれるものが大きく変わっていきます。Firebugによるデバッグの際,もっとも多様されるのがこのconsole.logを基本としたものとなると思います。

自分が書いたScriptにこれらを埋め込む場合は,デバッグの際に,もっとも最適なものが出力されるように考える必要があるため上記のような,基本的な部分はかならず抑えておきましょう。

著者プロフィール

堀邦明(ほりくにあき)

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

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