☰

한 번의 클릭으로 VS Code용 라이브 서버 및 Chrome 디버거를 시작하려면 어떻게 해야 합니까?

tag-icon • tag-icon visual-studio-code extension debugger
한 번의 클릭으로 VS Code용 라이브 서버 및 Chrome 디버거를 시작하려면 어떻게 해야 합니까?

npm 또는 작업 실행기를 사용하지 않는 웹 프로젝트의 경우 디버깅을 시작하기 전에 Chrome 확장 프로그램용 디버거가 서버를 시작하도록 하는 방법을 알려주실 수 있나요? 저는 Live 서버 디버깅 확장 프로그램을 사용하고 있는데 단 한 번의 클릭으로 디버깅을 시작할 수 있으면 좋을 것 같습니다.

예를 들어 "preLaunchTask" 속성을 어떻게든 사용할 수 있나요?

답변1

.NET에서 최상위 속성으로 "화합물"을 원합니다 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"]
        }
    ]
}

그런 다음 여러 개의 다른 러너를 하나 이상의 "컴파운드 러너"로 결합할 수 있습니다.

답변2

을 사용하여 이것을 실행할 수 있었습니다 preLaunchTask. 이제 한 번의 클릭으로 디버거와 라이브 서버가 모두 시작됩니다. 내 .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
}

관련 정보