⚡️

Remix を Visual Studio Code 上でデバッグする(フロントエンドとバックエンド両方)

2024/06/26に公開

Remix で、フロントエンドとバックエンドを同時にデバッグするための設定です。

Visual Studio Code では、複数のプロセスにデバッガをアタッチできるので、フロントエンドとバックエンドそれぞれの設定をlaunch.jsonに設定してデバッグします。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Backend",
            "type": "node-terminal",
            "request": "launch",
            "command": "npm run dev",
            "cwd": "${workspaceFolder}"
        },
        {
            "name": "Debug Frontend",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:5173/",
            "webRoot": "${workspaceFolder}/app",
            "sourceMaps": true
        },
        {
            "name": "Debug Backend and Frontend",
            "type": "node-terminal",
            "request": "launch",
            "command": "npm run dev",
            "cwd": "${workspaceFolder}",
            "serverReadyAction": {
                "action": "startDebugging",
                "pattern": "Local: +https?://.+",
                "name": "Debug Frontend"
            }
        },
    ]
}

Debug Backendがバックエンド(Node.js)でのデバッグです。
Debug Frontendがフロントエンド(Chrome)でのデバッグです。(ポート番号の5713は、viteでサーバ起動時のデフォルトポート番号)

2つを順次起動するのも面倒なので、両方まとめてデバッグが起動できるようにDebug Backend and Frontendも用意しました。
serverReadyActionという機能があって、コンソールのログがpatternに一致したらサーバ起動とみなして、actionで指定した処理を実施できるので、それでフロントエンドのデバッグ(Debug Frontend)を起動するようにしています。

Debugging in Visual Studio Code

Remix のチュートリアルを使って、フロントエンドもバックエンドもデバッグできることを確認しています。コード全体は下記になります。

https://github.com/onozaty/node-sandbox/tree/main/remix-tutorial

デバッグできている様子です。

Discussion