Posted at

TypeScriptをWebStormでデバッグする

More than 5 years have passed since last update.

TypeScriptのデバッグについてはJetBrains TVに上がってる動画 ( http://tv.jetbrains.net/videocontent/webstorm-6-sneak-peek-typescript-background-tasks-and-sourcemaps )がとても参考になります。ここではこの動画を文字に書き起こして、環境設定でハマった点を追加した内容を書きます。WebStormはEAPの126.124で動作確認しています。

また、上記の動画のプロジェクトを再現したものを https://github.com/grapswiz/typescript-webstorm に置きました。


環境構築

下記の手順1-3はWebStorm上でTypeScriptのコンパイルを行う設定で、4以降は実際にデバッガを使うまでの手順です。


  1. git cloneかdownloadで https://github.com/grapswiz/typescript-webstorm を取得してWebStormで開く

  2. [Preferences] - [File Watches]でTypeScriptをAddする。表示されたウィンドウで Programにtsコンパイラのパス、Environment variablesに環境変数を指定する(nodebrewを使用している場合、環境変数PATHにnodebrewのパスを指定する必要があります) watcher

  3. cars.tsを編集してみてコンパイルが成功してるか確認する(env: node: No such file or directory'というエラーが出力される場合は何らかの環境変数が足りてないです)

  4. [Run] - [Edit Configurations]で[JavaScript Debug] - [Local]をAddする。表示されたウィンドウでPathにindex.htmlのパスを指定してOKを押す(Nameはなんでもいいです)

  5. [Run] - [Debug '7でつけたName']でブラウザが立ち上がってindex.htmlが表示されることを確認する

  6. WebStormに戻ってcars.tsのconsole.log(event.data.sound);にブレークポイントを置く(行番号8の右あたりを押す)

  7. ブラウザに戻って表示された画像をクリックする。WebStormのデバッガが起動して、指定したブレークポイントで止まってればOKです。 debugger

おつかれさまでした。


サンプルプロジェクト

https://github.com/grapswiz/typescript-webstorm


参考資料

http://tv.jetbrains.net/videocontent/webstorm-6-sneak-peek-typescript-background-tasks-and-sourcemaps