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

投稿日: 2022-04-20 2022-10-05
タグ: javascript

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 を使用して、コンソールのデータを表形式でよりきれいに表示することもできます。

主張する

The 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();

カウント

The 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 の後のすべては、次の文字列引数によってスタイル設定されます。すぐ。上記の例がコンソールでどのように表示されるかを次に示します。

getdocs

13036