みんな大好きconsoleオブジェクトのメソッドをまとめてみた
「初めて書いたJavaScript構文は console.log 」
という方は非常に多いのではないでしょうか。
あれから幾星霜・・・
どんな時でも console.log()
雨の日も風の日も console.log()
困ったときは console.log()
公開して気付く消し忘れ console.log()・・・
今回は、そんな愛すべきconsoleオブジェクトのメソッドをいくつか紹介します。
ログ出力系
| log(str) | いつもの |
| info(str) | 情報 |
| warn(str) | 警告 |
| error(str) | エラー |
上記のいずれもコンソール画面にログを出力することは共通していますが、これらを使い分けることで、より効率的にコードのデバックや挙動を確認することができます。
↓↓↓ こんな感じで記述すると・・・ ↓↓↓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
console.log('ほげほげ');
console.info('ほげほげ');
console.warn('ほげほげ');
console.error('ほげほげ');
</script>
</body>
</html>↓↓↓ こんな感じで出力されます ↓↓↓
個別にみていきましょう。
console.log
console.log('ほげほげ');最も一般的なメソッドです。これに関しては特に言及することはありません。次に行きましょう！
console.info
console.info('ほげほげ');logメソッドどほとんど同じですが、こちらはより「情報」を出力している意図を含んでいます。
console.warn
console.warn('ほげほげ');警告を意味するログを出力します。
上記の画像では黄色の「！」アイコンが表示されています。警告を受けている感じがバシバシ伝わってきますね。
console.error
console.error('ほげほげ');エラーを意味するログを出力します。
上記の画像では赤色の「×」アイコンが表示されています。いかにもエラーという感じが伝わってきます。なんかこう、焦ってきますね・・・！
console.clear
console.clear();ログを消去します。引数には何も持たせません。
そのほか便利系
このほかにも、特定の条件／形式でログを出力するメソッドがあります。
console.table
const ary = ['りんご', 'ごりら', 'らくだ', 'ダンディなメンズ'];
const obj = {
hoge: 'ほげほげ',
fuga: 'ふがふが',
chome: 'ちょめちょめ'
}
console.table(ary);
console.table(obj);配列／オブジェクトをテーブル形式で出力します。
↓↓↓ 出力結果 ↓↓↓
console.time／TimeEnd
console.time('timer_label');
setTimeout(()=>{
console.timeEnd('timer_label');
}, 5000);処理にかかる時間を計測することができます。time(label)で計測を開始し、timeEnd(label)で終了します。その間にかかった時間がログ出力されます。
↓↓↓ 出力結果 ↓↓↓
（5000msで処理してほしいのに、5.1940…ms余分に時間がかかっている・・・これは、いやな予感！）
まとめ
ここで紹介したもの以外にも使えそうなconsoleオブジェクトのメソッドはまだあります。興味のある方は調べてみてください。きっと今まで知らなかった知識に出会えると思いますよ！
それでは、よいデバックライフを！
SNSでシェアする
-
Xでシェアする
-
このページのURLをコピーする
