JavaScript - [VScode에서 Debugging 하기]

JavaScript는 VScode에서 작성해서 실제 chrome에 연결된 html, css, js 파일을 넘겨서 

chorme에서 실행결과가 나온다. 하지만 원하는 순간에 코드 실행간 어떤일이 일어나는지 모르기때문에

Debugging이 어렵다. 

 

VScode에서는 JS를 Debugging하도록 도와주는 확장프로그램이 있다.

 

다운로드를 받는다.

위 버튼을 누르면 여러 언어들이 나오는데 그중 Chrome을 선택한다.

 

{
    // IntelliSense를 사용하여 가능한 특성에 대해 알아보세요.
    // 기존 특성에 대한 설명을 보려면 가리킵니다.
    // 자세한 내용을 보려면 https://go.microsoft.com/fwlink/?linkid=830387을(를) 방문하세요.
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "file": "${workspaceFolder}"
        }
    ]
}

launch.json 이라는 Debugging 환경설정이 나온다.

이 환경설정을 위 사진과 같이 바꿔준다.

 

File - Preferences - Settings로 들어가서  

위 옵션에서 checkbox를 해제 시켜주면 디버깅이 잘된다.

 

1. break point 주는법

 

코드 줄 왼쪽에 마우스를 대면 빨간 원이 보이는데 그것을 클릭하면 break point가 설정된다.

 

이후에 debug 버튼을 누르면 chrome에서 실행할 html파일을 선택한다.

js가 연결되어 있는 html파일을 선택해야한다!! js파일을 선택하면 디버깅 안된다.

 

선택을 하는 순간 디버깅이 시작된다. 상단에 보이는 배너에 보이는 키들로 한칸씩 넘어가거나 다시 하거나

여러 동작들을 할수 있고 여러화면들로 현재 코드의 상태를 알수 있다. 

 

좌 상단에는 변수들을 볼 수 있다.

하단에는 console 칸이 나온다.

그리고 chrome 창을 켜보면 한칸 씩 잘돌아간다.

좌 하단 에는 call stack이라고 해서 어떤 함수들이 돌아가고 있는지 보여준다.

재귀함수 써먹을때 좋을 수도..!

 

watch는 내가 원하는 변수만을 넣어 해당 변수가 어떻게 변하는지 볼수 있다.

값을 넣을때 그냥 해당 변수의 이름만 넣으면 된다.