2012年8月7日

【Javascript】consoleオブジェクトが持つlog以外の便利メソッド18（前編）

こんにちは、橋本です。

今回と次回の２回にわたり、Safari、ChromeのWebインスペクターやFirefoxのFireBugで使えるconsoleオブジェクトの使い方について書いてみたいと思います。

Javascriptのコードをデバッグする際に、console.logを使ってメッセージやオブジェクトの内容をログに表示することがあるかと思いますが、
この「console」オブジェクト、実はlogメソッド以外にも複数のメソッドがあります。

まずは、consoleオブジェクトにどのようなメソッドがあるか、console.logを使って表示してみたいと思います。

consoleオブジェクトの中身を見てみると、__proto__オブジェクトに以下のメソッドが定義されています。

assert

count

debug

dirxml

error

group

groupCollapsed

groupEnd

info

markTimeline

profile

profileEnd

time

timeEnd

timeStamp

trace

warn

全部で19個。logを除くと18。思ったよりも数がありますね。

とりあえず、前編である今回はassertメソッドからgroupEndメソッドまでを一つ一つ使い方を見ていきたいと思います。
次回はinfoメソッドからwarnメソッドについて見ていきます。

assertメソッド

console.assert(expression, message-object)

第一引数(expression)がfalseの場合にのみ、第二引数(message-object)の内容を表示します。
例えば以下のような使い方をします。


function hoge(num){
    return num > 0;
}
var num = -1;
console.assert(hoge(num), 'falseだよー');

上記の例では、hoge関数に0以下の数を渡しているため、結果としてfalseが返ってきています。
そのため、assertメソッドの第二引数で渡したメッセージが表示されています。

メソッドのテストをするとき等に便利なメソッドですね。

countメソッド

console.count([title])

countメソッドを記載した場所を何回通ったかをログに出力するメソッドです。
引数でラベルの文字列を渡して、それぞれの設置箇所にラベル付けをすることもできます。


var arr = ['aaa', 'abc', 'bbc', 'ccd', 'cbc'];
arr.forEach(function(item, i, ar) {
    if (item.indexOf('a') !== -1) {
        console.count('aが含まれている');  
    } 
});

上記の例では、文字列にaが含まれる要素の場合のみcountメソッドが呼ばれるようになっています。
countメソッドが呼ばれる度に、設定したラベルと、そこを通過した回数を出力します。

debugメソッド

console.debug([message-object])

console.logメソッドと同様に、引数で渡したmessage-objectをログに表示します。

サンプルは省略します。

dirメソッド

console.dir(object)

引数で渡されたobjectのプロパティを全て出力するメソッドです。


<!DOCTYPE HTML>
<html lang="ja">
    <body>
        <div id="hoge"></div>
        <script>
            var elm = document.getElementById('hoge');
            console.dir(elm);  
        </script>
    </body>
</html>

画像のように引数で渡したオブジェクトのプロパティを全て表示します。
DOMオブジェクトを渡した場合、console.logメソッドではhtmlのツリーが表示されますが、console.dirメソッドではDOMオブジェクトとして解釈してプロパティを表示してくれます。

dirxmlメソッド

console.dirxml(node)

引数で渡されたDOMオブジェクト(HTML, XML)の内容をツリー形式で出力するメソッドです。


<!DOCTYPE HTML>
<html lang="ja">
    <body>
        <ul id="hoge">
           <li>1</li> 
           <li>2</li> 
           <li>3</li> 
           <li>4</li> 
        </ul>
        <script>
            var elm = document.getElementById('hoge');
            console.dirxml(elm);  
        </script>
    </body>
</html>

DOMのプロパティを表示したいときはdirメソッド、ツリーを表示したいときはdirxmlメソッドというふうに使い分けをするといいかもしれません。

errorメソッド

console.error(message-object)

引数で渡されたメッセージをエラーアイコンつきで表示するメソッドです。


var hoge = 'errorだよー';
console.error(hoge);

エラーが発生しているということを強調したいときに便利ですね。

group, groupCollapsed, groupEndメソッド

console.group(message-object)
console.groupCollapsed(message-object)
console.groupEnd()

groupメソッド、groupCollapsedメソッドが呼ばれてからgroupEndメソッドが呼ばれるまでのログの出力内容をグループ化して表示します。
groupメソッドとgroupCollapsedメソッドの引数に渡したmessage-objectは、それぞれのメソッドが呼ばれるときに一度だけ出力されます。
ラベルのような使い方をすると便利です。

ちなみに、groupメソッドとgroupCollapsedメソッドの違いですが、groupメソッドを使うと、グループの内容が開いた状態で表示され、groupCollapsedメソッドを使うとグループの内容が閉じた状態で表示されます。


var i;
console.group('groupメソッド');
for (i = 0; i < 10; i++) {
    console.log(i);    
}
console.groupEnd();
console.groupCollapsed('groupCollapsedメソッド');
for (i = 0; i < 10; i++) {
    console.log(i);    
}
console.groupEnd();