Consoleオブジェクトのメソッドいろいろ
どうも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 参考
Discussion