「未確認のブレークポイント 生成されたコードが見つからないのでブレークポイントが無視されました(ソースマップの問題？)」
というメッセージが表示された時の確認点についてまとめました。
以下の質問の回答を参考にさせて頂きました。ありがとうございます。
Node.js - Visual Studio Codeでtypescriptのsourcemapが認識されない(119984)｜teratail
サンプルプロジェクトは以下のgithubで公開中
確認点
-
.vscode/launch.jsonのoutFiles属性
launch.jsonのoutFiles属性の指定に、コンパイル後のjsファイルが含まれている事が重要です。
program属性にかかれているファイルはoutFiles属性に含まれなくてもソースマップが効くので、index.jsの1ファイルだけで挙動を確認しているとここで引っかかります。
このoutFiles属性の書き方ですと、outの子フォルダのjsファイルは引っかからずに 孫フォルダのjsのみ引っかかるように見えますが、ちゃんと子フォルダのjsファイルもoutfilesに含まれます。
-
gulpfile.jsonのgulpSourcemaps.writeでsourceRoot: '.'を指定する
gulpfile.jsonの中で'gulp-sourcemaps'モジュールを使う時、writeメソッドの第二引数のオプションにsourceRoot属性を指定する必要があります。
この引数を指定しないと、launch.jsonのprogram属性のjsファイルと異なるディレクトリのファイルはソースマップが効かなくなります。これも引っかかりポイント。
sourceRoot属性を指定する事でjs.map のソースマップファイルにsourceRootという属性が追加されます。
githubコードの挙動
一般的なnodejsアプリ
一般的なnodejsアプリ、jsファイルをエントリーポイントとして起動します。
このプロジェクトを開き、a.tsとb.tsの中の関数にブレークポイントをセットし「node実行」というlaunch設定を実行して下さい。ブレークポイントが適切に動作している事が確認出来ます。
gulp-typescript-sourcemap/gulp+ts-cli at master · fushihara/gulp-typescript-sourcemap
nodemonを使って、自動的に再起動される
gulpのnodemonを使ったプロジェクトです。この場合、監視下のファイルが更新されると再コンパイルが走るのでプロセスが終了してしまいます。
その場合は、プロジェクトを開いた後に結合ターミナルを開き、手動でgulpを実行します。これはプロジェクトを開く時に一度だけでOK。
そしてlaunch.jsonでattachリクエストを指定します。ここでポート番号を手動で指定する所と、restart属性がある所が重要です。
その後launchを実行し、localhost:29285 を開くとブレークポイントが効いていることが確認できます。
nodemon監視下のファイルが更新された時も、自動的にプロセスのアタッチが再接続されます。
ここを把握したら、visual studio codeでブレークポイントが効かない！という事が無くなるかも。