TypeScriptをVSCodeでデバッグするための設定

概要

Windows 10にて、VirtualBox上で動作しているウェブサイトのTypeScriptコードをVSCode上でデバッグするための設定のメモです。

以下の環境が前提です。

• VirtualBox
  • Ubuntuの最新版が動いている
  • sambaが動作しており、Windows 10とはZ:ドライブを介してソースコードを共有している
• TypeScript

(実際はこの環境以外でも大丈夫なはず)

VSCodeの設定

以下の拡張機能をインストールします。

• Debugger for Chrome

VSCodeではTypeScriptのソースのあるディレクトリをオープンしておきます(これをワークスペースとします)。

通常はこのようなレイアウトになっているはず。(sampleというプロジェクトの場合)

+ sample
    +-- .vscode (←ここはVSCodeの設定、launch.jsonなど)
    +-- node_modules (←ライブラリとか)
    +-- public
    +-- src (←ここにTypeScriptのソース)

ワークスペースの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 Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*",
            }
        }
    ]
}

以上がミニマムの設定です。

ポイントはこの部分。

            "webRoot": "${workspaceFolder}",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*",
            }

souceMapsをtrueにして、sourceMapPathOverridesの、"webpack:///./*"を${webRoot}（すなわち${workspeceFolder})に設定し、トランスパイル後のTypeScriptソースと、トランスパイル前のTypeScriptソースを関連付けます。

今回はたまたま、VirtualBox上に環境を作っていますが、Windows 10上で直接yarn serveなどして、デバッグすることも可能なはず。

要はソースマップと実ソースの対応がきちんと設定できていれば良いだけです。
そのために、VirtualBox上の実ソースはsambaなどを利用してWindowsから見られる状態にする必要があります。

おしまい。