console.log()だけじゃない、覚えておくとデバッグ効率の向上に繋がるConsole API

Tips

console.log()だけじゃない、覚えておくとデバッグ効率の向上に繋がるConsole API

JavaScriptのデバッグ時などにconsole.log()を利用する人は多いと思いますが、Console APIには他にも呼び出された回数をカウントしたり経過時間を確認したりといった便利なものが複数用意されています。
覚えておくとデータの中身を把握しやすくなったりデバッグ効率の向上に繋がると思うので、普段からJavaScriptを触ってはいるけど使ったことがないという人は試してみてください。

※ログレベルについて記載していないものは、Chromeが「info」に、FirefoxとSafariが「ログ」に出力されます。

console.assert()以降で紹介している出力イメージはChromeのものになります。
また、ブラウザによっては使用できなかったり出力内容が紹介しているものとは異なっている場合があります。

console.log()

console.log()

JavaScript

console.log('log');

単純なログを出力するもので、JavaScriptを触ったことがあるなら一度は目にしたことがあると思います。

console.info()

console.info()

JavaScript

console.info('info');

メッセージタイプのログを出力でき、FirefoxとSafariの場合にはアイコンが付きます。
ログレベルはChromeが「info」に、Firefoxが「情報」に、Safariが「ログ」にそれぞれ出力されます。

console.warn()

console.warn()

JavaScript

console.warn('warn');

警告レベルのログを出力でき、警告したい・非推奨である・注意箇所であるといったことを示したいときに向いています。
ログレベルはChromeが「warning」に、FirefoxとSafariが「警告」に出力され、いずれもアイコンに加えて背景色と文字色も付きます。

console.error()

console.error()

JavaScript

console.error('error');

エラーレベルのログを出力でき、その名の通りエラーであることを示したいときに向いています。
ログレベルはChromeが「errors」に、FirefoxとSafariが「エラー」に出力され、いずれもアイコンに加えて背景色と文字色も付きます。

console.assert()

console.assert()

JavaScript

const assertBool01 = true,
      assertBool02 = false;
console.assert(assertBool01, '変数が true なので出力されない');
console.assert(assertBool02, '変数が false なので出力される');

第1引数がfalseだった場合に第2引数の内容を出力できます。
ログレベルはconsole.error()と同じ見栄えで、Chromeが「errors」に、FirefoxとSafariが「エラー」に出力されます。

console.count()

console.count()

JavaScript

for(let i = 0; i < 5; i++) {
  console.count('count');
}

呼び出された回数をカウントして出力できます。
ラベル無しでconsole.count()と記述した場合はdefault: 1, default: 2, default: 3 ... のように「default」というラベル付きで出力され、上記サンプルコードのように記述することでイメージのような任意のラベル付きで出力できます。
また、何らかの理由でカウントをリセットしたいときはconsole.countReset()を使用し、上記サンプルコードのようにラベル付きをリセットしたい場合はconsole.countReset('count')と該当のラベルを付けて記述します。

console.table()

console.table()

JavaScript

// example01
const example = ['foo', 'bar', 'baz'];
console.table(example);

// example02
const nirvana = [
  { 'Name': 'Kurt Cobain', 'Part': 'Vocal / Guitar' },
  { 'Name': 'Krist Novoselic', 'Part': 'Bass' },
  { 'Name': 'Dave Grohl', 'Part': 'Drums' },
];
console.table(nirvana);

配列またはオブジェクトの情報をテーブル形式で出力できます。
また、例えばexample02をconsole.table(nirvana, 'Name')のように第2引数を付けて記述することで、特定のデータだけを出力することもできます。

console.dir()

console.dir()

JavaScript

// example01
const example = ['foo', 'bar', 'baz'];
console.dir(example);

// example02
const nirvana = [
  { 'Name': 'Kurt Cobain', 'Part': 'Vocal / Guitar' },
  { 'Name': 'Krist Novoselic', 'Part': 'Bass' },
  { 'Name': 'Dave Grohl', 'Part': 'Drums' },
];
console.dir(nirvana);

配列またはオブジェクトの構造をツリー形式で出力でき、三角マークをクリックすることで子オブジェクトの内容も確認できます。

console.dirxml()

console.dirxml()

HTML

<ul id="nirvana">
  <li>Kurt Cobain</li>
  <li>Krist Novoselic</li>
  <li>Dave Grohl'</li>
</ul>

JavaScript

console.dirxml(document.getElementById('nirvana'));

指定した要素をツリー形式で出力でき、ツリー表示できない場合はオブジェクトビューを出力します。

console.time() / console.timeEnd() / console.timeLog()

console.time() / console.timeEnd() / console.timeLog()

JavaScript

console.time();
for(let i = 0; i < 100; i++) {
  console.log(i);

  if(i === 50) {
    console.timeLog();
  }
}
console.timeEnd();

処理の実行前にconsole.time()を、実行後にconsole.timeEnd()を記述することで経過時間をミリ秒単位で出力でき、console.timeLog()を記述すれば途中の経過時間を出力させることもできます。
また、引数にラベルを付けることで出力時のラベルを任意のものに変更したり複数のタイマーを設置することができます。

console.trace()

console.trace()

JavaScript

function foo() {
  bar();
}
function bar() {
  baz();
}
function baz() {
  console.trace();
}
foo();

スタックトレースを出力でき、処理の実行過程を確認したいときや呼び出し元を探したいときに便利です。
出力時はイメージのようにファイル名と行数も表示され、クリックで該当箇所のコードが確認できます。

console.group() / console.groupCollapsed() / console.groupEnd()

console.group() / console.groupCollapsed() / console.groupEnd()

JavaScript

// example01
console.group('foo');
console.log('foo-1');
console.log('foo-2');
console.log('foo-3');
console.groupEnd();

// example02
console.groupCollapsed('bar');
console.log('bar-1');
console.log('bar-2');
console.log('bar-3');
console.groupEnd();

// example03
console.group('baz');
console.group('baz-1');
console.log('baz-1-a');
console.log('baz-1-b');
console.log('baz-1-c');
console.groupEnd();
console.log('baz-2');
console.log('baz-3');
console.groupEnd();

ログを大量に出力させる必要があるときなどに便利で、console.group()からconsole.groupEnd()までをグループ化して出力し、サンプルコードのように引数付きで記述することでよりわかりやすくなります。(ラベルを付けなかった場合は「console.group」というグループ名で出力)
console.group()の場合はグループが展開された状態で出力されますが、閉じられた状態で出力したい場合は代わりにconsole.groupCollapsed()を記述します。
また、グループはexample03のように記述することで入れ子にして出力することもできます。


Close the search window,
please press close button or esc key.