【Javascript】consoleオブジェクトが持つlog以外の便利メソッド18（前編）
こんにちは、橋本です。
今回と次回の ２回にわたり、Safari、ChromeのWebインスペクターやFirefoxのFireBugで使えるconsoleオブジェクトの使い方について書いてみたいと思います。
Javascriptのコードをデバッグする際に、console.logを使ってメッセージやオブジェクトの内容をログに表示することがあるかと思いますが、
この「console」オブジェクト、実はlogメソッド以外にも複数のメソッドがあります。
まずは、consoleオブジェクトにどのようなメソッドがあるか、console.logを使って表示してみたいと思います。
consoleオブジェクトの中身を見てみると、__proto__オブジェクトに以下のメソッドが定義されています。
- assert
- count
- debug
- dir
- dirxml
- error
- group
- groupCollapsed
- groupEnd
- info
- log
- 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();
大量にログが出ることが予想される場合はgroupCollapsed、そうでない場合はgroupメソッドといった使い分けをすると便利です。
さて、今回は前編ということで、consoleオブジェクトのメソッドを９つ紹介しました。
次回は残りの10個のメソッドについて紹介したいと思います。
では。
