[VSCode] Javascript 디버깅

vscode에서 javascript 디버깅 방법 정리

 

javascript 파일이 열려 있는 상태에서 [F5] 를 누르거나 Run > Start Debugging 을 선택

 

Select environment 에서 원하는 브라우저 선택

 

launch.json 수정

 

 

기본생성

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

- url을 남겨두면 계속 url로 접속시도를 하므로 삭제

- webroot을 file로 수정

 

수정 후

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "file": "${workspaceFolder}/index.html"
        }
    ]
}

최종 경로

 

debugging 방법

javascript 파일을 열고, 원하는 디버깅 위치에 [F9]를 눌러서 브레이크 포인트 생성

[F5] 또는 Run > Start debugging을 선택하여 디버깅 시작

 

빨간 네모의 디버그 컨트롤 창이 생성 되고 해당 브라우저의 창이 뜹니다.

브레이크 포인트에 걸리면 위와 같이 표시가 됩니다.

F5, F10, F11 등 키보드를 통해 조작하거나 디버그 컨트롤 창을 직접 클릭해서 사용하면 됩니다.