consoleオブジェクトのプロパディたち【javascript】
はじめに
javascriptを使って開発をする時、よくconsole.log()を使いますが、consoleオブジェクトにはconsole.log()以外にも沢山のプロパディがあります。
なのでこの記事では、consoleオブジェクトについてまとめました。
動作は、google chromeとnode.jsのコンソールを使って確認しています。
※非標準の関数の説明は、ここには書いていません。
console.log()
console.log()は、引数で受け取った値をコンソールに出力します。
複数の引数にも対応しています。
例のコード↓
console.log("Hello world!"); //出力結果：Hello world!
console.log(1); //出力結果：1
console.log(2.5); //出力結果：2.5
console.log(true); //出力結果：true
console.log("Hello world!", 1, 2.5, true); //出力結果：Hello world! 1 2.5 true
console.warn()
console.warn()は、引数で受け取った値を警告としてコンソールに出力します。
これも複数の引数に対応しています。
例のコード↓
console.warn("Hello world!"); //出力結果：Hello world!
console.warn(1); //出力結果：1
console.warn(2.5); //出力結果：2.5
console.warn(true); //出力結果：true
console.warn("Hello world!", 1, 2.5, true); //出力結果：Hello world! 1 2.5 true
※因みに、node.jsや、vscodeのコンソールなどではconsole.logと同じように表示されます。
console.dir()
console.dir()は、一つしか引数を受け取らず、その受け取った引数（オブジェクト）のプロパディを全てコンソール上に表示してくれます。
例のコード↓
const obj = {
a: 1,
b: 2
};
console.dir(obj); //出力結果：{ a: 1, b: 2 }
console.time()、console.timeEnd()、console.timeLog()
console.time()は、タイマーを起動できます。（引数は、labelを受け取り、もし引数を指定しなかったら、labelがdefaultという文字列になります。）
console.timeEnd()は、そのconsole.time()で起動したタイマーを終了させることができます。
console.timeLog()は、起動中のタイマーの値を取得出来ます。
例のコード↓
console.time(); //出力結果：なし
//１秒後
console.timeLog(); //出力結果：default: 1s
//更に１秒後
console.timeEnd(); //出力結果：default: 2s
console.time("timer1"); //出力結果：なし
//１秒後
console.timeLog("timer1"); //出力結果：a: 1s
//更に１秒後
console.timeEnd("timer1"); //出力結果：a: 2s
console.trace()
console.trace()は、引数を受け取らず、スタックトレースを表示してくれます。
例のコード↓
function func1() {
function func2() {
console.trace();
}
func2();
}
func1();
出力結果
console.trace
func2 @ VM47:3
func1 @ VM47:5
(anonymous) @ VM47:8
console.assert()
console.assert()は、第一引数に判定式を渡せ、第二引数以降は、自由な引数を何個でも渡せます。
もし、第一引数の判定式が偽だった場合は、第二引数以降の値をエラーメッセージとしてを表示します。
例のコード↓
console.assert(true, "error"); //出力結果：なし
console.assert(false, "Hello world!"); //出力結果：Assertion failed: error
console.clear()
console.clear()は、引数を受け取らず、コンソール上の記録を削除し、リセット（クリア）してくれます。
例のコード↓
console.log("msg1");
console.clear();
console.log("msg2");
出力結果
Console was cleared
msg2
console.count()、console.countReset()
console.count()は、この関数が呼び出された回数を表示してくれます。（console.time()のように、引数にlabelを受け取り、もし引数を省略したら、labelは、defaultになります。）
console.countReset()は、console.count()で使われたカウンターの数をリセットしてくれます。
例のコード↓
console.count(); //出力結果：default: 1
console.count(); //出力結果：default: 2
console.countReset(); //出力結果：なし
console.count(); //出力結果：default: 1
console.count("counter1"); //出力結果：counter1: 1
console.count("counter1"); //出力結果：counter1: 2
console.countReset("counter1"); //出力結果：なし
console.count("counter1"); //出力結果：counter1: 1
console.group()、console.groupEnd()、console.groupCollapsed()
console.group()は、コンソール上に新しくインライングループを作れます。（引数で受け取ったlabelは、インライングループの始まりにインデントなしで表示されます。）
console.groupCollapsed()は、新しくインライングループを作れます。console.group()とは少し異なり、新しいインライングループは、折りたたまれた状態で作られ、インライングループの上部にある展開ボタンをクリックする必要があります。
console.groupEnd()は、console.group()や、console.groupCollapsed()で作ったインライングループから抜け出すことが出来ます。
例のコード↓
console.group();
console.log("default");
console.groupEnd();
console.group("group1");
console.log("group1");
console.groupEnd();
console.groupCollapsed("groupCollapsed1");
console.log("groupCollapsed1");
console.groupEnd();
出力結果
default
group1
group1
groupCollapsed1
console.groupCollapsed()の展開ボタンをクリックした場合
default
group1
group1
groupCollapsed1
groupCollapsed1
※vscodeや、node.jsのコンソールの場合、console.groupCollapsed()は、展開ボタンが無く、console.group()と同様の動作をします。
console.table()
console.table()は、引数に配列を渡せ、その配列をもとに表を表示してくれます。
例のコード↓
console.table([
{name: "Tom", age: 25},
{name: "Michael", age: 54}
]);
出力結果
console.debug()
console.debug()は、引数で受け取った値をdebugログレベルとして、コンソールに出力します。
複数の引数にも対応しています。
因みに、debugログレベルとは以下のように、開発の時に必要な情報のことです。
debug詳細なデバッグ情報
例のコード↓
console.debug("Hello world!"); //出力結果：Hello world!
console.debug(1); //出力結果：1
console.debug(2.5); //出力結果：2.5
console.debug(true); //出力結果：true
console.debug("Hello world!", 1, 2.5, true); //出力結果：Hello world! 1 2.5 true
console.info()
console.info()は、引数で受け取った値をinfoログレベルとして、コンソールに出力します。
複数の引数にも対応しています。
因みに、infoログレベルとは以下のように、興味深い事のことです。
info興味深い事象
例のコード↓
console.info("Hello world!"); //出力結果：Hello world!
console.info(1); //出力結果：1
console.info(2.5); //出力結果：2.5
console.info(true); //出力結果：true
console.info("Hello world!", 1, 2.5, true); //出力結果：Hello world! 1 2.5 true
console.dirxml()
console.dirxml()は、指定した、xmlまたはhtml要素の子要素の対話式ツリーを表示します。
もし要素として表示出来なかったら代わりに、javascriptのオブジェクトとして表示します。
例のコード↓
console.dirxml();
console.dirxml({a: 1, b: 2}); //出力結果：{ a: 1, b: 2 }
console.error()
console.error()は、引数で受け取った値をエラーとしてコンソールに出力します。
これも複数の引数に対応しています。
例のコード↓
console.error("Hello world!"); //出力結果：Hello world!
console.error(1); //出力結果：1
console.error(2.5); //出力結果：2.5
console.error(true); //出力結果：true
console.error("Hello world!", 1, 2.5, true); //出力結果：Hello world! 1 2.5 true
※因みにconsole.warn()と同様、node.jsや、vscodeのコンソールなどではconsole.logと同じように表示されます。
おわり
このように、consoleオブジェクトには、色々な関数があります。今までconsole.log()しか使って来なかった人も、試しに他の関数を使ってみるものいいと思います。
あとがき
console.context()とconsole.createTask()に付いても書きたかったのですが、ネットに情報が無くて書けませんでした。あのMDN Web Docsにも書いておらず、本当に謎です。
Discussion