Edited at

便利なconsole.xxx

JavaScriptにはconsole.log()以外にも便利なlog出力があります。

最近知ったconsole.xxxを紹介します。


console.log()

誰もが叩くconsole.log()。devtoolsのコンソールに引数の出力結果が表示されます。

console.log()

スクリーンショット 2019-02-09 13.14.39.png


console.error(), console.warn(), console.info()

表示はconsole.logと同じ。でも文字色、背景色が代わり、目立たせる事ができます。

(infoがlogと変わらないのはなぜだろう?)

console.info()

スクリーンショット 2019-02-09 13.08.15.png

console.warn()

スクリーンショット 2019-02-09 13.09.14.png

console.error()

スクリーンショット 2019-02-09 13.08.51.png


console.table()

配列、オブジェクトのデータを表形式で表示します。

console.logで、いちいち展開するより超見やすいです。

最近無駄にconsole.table使ってます。

console.log()
console.table()

log.gif
table.gif


console.dir()

ディレクトリ形式で出力結果のメンバを表示できます。arrayやobjectなどの場合はconsole.logとあまり変わらないですが、DOMツリーなどを表示するときなど表示が異なります。

console.log()
console.dir()

Feb-09-2019 12-41-44.gif
Feb-09-2019 12-40-15.gif


console.time(), console.timeLog()

処理時間を計測するのに便利です。

console.time("タイマー名")でタイマーを設定して、

console.timeLog("タイマー名")でそのタイマーを設定しからの経過時間を出力できます。

let timeDemo = () => {

// タイマー"demo"のセット
console.time("demo")
setInterval(()=>{
// 1000msごとに今のタイマー"demo"の経過時間を表示
console.timeLog("demo")
}, 1000)}

実行結果

console.time(), console.timeLog()

timer.gif


console.trace()

console.trace()が呼び出されるまでの経路を出力することができます。

この関数はどこでどのように呼び出されるのか調べる時など便利です。

function trace() {

console.trace()
}

function c() {
trace()
}

function b() {
c()
}

function a() {
b()
}

実行結果

console.trace()

Feb-09-2019 14-37-00.gif


参考