JavaScriptでコンソールに出力するときにはconosle.logをよく使うがそれ以外にもメソッドが用意されている。
それらを使用することで色分けなどができてログが見やすくなる。
基本的なログ出力のメソッドは下記の4つがある。
| メソッド | 概要 |
|---|---|
| log | 一般的なログ |
| info | 一般情報を表すログ |
| warn | 警告を表すログ |
| error | エラーを表すログ |
実際に出力しているところを見てみる。
sample.js
document.addEventListener('DOMContentLoaded', function() {
console.log("test");
console.info("test");
console.warn("test");
console.error("test");
}, false);
出力結果
warnは警告マーク、errorはエラーマーク＋赤文字でログが出力される。
chromeの場合、logとinfoは違いがなくぱっと見ただけではどちらかわからないが、FirefoxとSafariの場合にはアイコンが付く。
また、chromeのデベロッパーツールを使用すればログの絞り込みをすることができる。
先ほどの出力結果の画像でDefault levelsと書いてあるプルダウンがあるが、ここで表示するログの絞り込みを行うことができる。
試しにwarningsのチェックを外してみると、console.warnで出力したログが非表示になる。
ログの書式
ログには以下のような構文がある。
console.log(format, args...)
format:書式文字列
args:書式文字列に埋め込む値
formatに埋め込むことができる書式指定子は以下の通り。
| 書式指定子 | 概要 |
|---|---|
| %s | 文字列 |
| %d, %i | 整数値 |
| %f | 浮動少数点数 |
| %o, %O | オブジェクトを出力 |
例↓
sample.js
console.log("名前→%s, 年齢→%d", "佐藤太郎", 20);
出力結果
名前→佐藤太郎, 年齢→20
ログのグループ化
groupメソッド、groupEndメソッドを使用することで、groupメソッドを呼び出してからgrooupEndメソッドを呼び出すまでに存在するログをグループ化することができる。
sample.js
document.addEventListener('DOMContentLoaded', function() {
console.group("サンプルグループ");
console.log("log1");
console.log("log2");
console.log("log3");
console.groupEnd();
}, false);
出力結果
外側のfor文でログ全体をグループ化し、内側のfor文で子グループを作成する処理。
sample.js
document.addEventListener('DOMContentLoaded', function() {
console.group("親グループ");
console.log("親グループのログ");
for(let i = 0; i < 3; i++) {
console.group("子グループその" + i);
for(let j = 0; j < 3; j++) {
console.log("子グループその" + i + "のログ" + j);
}
//子グループのgroupEnd
console.groupEnd();
}
// 親グループのgroupEnd
console.groupEnd();
}, false);
出力結果
groupメソッドの代わりにgroupCollapsedメソッドを使用するとグループが折りたたまれた状態で表示される。
ログの量が増えてきたときに見やすくするのに活用できる。
sample.js
document.addEventListener('DOMContentLoaded', function() {
console.groupCollapsed("親グループ");
console.log("親グループのログ");
for(let i = 0; i < 3; i++) {
console.groupCollapsed("子グループその" + i);
for(let j = 0; j < 3; j++) {
console.log("子グループその" + i + "のログ" + j);
}
//子グループのgroupEnd
console.groupEnd();
}
// 親グループのgroupEnd
console.groupEnd();
}, false);
出力結果
三角マークをクリックすると開くことができる。
