サイト制作に関するメモ書き

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

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

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

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

JavaScript

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

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

chromeでの表示。

try-to-console-method01

Firefoxでの表示。

try-to-console-method02

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

 

dir()、dirxml()

JavaScript

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

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

chromeでの表示。

try-to-console-method03

Firefoxでの表示。

try-to-console-method04

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

 

table()

JavaScript

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

table()のデモページ

chromeでの表示。

try-to-console-method05

Firefoxでの表示。

try-to-console-method06

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

 

count()

JavaScript

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

count()のデモページ

chromeでの表示。

try-to-console-method07

Firefoxでの表示。

try-to-console-method08

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

 

time()、timeEnd()

JavaScript

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

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

chromeでの表示。

try-to-console-method09

Firefoxでの表示。

try-to-console-method10

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での表示。

try-to-console-method11

Firefoxでの表示。

try-to-console-method12

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

 

trace()

JavaScript

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

trace()のデモページ

chromeでの表示。

try-to-console-method13

Firefoxでの表示。

try-to-console-method14

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

 

assert()

JavaScript

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

assert()のデモページ

chromeでの表示。

try-to-console-method15

Firefoxでの表示。

try-to-console-method16

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

 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP