[Visual Studio Code][Debugger For Chrome] VS Code의 Chrome Debugger 사용하기

 

웹 개발 Tool로 많이 사용하는 Visual Studio Code의 환경 셋팅에 대해 알아봅니다.

웹 브라우저 환경이 Chrome인 경우 VS Code의 확장기능(Extension)을 유용하게 사용 하실 수 있습니다.

Chrome 개발자 도구를 매번 실행하는 수고로움과 디버깅 포인트를 잡는 것 조차 약간의 편의성을 더 느끼실 수 있으리라 생각됩니다.

이번 포스팅에서는 웹 시작 파일이 HTML이며, Chrome 브라우저를 사용하는 환경에서의 Debugger 설정 방법을 다룹니다.

(웹 시작 파일이 .jsp일 때의 설정은 다음 포스팅에서 다루겠습니다.)

1. Debugger For Chrome 설치

Visual Studio Code의 마켓 플레이스에서 "Debugger For Chrome"을 설치해줍니다.

2. launch.json 파일 구성 설정

 디버깅 셋팅과 관련된 파일이며, 디버그 런처 영역을 선택하면 아래 그림처럼 launch.json 파일을 열어줍니다.

 먼저, 수정해야될 부분은 다음과 같습니다.

① type : "chrome"

② file : "${workspaceFolder}/[실행할 HTML]"

3. 디버깅 모드 진입

 위 과정을 모두 수행하셨다면, "F5" 키를 눌러 디버깅 모드에 진입합니다.

 아래 그림은 HTML에서 호출하는 Script 파일의 중간에 디버깅 포인트를 잡고, 

 해당 시점까지 디버거가 진행한 모습입니다.

(디버깅 모드에 진입하면 Visual Studio 사용자분들은 익숙하실 법한 하단탭이 주황색으로 변하게 됩니다.😀)