JavaScriptコンソールAPIを見てください

JavaScriptコンソールは、アプリの開発とデバッグに役立つ非常に貴重なツールです。コンソールオブジェクトとそのロギングメソッドを使用すると、 alert（）を呼び出してデバッグし、変数の値を取得する日が長くなります。その上、進行中の標準のおかげで、最近のブラウザはついに同じメソッドのセットをサポートしています。この投稿では、コンソールAPIによって利用可能になる主なメソッドのいくつかについて説明します。

ロギング

console.logは、コンソールに値をログアウトするために使用する通常の方法です。

const name = 'Alligator';
console.log('Hello', name); // Hello Alligator

ただし、 warn 、 info 、errorなどのより多くのロギングメソッドにもアクセスできます。

console.info('Just FYI');
console.warn('Lookout!');
console.error('Boom 💣');

結果のコンソール出力からわかるように、warnまたはerrorメソッドを使用すると、スタックトレースも得られます。

console.traceを使用してスタックトレースをトリガーすることもできます。

function hello(name = 'Alligator') {
  console.trace('name:', name);
  return `Hello ${name}!`;
}

hello();

…ああ、console.debugもありますが、現在はconsole.logのエイリアスにすぎません。

console.dir＆console.dirxml

console.dirは、適切な形式でオブジェクトを出力します。

const fancyThings = {
  car: '🏎️ Ferrari',
  watch: '⌚ Cartier',
  clothing: {
    shoes: '👠 Christian Louboutin',
    dress: '👗 Versace'
  },
  boat: '🛥️ Sunseeker'
}

console.dir(fancyThings);

console.dirxmlは、DOM要素のマークアップを出力します。例えば：

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- ... -->
</head>

<body>
  <h1>hello</h1>

  <script>
    console.dirxml(document.body);
  </script>
</body>

</html>

これにより、次のように出力されます。

気になる場合は、 console.table を使用して、コンソールのデータを表形式でよりきれいに表示することもできます。

主張する

console.assertメソッドは、単純なアサーションテストを実行する簡単な方法です。最初の引数がfalseと評価された場合、アサーションは失敗し、アサーションが失敗した場合、後続の引数はコンソールに出力されます。

// this will pass, nothing will be logged
console.assert(2 == '2', '2 not == to "2"');

// this fails, '3 not === to "3"' will be logged
console.assert(3 === '3', '3 not === to "3"');

清算

console.clearでコンソールをクリアできます。

console.clear();

カウント

console.countメソッドは、同じ提供されたラベルで呼び出された回数をカウントするために使用されます。たとえば、ここには2つのカウンターがあります。1つは偶数値用で、もう1つは奇数値用です。

[1, 2, 3, 4, 5].forEach(nb => {
  if (nb % 2 === 0) {
    console.count('even');
  } else {
    console.count('odd');
  }
});

// odd: 1
// even: 1
// odd: 2
// even: 2
// odd: 3

タイミング

この短い投稿で示したように、console.timeでタイマーを開始し、console.endTimeで終了することができます。オプションで、時間にラベルを付けることができます。

console.time('fetching data');
fetch('https://jsonplaceholder.typicode.com/users')
  .then(d => d.json())
  .then(console.log);
console.timeEnd('fetching data');

// fetching data: 0.2939453125ms
// (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

console.timeのラベルを使用する場合は、console.timeEndを呼び出すときに同じラベルを渡す必要があることに注意してください。

グループ化

console.groupおよびconsole.groupEndを使用して、コンソールメッセージをオプションのラベルと一緒にグループ化します。グループを別のグループにネストする方法にも注意してください。

console.group('🖍️ colors');
console.log('red');
console.log('orange');
console.group('HEX');
console.log('#FF4C89');
console.log('#7186FE');
console.groupEnd();
console.log('blue');
console.groupEnd();

結果のコンソール出力は次のとおりです。

ボーナス：スタイルを与える

コンソールログは、特別な%c区切り文字を使用してスタイル設定できます。

console.log(
'Hello %cAlligator%c!',
'color: #008f68; font-weight: bold; font-size: 2rem; text-shadow: 0 0 5px rgba(0,0,0,0.2);',
'color: hotpink; font-weight: bold; font-size: 2rem; text-shadow: 0 0 5px rgba(0,0,0,0.2);'
);

最初の%cの後に続くものはすべて、2番目の引数によって提供される文字列によってスタイル設定され、次の %c の後のすべては、次の文字列引数によってスタイル設定されます。すぐ。上記の例がコンソールでどのように表示されるかを次に示します。