この記事はTomek Sułkowskiさんによる
フロントエンドエンジニア向けアドベントカレンダーの翻訳記事です。
とても勉強になったので許可を得て翻訳させていただきました。元記事はこちら。
休暇まであと24日です。私はこれからDevToolをより効果的に、そしてもっと楽しく使うためのコツを紹介する短い記事を書いていきたいと思います。昨日までで計8個なので今日は9番から始めます。
9. console.assert
from: https://developer.mozilla.org/en-US/docs/Web/API/console/assert
console.assertは最初の引数(assertion)がfalseだった場合に以下の値を表示します。特定の条件下でのみメッセージをログに表示したいときに便利です。これで、そのためだけのifを書かずとも目的を達成できるようになったほか、コストをかけることなくスタックトレースも手に入ります(*' ')
ただし、NodeJSのバージョンが≤ 10.0だと、その後のコードの実行を邪魔してしまいます。バージョン10で修正されています。(もちろんブラウザでも安全です。)。
10. console.table
この機能はびっくりするほど開発者の間で知られていません。配列(または配列のようなオブジェクトや…普通のオブジェクト)を持っているときに、console.tableメソッドを使うとコンソールにそのデータを綺麗なテーブルを使って表示することができます。配列の持つオブジェクトにある全てのプロパティに基づいてカラムの名前を埋めてくれるだけでなく、カラム幅が変更できて…なんとソートもできます！
カラムが多すぎる場合は第二引数を使って表示するカラム名を配列で指定することができます。
時々バックエンドも触るという人には、console.tableはnodeのバージョン10以降も対応しているということもお伝えしておきます！
11. console.dir
最も有名なconsole.logメソッドはデータをほぼどんな開発でもどんな場合でも意味のわかるように表示してくれます。しかし、時にそれは見たいものではないときがあります。典型的な例をあげるなら、DOM nodeを表示するときです。console.logはこのインタラクティブな要素をElementsタブから抜き出してきたかのように表示します。では、その要素が参照している実際のJavaScript objectを検査したい場合はどうしたら良いでしょうか？プロパティを見てみますか？
そういった忠実なデータの表示が欲しい場合は代わりにconsole.dirを使いましょう。
今日はここまで！(3つだけ？と思いましたか？今日は月曜日ですから、残りの日にむけてエネルギーをとっておきましょう
)
ここからはいつも通り。なにか新しいことを学べたらぜひ
→ もっと多くの人の目に止まるように拍手👏ボタンをお願いします！
→ 他の投稿も見逃さないようにTwitter (@sulco)をフォローしてください！