[VSCode] VSCode + SpringBoot + Chrome Debugger 설정

확장 기능 설치

1. Spring Boot Extension Pack 설치

• https://marketplace.visualstudio.com/items?itemName=Pivotal.vscode-boot-dev-pack

2. 디버깅 툴 설치 (둘 중 하나 사용)

• Debugger for Chrome 설치: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

• JavaScript Debugger (Nightly) 설치: https://marketplace.visualstudio.com/items?itemName=ms-vscode.js-debug-nightly

3. Project Manager for Java 설치

• https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-dependency

Spring Boot Project Import

1. 파일 - 폴더 열기 - 프로젝트 최상위 폴더 선택

2. VSCode 작업영역에 프로젝트 불러오기 및 프로젝트 빌드 진행

3. .vscode 폴더의 launch.json에 디버깅을 위한 구성 설정 추가

• 디버깅 툴이 정상적으로 설치되어 사용 가능하면 자동 완성을 통해 디버깅 구성을 추가할 수 있음

{
    "configurations": [
        {
            "name": "Launch Chrome",
            "request": "launch",
            "type": "pwa-chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        },
        {
            "name": "Attach to Chrome",
            "port": 8080,
            "request": "attach",
            "type": "pwa-chrome",
            "webRoot": "${workspaceFolder}",
            "urlFilter": "http://localhost:8080/*",
        },
        ...
    ]
}