console.log()以外のconsole関数
はじめに
console.logはよく使用しますがlog以外のconsole関数を使ったことがないのでまとめてみました。
console
consoleを使用するとデバッグコンソールへアクセスして結果を出力します。
出力結果の表示や動作はブラウザによって異なりますが、基本的には似たような出力になります。
console.log()
一番よく使うので説明は割愛です。
オブジェクト参照なので注意が必要です。
console.info()
infoレベルでログを出力できます。
SafariやFirefoxでは"i"のアイコンがつきます。
Chrome
Safari
Firefox
console.warn()
warnレベルでログを出力できます。
console.error()
errorレベルでログを出力できます。
console.trace()
スタックトレースを出力できます。
console.dir()
指定されたオブジェクトのプロパティの対話的なリストを表示します。
console.table()
指定したデータを表形式で表示できます。
指定したデータがオブジェクトか配列かによって出力される形式が変わります。
オブジェクトの場合
配列の場合
console.time(),console.timeLog(),console.timeEnd()
console.time()でタイマー開始、console.timeEnd()でタイマーを修了し、時間をログ出力します。
console.timeLog()で途中経過の時間ログ出力します。
引数にラベルを指定することで、ページあたり最大10,000個のタイマーを同時に動かすことができます。
タイマーを複数使う場合
console.count(),console.countReset()
count()を呼び出した回数を出力してくれます。
引数にラベルをつけることでそのラベルが呼び出された回数を出力します。
console.countReset()でカウントをリセットします。
console.assert()
第一引数がfalseになった場合にコンソールへエラーメッセージを出力します。
第二引数に出力したいメッセージやオブジェクトを指定できます。
console.group(),console.groupEnd(),console.groupCollapsed()
console.group()で出力をグルーピングしてインデントを1つ下げます。
console.groupEnd()でグルーピングを終了しインデントを元に戻します。
console.group()のネストが深かったり出力結果が多いとみにくくなります。
そんな時はconsole.group()のconsole.groupCollapsed()を使用すると展開せずに出力してくれます。
おわりに
使用したい場面は限られてくると思いますが、知っていれば痒いところに手が届きそうな関数が多いと思います。
うまく使いこなせるようになれば開発効率も少し上がりそうです。
参考記事
Discussion