avatar

Tetsuya Ohira's Blog

Software Developer in Japan 🚀

console.logをもっと使いこなす!

2022-09-24

ブラウザ上でのデバッグにconsole.log()をよく使いますが、MDNのConsole APIのページを見ると色々ありましたので調べてみました。

MDN Console API

よく使うコンソールメソッド

console.log(): ログ情報の一般的な出力用。 console. info(): 有益な情報の出力用。 console.warn(): 警告メッセージの出力用。 console.error(): エラーメッセージの出力用。 よく使うコンソールメソッド

console.log()のカスタムCSSスタイル

console.logの引数にCSSを指定し、%cディレクティブを使用すると出力結果にスタイルを適用できます。 ディレクティブの前のテキストは影響を受けず、ディレクティブの後ろのテキストが装飾されます。 カスタムCSSスタイル

文字列の置換

文字列を受け取る console オブジェクトのメソッド (log() など) の 1 つに文字列を渡す場合、次の置換文字列を使用できます。 %s: string %iまたは%d: integer %oまたは%0: object %f: float 文字列の置換

console.assert()

最初の引数が false の場合、メッセージとスタック トレースをコンソールに出力します。 console.assert()

console.clear()

コンソールをクリアします。 console.clear()

console.count()

この関数が呼び出された回数を出力します。 console.count()

console.dir()

指定された JavaScript オブジェクトのプロパティの対話型リストを表示します。 console.dir() console.logとの使い分けがわからない🙄

console.group()とconsole.groupEnd()

新しいインライングループを作成し、後続のすべての出力を別のレベルでインデントします。 レベルを戻すには、groupEnd()を呼び出します。 console.group()

console.memory

メモリプロパティを使用して、ヒープサイズを確認できます。 注: メモリはプロパティであり、メソッドではありません。 console.memry

console.table()

表形式として表示します。 console.table()

console.time()とconsole.timeEnd()

console.time(): 入力パラメーターとして指定された名前でタイマーを開始します。特定のページで最大 10,000 の同時タイマーを実行できます。 console.timeEnd(): 指定されたタイマーを停止し、開始からの経過時間を秒単位でログに記録します。 console.time()

console.trace()

スタック トレースを出力します。 console.trace()