[설치]
1. 링크를 통해 설치
- https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
2. VScode 확장 관리에서 검색 후 설치
빨간색 표시한 부분을 보면 설치하고 사용할 수 있는 부분이 있습니다 제대로 사용하고 계시다면 저 처럼 보여집니다.
[설정]
1. F5 키를 누르거나 상단 메뉴에서 Run(실행) - Start Debugging(디버깅 시작) 를 누르게되면 Select Environment 창이 뜨는데 거기서 Chrome을 선택합니다.
2. launch.json 파일의 내용을 사진과 같이 바꿉니다.
[사용방법]
Debugger for Chrome을 사용하기 위해서는 우선 현재 개발중인 웹 어플리케이션이 로컬 웹 서버에서 가동중이여야 합니다.
1. 디버깅하고 싶은 위치에 F9 를 누르거나 소스 줄 번호 왼쪽을 클릭하면 빨간 원이 생기는데 그게 break Point 입니다.
2. F5 키를 누르거나 상단 메뉴에서 Run(실행) - Start Debugging(디버깅 시작) 을 누르면 디버깅 할 수 있습니다.
[기타]
Webpack dev server , VS Code 확장 중 live server
이 두가지 환경에서 디버거 설정을 하고싶다면 아래 블로그 참조