私はTypeScript初心者です。よろしくお願いします。m(_ _)m

今回tsconfig.jsonはこのような設定で行いました。
sourceMapはtrueに設定しておきます。

tsconfig.json

{"compilerOptions":{"target":"es6","module":"commonjs","sourceMap":true,"outDir":"./dist","strict":true},"include":["src"],"exclode":["node_modules"]}

ステップ実行するコードは、こちらの簡単なコードで行います。

https://gist.github.com/okumurakengo/8433019b8b525dd241c08cb357c414e7

src/index.ts

functionfizzbuzz(n:number):number|"Fizz"|"Buzz"|"FizzBuzz"{if(n%15===0){return"FizzBuzz";}if(n%3===0){return"Fizz";}if(n%5===0){return"Buzz";}returnn;}leta:number=1;console.log(fizzbuzz(a++));console.log(fizzbuzz(a++));console.log(fizzbuzz(a++));console.log(fizzbuzz(a++));console.log(fizzbuzz(a++));// ...

chromeでステップ実行する用にhtmlも作成

index.html

<!DOCTYPE html><metacharset="UTF-8"><title>Document</title><script src="dist/index.js"defer></script><p>ステップ実行のテスト</p>

1-1. chromeでステップ実行をしてみた

yarn add -D typescript
yarn tsc # src/index.ts をコンパイルして、 dist/index.js が出力

index.htmlを開き、開発者ツールのSourcesパネルでtypescriptのコードを確認できるので、ブレークポイントを設定してステップ実行することができました。

1-2. chromeでNode.jsのコードのステップ実行してみた

参考： ChromeDevToolを使ってNodeJSのデバッグ - Qiita

nodeで実行するときに --inspectフラグをつけて実行することで、chromeでステップ実行することができます。

node --inspect index.js

参考の通りに、ts-nodeを指定すると、typescriptをts-nodeで実行して、chromeでステップ実行することができました。
--inspect-brkをつけると、1行目にブレークポイントをつけたように実行してくれるようなので、それもつけておきました。

$ yarn add -D typescript ts-node
$ node --inspect--inspect-brk--require ts-node/register src/index.ts
Debugger listening on ws://127.0.0.1:9229/d715288d-7d07-4576-834e-4787eecadb0b

chrome://inspect を開いて、Remote Targetの部分にある、inspectを押すと、開発者ツールが開いてステップ実行できました。

2-1. vscodeでステップ実行してみた

参考：https://code.visualstudio.com/docs/typescript/typescript-debugging

vscodeの左の虫のマークを押して、左上の歯車を押すと、launch.jsonが開きます。

参考ページのlaunch.jsonを自分のディレクトリに合わせて設定します。

launch.json

{//UseIntelliSensetolearnaboutpossibleattributes.//Hovertoviewdescriptionsofexistingattributes.//Formoreinformation,visit:https://go.microsoft.com/fwlink/?linkid=830387"version":"0.2.0","configurations":[{"type":"node","request":"launch","name":"launch","program":"${workspaceFolder}/src/index.ts","preLaunchTask":"tsc: build - tsconfig.json","outFiles":["${workspaceFolder}/dist/**/*.js"]}]}

この状態で左上にある緑色の三角の実行ボタンを押すとステップ実行できました。

2-2. vscodeでクライアントコードのステップ実行してみた

vscode拡張の Debugger for Chrome をインストールする

launchi.json

{//UseIntelliSensetolearnaboutpossibleattributes.//Hovertoviewdescriptionsofexistingattributes.//Formoreinformation,visit:https://go.microsoft.com/fwlink/?linkid=830387"version":"0.2.0","configurations":[{"type":"chrome","request":"launch","name":"Launch local file","preLaunchTask":"tsc: build - tsconfig.json","url":"file:///Users/kengookumura/dev/sample/index.html","webRoot":"${workspaceFolder}"}]}

この状態でデバッグの実行ボタンを押すと、chromeが起動し、デバッグすることができました。

↑の設定だと、ローカルファイルとしてデバッグしているので、例えば、自分でローカルサーバを起動していて、http://localhost:8000/として実行したい場合は、launch.jsonの設定を変更するか、追加すると実行できます。

launch.json

{//UseIntelliSensetolearnaboutpossibleattributes.//Hovertoviewdescriptionsofexistingattributes.//Formoreinformation,visit:https://go.microsoft.com/fwlink/?linkid=830387"version":"0.2.0","configurations":[{"type":"chrome","request":"launch","name":"Launch local file","preLaunchTask":"tsc: build - tsconfig.json","url":"file:///Users/kengookumura/dev/sample/index.html","webRoot":"${workspaceFolder}"},{"type":"chrome","request":"launch","name":"Launch localhost","preLaunchTask":"tsc: build - tsconfig.json","url":"http://localhost:8000","webRoot":"${workspaceFolder}"}]}

jsonの"name"の部分でどれを実行できるか指定できるので、Launch localhostを指定した状態で実行すると

http://localhost:8000/を指定して、vscodeでクライアントコードのデバッグができました。

3-1. WebStormでステップ実行してみた

参考

右上の「Add Configulation」を押す

左上の「+」を押して、「Node.js」を選択

Working directory
JavaScript file

をそれぞれコンパイル後のJavaScriptを指定する。

Before launch: activate tool window に Compile TypeScriptを指定すると、
最初の一回はコマンドでtscと実行し(※最初の1回目をWebStormで実行するとdist/index.jsがないとエラーになる)、
それ以降WebStormで実行するときは自動でTypeScriptをコンパイル後にデバッグ実行してくれました。

この状態で右上のデバッグ実行のボタンを押すと、ステップ実行できました。
※私の環境ではなぜか不安定で、ブレークポイントを2つ設定しないと止まってくれなかったり、普通に動いてくれることもあったりで、よくわかりませんでした。

3-2. WebStormでクライアントコードのステップ実行してみた

右上の「Edit Configulation」から、
左上の「+」を押して、「JavaScript Debug」を選択

URLにhttp://localhost:63342/<index.htmlへのパス>で設定すると、WebStormの組み込みのWebサーバーからステップ実行してくれました。
※もちろんhttp://localhost:8000などとして自分のローカルサーバーを指定しても大丈夫でした。

先ほどと同じように、Before launch: activate tool window に Compile TypeScriptを指定すると、
デバッグ実行するときは毎回自動でTypeScriptをコンパイルした後にデバッグ実行してくれました。

以上です。見ていただいてありがとうございました。m(_ _)m