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
}