TypeScriptでステップ実行するときの設定の自分用のまとめ

私は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
function fizzbuzz(n: number): number|"Fizz"|"Buzz"|"FizzBuzz" {
    if (n % 15 === 0) {
        return "FizzBuzz";
    }
    if (n % 3 === 0) {
        return "Fizz";
    }
    if (n % 5 === 0) {
        return "Buzz";
    }
    return n;
}

let a: 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>
<meta charset="UTF-8">
<title>Document</title>
<script src="dist/index.js" defer></script>

<p>ステップ実行のテスト</p>
```

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

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

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

![C566UY2YIa.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/fc2b4f55-3b01-04a7-3bd2-52bdae7d8333.gif)

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

参考： [ChromeDevToolを使ってNodeJSのデバッグ - Qiita](https://qiita.com/nju33/items/9c5fd326bd7a58886af8)

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

```bash
node --inspect index.js
```

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

```console
$ 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`を押すと、開発者ツールが開いてステップ実行できました。

<img width="1105" alt="Screen Shot 2019-11-24 at 16.20.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/c23a625d-7a2b-f2dc-3d5e-03efc880b76a.png">

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

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

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



![Screen Shot 2019-12-11 at 22.51.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/abcc3c27-09b3-621e-3d28-57082f953665.png)

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

```launch.json
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, 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"]
        }
    ]
}
```

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

![Screen Shot 2019-11-24 at 16.39.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/280b957d-660c-07f1-15bd-a99055ad8866.png)

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

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

![Screen Shot 2019-11-24 at 16.44.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/8145c12e-146a-6f05-0d06-76a0c644d3df.png)

```launchi.json
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, 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が起動し、デバッグすることができました。

![oyK8cxjCHw.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/89b50c4d-79fe-2107-fd45-9cb6e9c32dd6.gif)


---

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

```launch.json
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, 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`を指定した状態で実行すると

![Screen Shot 2019-11-24 at 17.05.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/7e10e006-5965-de50-abb0-8253cc92ff6b.png)

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

![Screen Shot 2019-11-24 at 17.06.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/6e5d8a44-f691-986b-d3c4-6e44af0e40bf.png)


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

参考

- [Getting started with Typescript debugging with Webstorm breakpoints](https://medium.com/@kandros/getting-started-with-typescript-debugging-with-webstorm-breakpoints-f88aab1ffe5d)
- [TypeScriptの実行とデバッグ - ヘルプ | WebStorm](https://pleiades.io/help/webstorm/running-and-debugging-typescript.html)
- [Can support WebStorm breakpoint ? · Issue #188 · TypeStrong/ts-node](https://github.com/TypeStrong/ts-node/issues/188)

右上の「Add Configulation」を押す

![Screen Shot 2019-11-24 at 18.07.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/2303b1a8-3ff4-3e41-6d31-e32439613441.png)

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

![Screen Shot 2019-11-24 at 18.08.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/cfd336b4-47c9-cc56-3f8f-85b164f4ef0b.png)

- Working directory
- JavaScript file

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

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

![Screen Shot 2019-11-24 at 18.10.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/b465a549-e017-114a-a1b3-39c4ecd46dee.png)

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



![LfENC9nON0.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/8242638b-15b2-a484-e0e3-2693c1aa9a12.gif)

# 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をコンパイルした後にデバッグ実行してくれました。

![Screen Shot 2019-11-24 at 18.49.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/2d4db14e-1a3a-29be-9eab-1f5623024fa5.png)

![I2sPT0jeKg.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/b670f0ec-e979-d3fc-d952-696c8192d7ae.gif)

---

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