96. ブレークポイント — console.log を卒業する

console.log での確認は手軽ですが、見たい変数が増えるたびにコードを書き換えて保存し直す必要があります。ブレークポイントを使えば、DevTools の Sources パネルで行番号をクリックするだけで実行をその場で止め、その瞬間のすべての変数を、コードを一切書き換えずに観察できます。

Angular の開発ビルドはソースマップを出力するので、Sources パネルにはビルド後のJSではなく自分が書いた .ts ファイルがそのまま見えます。Ctrl+P でファイル名を検索して開き、怪しい行に印を付けて操作を再現すると、止まった時点の変数が Scope 欄に並びます。ステップ実行で1行ずつ進めれば値の変化も追えます。

「印を付けたのに止まらない」ときは、その行がそもそも実行されていないという重要な手がかりです。またコード中に debugger 文を書けば、DevTools を開いた状態でその行に到達した瞬間に必ず止まります。ただし debugger 文は消し忘れるとそのまま本番コードに混入するので、確認が済んだら必ず削除しましょう。

サンプルコード(フレームワーク環境が必要なため表示のみ)

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-cart',
  template: '<p>合計: {{ total() }} 円</p>',
})
export class Cart {
  items = signal([{ price: 300, qty: 2 }, { price: 500, qty: 1 }]);

  total = signal(0);

  recalc() {
    let sum = 0;
    for (const item of this.items()) {
      // ← DevTools の Sources でこの行番号をクリックして印を付ける
      //    実行がここで止まり、Scope 欄に sum / item の中身が見える
      sum += item.price * item.qty;
    }
    // どうしても止まらない場所には debugger 文を書く手もある
    // (到達した瞬間に必ず停止する。確認後は必ず消すこと)
    debugger;
    this.total.set(sum);
  }
}

// ステップ実行の基本3ボタン:
//   ステップオーバー … 次の行へ(関数の中には入らない)
//   ステップイン     … 呼び出した関数の中に入る
//   再開             … 次のブレークポイントまで一気に進む

サンプルコードで身につける(5本) →

学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。

公式ドキュメントで詳しく ↗