console.logだけではないconsoleの使い方
フロントエンド開発にあたりconsole.log()は黄金のツールです。しかし、このconsoleオブジェクトにはもっと使えるメソッドがあります。正しく、そして効率よくデバッグを行うためにこのconsoleについて調べていきましょう。 console.logの問題 console.logだけを使っているとコードがconsole.logだらけになり、どのコードを実行しているのかわからなくなり、読みづらくなってしまいます。今日はconsoleで使える９の方法を紹介していきます！ console.table console.tableは表形式でデータを表示してくれるので読みやすいデータを出力することが可能になります。 これを実行すると下記のようにテーブルで結果が返ってきました。 console.group console.groupとconsole.groupEndを使ってネスト化されたアコーディオンでグループになったデータを表示できます。これで階層の違うデータを操作しながら確認することができますね。 このようにクリックしてデータをトグルできるようになりました。 console.time console.timeとconsole.timeEndで指定したコードブロックが実行されるまでの時間を計算することができます。 特にパフォーマンスの検証をする際に使えます。 今回はポケモンAPIのデータ取得にかかった時間をミリ秒で表示してみました。 このようにconsole.time()とconsole.timeEnd()内のストリングが同じ名前になっている部分を計算してくれます。 console.assert assertは断言するという意味になります。つまり、常にtrueになると想定する状況を構築しておきます。もし、指定した状況がtrueでない場合に記述しておいたメッセージを表示することができます。コードが正しく実行されているか確認するために、バグをいち早くキャッチするために有効になります。 この場合は、resuletが50で返ってくる想定として、5で返ってきたためにメッセージが表示されました。 もちろん、result ===5にすると関数が正しく作動していると検証されるのでコンソールには何も表示されなくなります。 console.logのスタイリング soncole.log()で表示させる内容をCSSでスタイリングすることができます。 このようにボールドで、赤文字のテキストが表示されました。 console.trace console.traceはスタックトレースをアウトプットしてくれます。コードが複雑になり、実行される順番を確認したいときに便利になります。 このように、関数bar()を実行した際に発火されたfoo()がどこから呼び出されたか理解することができます。 console.dir console.dirは、オブジェクトを階層ごとで表示することができます。もしオブジェクトをコンソールからみたい場合はこの方法が有効的です。 このようにトグルできるオブジェクトが表示されました。 console.count console.countメソッドでは、指定したコードが何回実行されたのかトラッキングすることができます。 このように、foo(‘hello’)が2回実行されたことが確認できますね。 console.clear console.clearを実行するとコンソールに表示されるデータがクリア（削除）されます。もし、デバッグのアウトプットが多くて対象のものにフォーカスしたい場合は使ってみるものありですね。 このように、clearされたことが表示されて、その後に新しくコンソールを使うことができます。 まとめ console.log()だけでない、consoleの使い方を９つ紹介いたしました。知らないもので今日から使えるものはありましたでしょうか？ 是非、活用してみてください。
