#2. [Javascript] VSCode 에서 디버깅

JavaScript Debugger (Nightly) 를 이용하면 VSCode 에서 직접 디버깅을 할 수 있습니다.

1. Active Bar의 Extentions을 클릭하여 JavaScript Debugger (Nightly)를 설치합니다.

   

2. Active Bar의 Run and Debug를 클릭하고, Side Bar에서 create a launch.json file을 선택합니다.

   

3. 개발 환경을 선택합니다.

   

4. Web app (Chrome) 을 선택하면, 다음과 같이 기본적인 launch.json파일이 생성됩니다.

   

5. launch.json파일에서 "url": "http://localhost:8080",의 포트를 개발 환경에 맞게 수정합니다.(제 경우는 5500입니다.)

   "url": "http://localhost:5500",

6. Side Bar상단에서 Launch Chrome against localhost 를 클릭하여 디버깅을 시작합니다.

   

7. 중단점이 설정되어 있다면 VSCode 에디터 창에서 해당 위치가 표시되며, 상단 디버깅 툴바를 이용하여 Step Over(F10), Step Info(F11) 등을 수행할 수 있습니다.