새하얀 크롬의 개발자도구 대신 알록달록한 vscode에서 js 디버깅해보기!

1. extension 설치

• Debugger for Chrome

2. 디버깅 설정

• F5 로 디버깅 시작
• 초기설정이 없을 경우, 어떤 환경에서 디버깅할 것인지 선택하는 창 발생
• 선택하면, .vscode/launch.json 자동 생성!
• 로컬 파일 대상일 경우,
  - "url" 삭제
  - "webRoot" 대신 "file" 경로 지정
  

3. 디버깅 시작

• F5 로 시작~
• F9 로 breaking point 설정
• DEBUG CONSOLE 에서 콘솔창 활용 가능
• 변수에 마우스 대면 변수 정보 확인 가능