[Vue.js] vscode 디버깅 하기 (feat. Debugger for Chrome)

 

제일먼저 vscode에서 Debugger for Chrome 을 설치해준다.

 

 

 

 

그다음 launch.json에 코드를 작성해주어야하는데

나같은 경우는 launch.json 파일이 없었다.

 

이럴때

 

옆에 디버그 아이콘을 눌러서 create a launch.json 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",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

고럼 이렇게 자동으로 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": "chrome",
            "request": "launch",
            "name": "vueDebug",
            "url": "http://localhost:8081",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

난 요렇게 수정해줬다! (type, name, url 변경)

 

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

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

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

출처: https://backback.tistory.com/317 [Back Ground:티스토리]

 

 

잘 생성 되었다~!!!!!!!!

 

 

 

 

잘 되는지 테스트 하기위해

breakpoint를 몇개 찍어주었다 

 

 

 

디버깅 실행

 

 

 

 

창이 잘 뜬다!

 

 

 

그리고

breakpoint 걸어논 메서드를 실행해줘봤다

 

 

 

 

 

비어있었던 debug화면에 잘 뜨는모습!