この記事はTomek Sułkowskiさんによる
フロントエンドエンジニア向けアドベントカレンダーの翻訳記事です。
とても勉強になったので許可を得て翻訳させていただきました。元記事はこちら。

休暇まであと24日です。私はこれからDevToolをより効果的に、そしてもっと楽しく使うためのコツを紹介する短い記事を書いていきたいと思います。昨日のテーマはスタイルエディタでした。今日は私が「忍者コンソールログ」と呼んでいるテクニックをテーマにします。まずはじめに…

33. 条件付きブレークポイント

ブレークポイントを設定すると、時々必要以上に頻繁に評価されてしまうことがあります。200以上の要素を通過するループがあるとして、110回目の試行、または値の組合せなどによる特殊な条件下のみに興味がある場合について考えてみてください。

こうした場合に、条件付きのブレークポイントを設定することができます。手順は以下の通りです。

行番号の上で右クリックをして“Add conditional breakpoint…”を選び、trueかfalseか判定したい式を入力してください。(ポップアップで出てくる説明とは少し異なるようですが、厳密にはtrue/falseでなくても構いません)ここで記述する内容においては、そのコードの場所で、例えばその行のスコープで利用可能なもの全てにアクセスすることができます。

これで与えられた条件が満たされる時のみブレークポイントでコードの評価が一時停止されるようになりました。

34. 忍者コンソールログ

条件付きブレークポイントを活用したあるテクニックがあります。その仕組みをご説明しましょう。

ブレークポイントに与えられた条件はアプリケーションがその行に到達するたび評価、または実行されなければいけません。そしてfalseに相当する結果(undefinedなど)が返却された場合は一時停止されません。…そう、ここにconsole.メソッドを入れることができるのです！

console.log / console.table / console.timeなどのソースコードの色々な場所に仕込む代わりに、Sourcesタブから条件付きブレークポイントを利用してこうしたメソッドを加えることができるのです。メソッドが与えられたブレークポイントで止まることはありませんが、そのメソッドは毎回実行されます。必要なくなった時には、Breakpointsセクションで表示される一覧の中から該当のものを探し、2回クリックすればたくさんの忍者が一瞬にして消えるようにブレークポイントも無くなります。

このテクニックはソースにconsole.logを埋め込むことができない本番環境でのデバッグにも活用することができます。

とても濃い内容でしたね！今日はここまでです 😀
いつも通り、なにか新しいことを学べたらぜひ
→ もっと多くの人の目に止まるように拍手👏ボタンをお願いします！
→ 他の投稿も見逃さないように**Twitter (@sulco)をフォロー**してください！