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

2015.09.23

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

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

JavaScript

1
2
3
4
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

1
2
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

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

table()のデモページ

chromeでの表示。

try-to-console-method05

Firefoxでの表示。

try-to-console-method06

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

　

count()

JavaScript

1
2
3
4
5
6
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

1
2
3
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

1
2
3
4
5
6
7
8
9
10
11
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

1
2
3
4
5
6
7
function test() {
    test2();
}
function test2() {
    console.trace();
}
test();

trace()のデモページ

chromeでの表示。

try-to-console-method13

Firefoxでの表示。

try-to-console-method14

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

　

assert()

JavaScript

1
2
3
4
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の場合は何も表示されない。

　

【参考サイト】

　

関連記事

コメントを残す

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

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年3月
日 月 火 水 木 金 土
 1
2345678
9101112131415
16171819202122
23242526272829
3031