環境

Chrome（バージョン: 119.0.6045.105）

console.assert()

第１引数がfalseのときは第２引数のメッセージを出力する。

const isEven = (number) => {
    if (number % 2 === 0) {
        return true;
    } else {
        return false;
    }
}

console.assert(isEven(3), '奇数です');
console.assert(isEven(2), '偶数です');

console.clear()

コンソールをクリアする

↓実行後

ちなみに、コンソールのこの部分をクリックすればコンソールをクリアできる

console.count()

指定された引数でこのメソッドが呼び出された回数をログ出力する。
引数が渡されない場合は'default'でカウントする。

const count = () => {
    console.count();
}
count();
count();

const hoge = (name) => {
    console.count(name)
}

hoge('sato');   // sato: 1
hoge('suzuki'); // suzuki: 1
hoge('tanaka'); // tanaka: 1 
hoge('sato');   // sato: 2
hoge('sato');   // sato: 3
hoge('suzuki'); // suzuki: 2

console.countReset()

console.count()の数値をリセットする。

const hoge = (name) => {
    console.count(name)
}

hoge('sato');   // sato: 1
hoge('suzuki'); // suzuki: 1
hoge('tanaka'); // tanaka: 1 
hoge('sato');   // sato: 2
hoge('sato');   // sato: 3
hoge('suzuki'); // suzuki: 2

console.countReset('sato');
hoge('sato');   // sato: 1

console.dir()

出力に違いはあるが正直メリットをあまり感じない。

const object = {
    human: {
        id: 1,
        name: 'Bob',
        age: 20
    },
    personal: {
        heigh: 170,
        weight: 60,
    }
};
console.log(object);
console.dir(object);

console.error()

エラーとしてコンソールに出力される。

console.error('test');

console.group() / console.groupEnd()

コンソールへの出力に階層をつけることができる。groupEnd()で一つ前の階層に戻る。

console.log("level 1-1");
console.group();
console.log("Level 2-1");
console.log("level 2-2")
console.group();
console.log("Level 3-1");
console.warn("More of level 3");
console.log('level 3-2')
console.groupEnd();
console.log("level 2-3");
console.groupEnd();
console.log("level 1-2");

console.groupCollapsed()

groupが畳まれた状態でコンソールに出力される。クリックすれば開く。

console.log("level 1-1");
console.groupCollapsed();
console.log("Level 2-1");
console.log("level 2-2")
console.groupCollapsed();
console.log("Level 3-1");
console.warn("More of level 3");
console.log('level 3-2')
console.groupEnd();
console.log("level 2-3");
console.groupEnd();
console.log("level 1-2");

console.log()

いつもの。お世話になっております。

console.profile() / console.profileEnd()

JavaScriptコードのパフォーマンスプロファイルを取得する。
正直これを使わなくても、開発者ツールのパフォーマンスで観れるし、下記のコマンドを実行するとパフォーマンスタブが開くようになっているっぽい。

console.profile('test');
for (let i = 0; i <= 1000; i++) {
    if (i === 1000) {
        console.log('1000')
    }
}
console.profileEnd();

console.table()

渡されたデータをテーブル形式でコンソールに表示する。

let array1 = ["愛媛", "高知", "徳島", "香川"];
console.table(array1);

let array = [
    {
        id: 1,
        name: "aa"
    },
    {
        id: 2,
        name: "bb"
    }
];
console.table(array);

console.time() / console.timeEnd()

処理の実行時間を測る。

console.time('test');
for (let i = 0; i <= 1000; i++) {
    if (i === 1000) {
        console.log('1000')
    }
}
console.timeEnd('test');

console.timeLog()

前回 console.time() を呼び出すことで起動したタイマーの現在の値をコンソールに記録する。

console.time("クリックまでの時間");
alert("OK？");
console.timeLog("クリックまでの時間"); // １回目のアラートクリックまでの時間
alert("OK?");
console.timeEnd("クリックまでの時間"); // ２回目のアラートクリックまでの時間（１回目との差ではない）

console.trace()

スタックトレースを出力する。
下記の例だと、trace()の直前で呼び出しているのはthree(), その前はtwo(), その前はone()というふうに出力される。

function one () {
    two();
}
function two () {
    three();
}
function three () {
    console.trace();
}
one();

console.warn()

警告メッセージを出力する

console.warn('test');

参考