[JS初心者]#5 テスト＆デバッグ編 JavaScriptを学ぶ
JavaScriptでのデバッグ方法
JavaScriptでこれまではconsole.log()しかdebugで使ってなかったですが、他にも色々なdebug方法があったので紹介します。
| メソッド名 | 機能 |
|---|---|
| assert() | テスト結果で異なっていた場合にメッセージ（エラー）を出力 |
| count() | 通過した回数を出力 |
| debug() | メッセージを出力 |
| dir() | オブジェクトのプロパティと値を出力 |
| dirxml() | HTML/XML要素のXMLツリーを出力 |
| error() | メッセージ（エラー）を出力 |
| group() | メッセージのグループ化開始 |
| groupCollapsed() | メッセージのグループ化開始（折りたたみ） |
| groupEnd() | メッセージのグループ化終了 |
| info() | メッセージ(info)を出力 |
| log() | メッセージ(フォーマット指定可能)を出力 |
| profile() | プロファイリング開始 |
| profileEnd() | プロファイリング終了 |
| time() | タイマー開始 |
| timeEnd() | タイマー終了・表示 |
| trace() | Stack Traceを出力 |
| warn() | メッセージ(warn)を出力 |
<div class='hoge1'>hoge1</div>
<div class='hoge2'>hoge2</div>
<div class='hoge3'>hoge3</div>
<script>
window.onload = function() {
var a = 'hoge';
var b = 'fuga';
var c = 1;
var d = 2;
var e = 1;
console.assert(c == e);
console.assert(c == d);
console.debug('Debug Message');
console.error('Error Message');
console.info('Info Message');
console.log('Log Message');
console.log("%s Message %s Message", a, b);
console.log(a + " Message " + b +" Message");
console.warn('Warn Message');
console.trace();
console.dirxml(document.body);
for (var i = 0; i < 3; i++) {
console.count();
}
console.group('Group Message');
console.log('Log Message in Group Message');
console.warn('Warn Message in Group Message');
console.groupEnd();
console.groupCollapsed('Group Message Collapsed');
console.log('Log Message in Group Message');
console.warn('Warn Message in Group Message');
console.groupEnd();
console.time('timer');
console.timeEnd('timer');
console.profile();
var div = document.querySelectorAll('div.hoge1, div.hoge2');
for (var i = 0; i < div.length; i++) {
window.alert(div[i].innerHTML);
}
console.profileEnd();
}
</script>
