Visual Studio Code 디버그 구성에서 개발 프록시 사용

한눈에 보기
목표: VS Code에서 디버깅할 때 개발 프록시 자동 시작
시간: 10분
플러그인: 다양한
필수 구성 요소:개발 프록시, VS Code, 개발자 프록시 도구 키트 확장 설정

확장 마켓플레이스에서 개발 프록시 도구 키트 를 설치합니다. 확장은 개발 프록시에 대한 작업 및 감시자를 제공합니다.

디버그 구성에 개발 프록시 추가

프로젝트의 start 파일에 stop 작업 및 tasks.json 작업을 추가합니다.

Tip

devproxy-task-start 및 devproxy-task-stop 코드 조각을 사용하여 파일에 개발 프록시 작업을 빠르게 추가합니다tasks.json.

파일: .vscode/tasks.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "devproxy-start",
            "type": "devproxy",
            "command": "start",
            "isBackground": true,
            "problemMatcher": "$devproxy-watch",
        },
        {
            "label": "devproxy-stop",
            "type": "devproxy",
            "command": "stop"
        }
    ]
}

preLaunchTask와 postDebugTask 속성을 tasks.json 파일에 정의한 작업 레이블로 구성합니다. 애플리케이션이 실행되기 전에 개발 프록시가 시작되고 디버깅이 완료된 후 중지됩니다. 다음 예제에서는 개발자 프록시 및 Node.js 애플리케이션을 사용하여 디버그 세션을 시작하도록 파일을 구성하는 launch.json 방법을 보여 있습니다.

파일: .vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/index.mjs",
            "preLaunchTask": "devproxy-start",
            "postDebugTask": "devproxy-stop",
            "env": {
                "NODE_ENV": "development",
                "http_proxy": "http://127.0.0.1:8000",
                "https_proxy": "http://127.0.0.1:8000"
            }
        }
    ]
}

개발자 프록시에 옵션 전달

개발자 프록시에 옵션을 전달하려면 args 파일의 start 작업에 있는 tasks.json 속성에 옵션을 추가하면 됩니다. 예를 들어 녹음 모드에서 개발 프록시를 시작하려면 인수를 전달합니다 --record .

파일: .vscode/tasks.json(인수가 있는 작업)

{
    "label": "devproxy-start",
    "type": "devproxy",
    "command": "start",
    "args": [
        "--record"
    ],
    "isBackground": true,
    "problemMatcher": "$devproxy-watch"
}

참고하십시오

  • Last updated on