Svelte + Vite のプロジェクトでデバッグの設定をする in VSCode

先に結論

.vscode/launch.jsonを以下のようにします。
urlをViteの待ち受けポートに合わせるのがキモです。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:5173",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

手順

VSCodeでデバッグ設定を作る場合、まずはデバッグタブを開きます。
今回はこの中のcreate a launch.json fileをクリックします。

debuggerを選択するプルダウンが開くので、Web App (Chrome)を選択します。
※Edgeをお使いの方はWeb App (Edge)でもOKのはず、です。多分。(未確認)

VSCodeが自動生成するlaunch.jsonは以下のようになります。urlのポート番号が8080になっているので、このままではアタッチできません。

ポート番号の部分を5173に変更します。

この5173は、yarn dev(もしくはnpm run dev)でviteが待ち受けるポート番号に合わせます。
具体的にはターミナルでyarn devを実行した際に表示されるポート番号を使ってください。
下の図は私の環境の例です。

デバッグの開始

デバッグを始める場合、言語や環境によっては無造作にF5を押せばいい場合もありますが今回はそうではなく、

いったんyarn devでdevサーバを起動しておき、

launch.jsonの作成によってRUN AND DEBUGに追加されたLaunch Chrome against localhostの▷ボタンをクリックします。

自動でChromeが起動し、http://localhost:5173が開きます。

事前に設定しておいたブレークポイントで止まってくれました！

まとめ

手の込んだ処理を作ろうとするとやっぱりデバッガがないとつらい場面も多くあると思います。
ご参考いただければ幸いです。

ではまた！

参考記事