created: 2022-07-29T03:40:57.514Z

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

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

ソースマップ

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

"sourceMap": true,

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

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

Chrome

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

貼り付けた画像_2022_07_29_12_31

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

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