【保存版】Visual Studio Code、Chrome、Angularで発生する「アンバウンドブレークポイント」を完全解決！

2024-06-13

Visual Studio Code、Chrome、Angular で発生する「アンバウンドブレークポイント」問題とその解決策

Visual Studio Code（VS Code）、Chrome、Angular を組み合わせた開発環境で、デバッグ時に「アンバウンドブレークポイント」と呼ばれる問題が発生することがあります。この問題は、ブレークポイントが設定されている行でコードが実行されないため、意図した場所でデバッグが停止できなくなるというものです。

問題の原因

この問題は、主に以下の 2 つの原因によって発生します。

ソースマップの問題:
- Angular は、コンパイルされたコードを元の TypeScript コードにマッピングするためにソースマップを使用します。
- ソースマップが破損している、または正しく生成されていない場合、VS Code はブレークポイントを正しく設定できず、「アンバウンドブレークポイント」エラーが発生します。
キャッシュの問題:

解決策

この問題を解決するには、以下の手順を試してください。

キャッシュをクリアする

ブラウザと VS Code のキャッシュをクリアすると、古いコードが削除され、問題が解決する場合があります。
- ブラウザのキャッシュをクリアする方法については、ブラウザのマニュアルを参照してください。

ソースマップを更新する

Angular CLI を使用してプロジェクトをビルドすると、ソースマップが更新されます。
- 以下のコマンドを実行して、プロジェクトをビルドします。
```
ng build
```

ワークスペース設定を確認する

VS Code のワークスペース設定で、デバッガーの設定が正しく構成されていることを確認します。
- 以下の設定を確認してください。
  - "sourceMaps": true
  - "stopOnEntry": true
  - "sourceMapResolvePath": "${workspaceFolder}"
- 設定が正しく構成されている場合は、VS Code を再起動してください。

拡張機能を無効にする

VS Code で使用している拡張機能が問題の原因となっている可能性があります。
すべての拡張機能を無効にして、問題が解決するかどうかを確認してください。
問題が解決した場合は、無効にした拡張機能を 1 つずつ有効にして、問題の原因となっている拡張機能を特定します。

デバッガーを更新する

VS Code のデバッガー拡張機能または Chrome のバージョンが古いと、問題が発生する可能性があります。
デバッガー拡張機能と Chrome を最新バージョンに更新してください。

問題が解決しない場合

上記の解決策を試しても問題が解決しない場合は、以下の情報とともに、問題の詳細を報告してください。
- 使用している VS Code のバージョン
- エラーメッセージ
- 問題が発生するコード

「アンバウンドブレークポイント」問題は、いくつかの原因によって発生する可能性があります。上記の解決策を試して問題を解決してください。問題が解決しない場合は、上記のリソースを参照するか

サンプルコード：Angular コンポーネントで「アンバウンドブレークポイント」問題を再現する

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})
export class MyComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
    setTimeout(() => {
      console.log('非同期処理を実行します');
    }, 1000);
  }

}

このコードを実行するには、以下の手順を実行します。

新しい Angular プロジェクトを作成します。
app.component.ts ファイルに上記のコードを貼り付けます。
app.component.html ファイルを作成し、以下の内容を追加します。

<p>コンポーネントコンテンツ</p>

p {
  font-family: sans-serif;
}

プロジェクトをビルドして実行します。
ブラウザでデバッグツールを開き、ngOnInit ライフサイクルフック内の console.log ステートメントにブレークポイントを設定します。
アプリケーションを再読み込みします。

デバッガーはブレークポイントに停止せず、「アンバウンドブレークポイント」エラーが発生することが確認できます。

この問題は、ソースマップの問題によって発生します。Angular は、コンパイルされたコードを元の TypeScript コードにマッピングするためにソースマップを使用します。しかし、非同期処理を実行する場合、ソースマップが正しく生成されないことがあり、デバッガーがブレークポイントを正しく設定できなくなります。

この問題を解決するには、以下のいずれかの方法を実行する必要があります。

上記の詳細については、以前の回答を参照してください。

「アンバウンドブレークポイント」問題のその他の解決策

Chrome DevTools でソースマップを無効にする

Chrome DevTools でソースマップを無効にすると、デバッガーは元の TypeScript コードでブレークポイントを設定するようになります。
- 設定 > ソース に移動します。
- ソースマップを有効にする チェックボックスをオフにします。

in-memory webpack-dev-server を使用する

開発サーバーとして in-memory webpack-dev-server を使用すると、ソースマップの問題が発生する可能性が低くなります。
- 以下のコマンドを実行して、in-memory webpack-dev-server を起動します。
```
ng serve --port 8080 --host 0.0.0.0 --watch
```
- ブラウザで http://localhost:8080 にアクセスします。

注意事項