More than 3 years have passed since last update.

TypeScriptAdvent Calendar 2019

@okumurakengoin

Qiitadonユーザー会

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

Posted at 2019-12-11

私は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"
  ]
}

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

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でステップ実行をしてみた

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

{
    // 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"]
        }
    ]
}

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

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

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

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が起動し、デバッグすることができました。

↑の設定だと、ローカルファイルとしてデバッグしているので、例えば、自分でローカルサーバを起動していて、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を指定した状態で実行すると

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up