☰

VS Code のライブ サーバーと Chrome デバッガーをワンクリックで起動するにはどうすればいいですか

tag-icon • tag-icon visual-studio-code extension debugger
VS Code のライブ サーバーと Chrome デバッガーをワンクリックで起動するにはどうすればいいですか

npm やタスク ランナーを使用していない Web プロジェクトの場合、デバッグを開始する前に Chrome 拡張機能のデバッガーでサーバーを起動する方法はありますか? Live サーバー デバッグ拡張機能を使用していますが、1 回のクリックでデバッグを開始できると便利です。

たとえば、「preLaunchTask」プロパティを何らかの方法で使用できますか?

答え1

のトップレベル プロパティとして「compounds」を指定しますlaunch.json。次のようになります。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Server Debug",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/server/server.js",
            "cwd": "${workspaceRoot}",
            "protocol": "inspector",
            "skipFiles": [
                "<node_internals>/**/*.js",
                "${workspaceRoot}/node_modules/**/*.js"
            ]
        },
        {
            "name": "Client Debug",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000/",
            "webRoot": "${workspaceFolder}/clientSrc",
            "skipFiles": [
                "${workspaceFolder}/node_modules/",
            ]
        }
    ],
    "compounds": [
        {
            "name": "Debug Both",
            "configurations": ["Server Debug", "Client Debug"]
        }
    ]
}

その後、他の複数のランナーを 1 つ以上の「複合ランナー」に組み合わせることができます。

答え2

を使ってこれを実行できましたpreLaunchTask。これで、デバッガーとライブ サーバーの両方が 1 回のクリックで起動します。これが私の.vscodeフォルダー構成ファイルです。

起動.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "port": 9222,
            "request": "launch",
            "type": "pwa-chrome",
            "url": "http://localhost:5500",
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "StartServer",
            "postDebugTask": "StopServer"
        }
    ]
}

タスク.json:

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "StartServer",
            "type": "process",
            "command": "${input:startServer}"
        },
        {
            "label": "StopServer",
            "type": "process",
            "command": "${input:stopServer}"
        }
    ],
    "inputs": [
        {
            "id": "startServer",
            "type": "command",
            "command": "extension.liveServer.goOnline"
        },
        {
            "id": "stopServer",
            "type": "command",
            "command": "extension.liveServer.goOffline"
        }
    ]
}

settings.json (ワークスペース設定)

{
    "liveServer.settings.ChromeDebuggingAttachment": true,
    "liveServer.settings.CustomBrowser": "chrome",
    "liveServer.settings.host": "localhost",
    "liveServer.settings.NoBrowser": true
}

関連情報