consoleのメソッドを試してみる

consoleオブジェクトのメソッドを色々試してみます。

log()、error()、warn()、info()

JavaScript

console.log('log');
console.error('error');
console.warn('warn');
console.info('info');

log()、error()、warn()、info()のデモページ

chromeでの表示。

Firefoxでの表示。

log()	ログ情報を出力。
error()	エラーメッセージを出力。
warn()	警告メッセージの出力。
info()	メッセージタイプのログ情報を出力。

　

dir()、dirxml()

JavaScript

console.dir(document.getElementsByClassName('back'));
console.dirxml(document);

dir()、dirxml()のデモページ

chromeでの表示。

Firefoxでの表示。

dir()	オブジェクトの構造を表示。
dirxml()	DOMの構造を表示。

　

table()

JavaScript

var arr = [
	['島村卯月', '渋谷 凛', '本田未央'],
	['新田美波', 'アナスタシア'],
	['神崎蘭子'],
	['双葉 杏', '三村かな子', '緒方智絵里'],
	['城ヶ崎莉嘉', '諸星きらり', '赤城みりあ'],
	['前川みく', '多田李衣菜']
];
console.table(arr);

table()のデモページ

chromeでの表示。

Firefoxでの表示。

table()	表形式のデータをテーブルで表示。

　

count()

JavaScript

for (var i = 0; i < 100; i++) {
	console.count('count');
	if(i == 5) {
		break;
	}
};

count()のデモページ

chromeでの表示。

Firefoxでの表示。

count()	count()が呼び出された回数を表示。 chromeだとカウントアップしていくが、Firefoxだと最終的な数のみ表示される。

　

time()、timeEnd()

JavaScript

console.time('timer');
alert('テスト');
console.timeEnd('timer');

time()、timeEnd()のデモページ

chromeでの表示。

Firefoxでの表示。

time()	指定した名前のタイマーを開始。
timeEnd()	指定した名前のタイマーを停止し、経過時間をログに出力。

　

group()、groupCollapsed()、groupEnd()

JavaScript

console.group('groupA');
console.log('groupA-1');
console.log('groupA-2');
console.log('groupA-3');
console.groupEnd();

console.groupCollapsed('groupB');
console.log('groupB-1');
console.log('groupB-2');
console.log('groupB-3');
console.groupEnd();

group()、groupCollapsed()、groupEnd()のデモページ

chromeでの表示。

Firefoxでの表示。

group()	以降のコンソールの出力をグループ化。
groupCollapsed()	以降のコンソールの出力をグループ化。 group()と違い、折りたたまれた状態で出力される。
groupEnd()	グループ化を終了。

　

trace()

JavaScript

function test() {
	test2();
}
function test2() {
	console.trace();
}
test();

trace()のデモページ

chromeでの表示。

Firefoxでの表示。

trace()	trace()を呼び出した場所へ至るためのプログラムの実行過程を表示。

　

assert()

JavaScript

var flag = true;
console.assert(flag, '1回目のエラーメッセージ');
flag = false;
console.assert(flag, '2回目のエラーメッセージ');

assert()のデモページ

chromeでの表示。

Firefoxでの表示。

assert()	第1引数がfalseの場合、第2引数をエラー文言で出力。 trueの場合は何も表示されない。

　

【参考サイト】

• console – Web API インターフェイス | MDN
• Web コンソール – 開発ツール | MDN