VSCODE - Debuging Mode ( Debugger for chrome )

VSCODE 

- Debugger for chrome

VSCODE에서 확장 프로그램중 Debugger for chrome 를 설치 해준다.

크롬에서 JS 코드를 Debugger할 수 있게 할 수 있다. 

그 후 디버깅 탭으로 들어간 후 설정을 누른다,

그런 후 이렇게 바꿔주면 되는데

{

    // 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": "chrome",

            "request": "launch",

            "name": "ReactDebug",

            "url": "http://localhost:3000",

            "webRoot": "${workspaceFolder}/src"

        },

       // {

       //     "type": "node",

       //     "request": "launch",

       //     "name": "프로그램 시작",

       //     "program": "${workspaceFolder}\\index.js"

       // }

    ]

}

Colored by Color Scripter

cs

"name" :  디버깅할 설정 모드 이름을 알아서 정해줄 수 있다.

"url" : 현재 디버깅할 프로젝트의 URL을 지정 해준다. (서버를 먼저 띄워야 디버깅이 가능. )

"webRoot" :  시작 되는 root 경로를 지정해준다. (${workspaceFolder}(프로젝트 디렉터리)/ src 경로 ) 

이제 브레이크 포인트를 찍고 디버깅을 사용 하면 된다.