Chrome Dev Toolでtsファイルにブレークポイントを仕掛ける

ソースマップがあれば、jsファイルからtsファイルの処理の紐付けがわかるので、tsファイルにたいしてブレークポイントを仕掛けることができる。これはChromeの開発ツールだけですることができる。

ソースマップ

tsconfig に以下の設定を入れておけば出力される。

"sourceMap": true,

他の設定にもよるのかもしれないが、自分のプロジェクトでは webpack.config.js に特別な設定をしないでもtsファイルのブレークポイントは有効に動いた。

mode とか、entry とか複数の設定項目が絡んでそうなのでここは割愛。

Chrome

ChromeのGUIから目的のタブにたどり着くところが一番わからなかった。(ガチャガチャしてたら辿り着いた)

Page, Filesystem とかあるタブからドリルダウンしてもtsファイルには辿り着けない(ホットリロードの開発環境だとたどり着くかもしれない)

tsファイルにたどり着くには真ん中のタブでmacOSだと「Cmd+p」のショートカットからファイルを絞り込んでたどり着く。webpack:// 配下のファイルがエディタでいじってるのと同様の外観のファイルである。あとは適宜ブレークポイントなどを仕掛けて止めたいところで止めればよい。