😳

Consoleオブジェクトのメソッドいろいろ

2022/12/19に公開

どうもoreoです。

デバック時に大活躍するconsoleオブジェクトについて記載します。log()ばかり使っていますが、ケースバイケースでlog()よりも使いやすいメソッドがありますね。

1 メソッドいろいろ

1-1 console.log()

文字列、数値、boolean、配列、オブジェクトなど、引数に渡した値をデバックコンソールに出力します。

const target = {
  name: "太郎",
  family: {
    father: "よしお",
    mother: "のぶ子",
    sister: "花子",
    dog: "ポチ",
  },
  address: "東京都",
  age: 18,
};

console.log("hoge");
console.log(111);
console.log(null);
console.log(target);

オブジェクトを出力する際、オブジェクトをJSON.parse(JSON.stringify())してあげないと、オブジェクトの値が変更された際、デバックコンソール上の全ての値も変更されてしまう場合があるので注意です。

console.log("変更前", target);
target.family.father = "次郎";
console.log("変更後", target);

変更前は、target.family.father = よしおのはずが、次郎に更新される。

JSON.parse(JSON.stringify())を使うと、変更前もtarget.family.father = よしおとして出力されます。

console.log("変更前", JSON.parse(JSON.stringify(target)));
target.family.father = "次郎";
console.log("変更後", JSON.parse(JSON.stringify(target)));

1-2 console.dir()

console.dir()はDOM要素をJSON形式で表示します。一方で、console.log()ではDOM要素をhtml形式で表示されます。

console.log("====console.log====");
console.log(document.body);
console.log("====console.dir====");
console.dir(document.body);

What's the difference between console.dir and console.log?

オブジェクトの出力形式も違います。

console.log("====console.log====");
console.log(target);
console.log("====console.dir====");
console.dir(target);

1-3 console.table()

配列またはオブジェクトを渡すとテーブル形式でデバックコンソールに出力します。

console.table(target);

1-4 console.trace()

console.trace()でスタックトレースを確認できます。

function hoge() {
  function fuga() {
    console.trace();
  }
  fuga();
}

hoge();

ファイル名を踏むと、コード上の処理を確認できます。

1-5 console.warn()

引数に渡した値を警告メッセージとしてデバックコンソールに出力します。

console.warn("warningです");
console.warn(1111);
console.warn(target);

1-6 console.error()

引数に渡した値をエラーメッセージとしてデバックコンソールに出力します。

console.error("エラーです");
console.error(1111);
console.error(target);

1-7 console.assert()

第一引数に判定式を渡し、判定式がfalseの場合、第二引数以降の値をエラーメッセージとしてデバックコンソールに出力します。

console.assert(false, "第一引数がfalseだとエラー文出る");
console.assert(true, "第一引数がtrueだとエラー文出ない");

1-8 console.clear()

コンソールの値を削除し、リセットしてくれます。

console.log("clear前");
console.clear();
console.log("clear後");

1-9 console.count()console.countReset()

console.count() はこのメソッドを呼び出した回数を記録します。文字列を引数として渡すとカウンターにラベルとつけて記録します(ラベルをつけないとdefaultラベルとなります)。

console.countReset()でカウンターをリセットでき、リセットしたいラベル名を渡すとそのカウンターをリセットしてくれます。

//defaultのラベル
console.count();
console.count();

//"年齢"ラベルをつける
console.count("年齢");
console.count("年齢");
console.count("年齢");

//"年齢"ラベルのカウントをリセット
console.countReset("年齢");
console.count("年齢");

1-10 console.group()console.groupCollapsed()console.groupEnd()

console.group()を使うとデバックコンソールのログをグループ化できます。console.groupEnd()でグループ化を終了できます。

console.log("====グループ化有====");
console.group();
console.log("hoge");
console.log("fuga");
console.groupEnd();

console.log("====グループ化無====");
console.log("hoge");
console.log("fuga");

グループにはラベルを付与することもできます。

console.group("グループ1");
console.log("hoge");
console.log("fuga");
console.groupEnd("グループ1");

console.groupCollapsed()を使うと、折りたたみ状態でグループ化できます。こちらも、console.groupEnd()でグループ化を終了できます。

console.groupCollapsed("グループ1");
console.log("hoge");
console.log("fuga");
console.groupCollapsed("グループ1");

折りたたみ状態

開くとグループ化が確認できます。

1-11 console.time()console.timeEnd()console.timeLog()

console.time()でタイマーを起動できます。引数にはラベルをつけることができ、console.timeEnd()でタイマーを終了します。

console.time("タイマー1");
console.log("hoge");
console.log("fuga");
console.timeEnd("タイマー1");

console.timeLog()を使うと起動中のタイマーの現在値を確認できます。

console.time("タイマー1");
console.log("hoge");

console.timeLog("タイマー1");

console.log("fuga");
console.timeEnd("タイマー1");

2 最後に

色々ありますね。console.log()以外ほとんで使っていないので、他のメソッドも活用したいです!

3 参考

https://developer.mozilla.org/ja/docs/Web/API/Console_API

Discussion

ログインするとコメントできます