Qiita でとてもいい記事を見つけたので、是非紹介させていただきたい！ということでまとめ。
JavaScript で console.log() 以外を使ってデバッグする方法についてです。
Qiita の記事はこちら。
console.log(); しか使えなかった自分へ。。。 – Qiita
https://qiita.com/ashketcham/items/06e50b3f7f6238d9b51b
照会されていたのが、下記の 4つです。
- console.log({変数名});
- console.time();
- console.assert();
- console.table();
console.log({変数名}) は、今まで下記のように書いていたログ出力を簡単にかける方法です。
console.log(`name: ${name}`);
console.log({name});
両方とも同じ内容を出力できます。
ちょっとのことかもしれませんが、複数書くときには楽になりますね！
次に console.time() ですが、こちらは処理を console.time() と console.timeEnd() で挟むと、その処理の時間にかかった時間を計測できます。
なお、時間はミリ秒単位で表示されます。
こちらは使うか分からないのですが… console.assert() は2つの引数を指定でき、第一引数で指定した条件式が false だった場合は、第二引数に指定した文字列が表示され、true だった場合は何も表示されません。
最後に console.table() は、配列・オブジェクトのデータをテーブル形式で表示することができます。
console.log() だと、データによってはとてもわかりにくい表示になる事がありますが、こちらを使うとかなりデータが見やすいです。
また、第二引数に表示したいデータ名を配列で指定すると、それだけを表示することもできます。
項目数が多いデータにちょうどいいですね。
知らないものばかりでしたが、どれもとても便利そうです！
特に、現在のプロジェクトでは項目や行数の多いデータを扱うことが多いので、console.table() はとても助けになりそうだと思います。
是非積極的に使っていきたいですね！
以上、JavaScript で console.log() 以外を使ってデバッグする方法についてでした。
ご参考になれば幸いです。
