console.table()とか知らなかったんですが、便利そうなのでメモしておく。
きっといつか多分使う。
console.table()
console.table()は、コンソールに、オブジェクトの内容を表形式で表現したものを出力します。同じ構造のオブジェクトを複数含む配列の解析に有用です。
https://lab.syncer.jp/Web/API_Interface/Reference/IDL/console/table/
オブジェクトの配列とかをコンソールに出すときは、console.log()よりも見やすそう。
使い方
let obArr = [
{name: 'Taro', age: 20},
{name: 'Ziro', age: 30},
{name: 'Saburo', age: 40}
]
console.table(obArr)
Chromeの検証タブで見るとこんな感じになる。いい感じ。
![](https://tech.t-salad.com/wp-content/uploads/2019/10/スクリーンショット-2019-10-15-16.41.29-1024x333.png)
おまけ:その他便利そうなconsole.***
他にも色々使ったことないものがあったので、個人的に使いそうなものだけメモしておく。
console.time()とconsole.timeEnd()
時間の計測が出来る。気軽に使えて便利そう。
<html>
<head>
<script>
function start() {
console.time()
console.log('START')
}
function end() {
console.timeEnd()
console.log('END')
}
</script>
</head>
<body>
<button onclick="start()">start</button>
<button onclick="end()">end</button>
</body>
</html>
![](https://tech.t-salad.com/wp-content/uploads/2019/10/スクリーンショット-2019-10-15-16.41.53-1024x267.png)
console.group()
ごちゃごちゃしてる時に使うと良さそう。
let number = 1
console.group('Soto')
console.log(number)
console.group('Naka')
for (let i = 0; i < 5; i++) {
number = i + number
console.log(number)
}
console.groupEnd()
console.log(number)
console.groupEnd()
![](https://tech.t-salad.com/wp-content/uploads/2019/10/スクリーンショット-2019-10-15-16.56.58-1024x468.png)
参考
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9SmF2YVNjcmlwdCVFMyU4MSVBNyVFMyU4MSVBRSVFOCVCMyVBMiVFMyU4MSU4NGNvbnNvbGUubG9nJTI4JTIwJTI5JUUzJTgxJUFFJUU0JUJEJUJGJUUzJTgxJTg0JUU2JTk2JUI5JTIwJTI2JTIwJUUzJTgxJTlEJUUzJTgxJUFFJUU0JUJCJTk2JUU0JUJFJUJGJUU1JTg4JUE5JUUzJTgxJUFBY29uc29sZS54eHglMjglMjAlMjklRTQlQkQlQkYlRTMlODElODQlRTYlOTYlQjklRTMlODElQkUlRTMlODElQTglRTMlODIlODElMjAlMjhkaXIlRTMlODMlQkJ0YWJsZSVFMyU4MyVCQndhcm4lRTIlODAlQTYmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTViZDM2ODdiODFmOWNhODQ1MDU2ODlmNTBiZWIxYTY2&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBtdG95b3BldCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YzBjYzQzMjhiZmI0NDBhN2NhZGZhNzJkYWFkMjg2ODQ&blend-x=142&blend-y=486&blend-mode=normal&s=646b0ee70bbc68785d16b29c8e9b345d)
JavaScriptでの賢いconsole.log( )の使い方 & その他便利なconsole.xxx( )使い方まとめ (dir・table・warn・groupとか) - Qiita
更新2019/5/20console.trace()、console.time()、 console.timeEnd()、console.clear()を追記しました。この記事についてJav…