vs code로 디버깅하기

★ debugger for chrome extension을 설치한다

★ start debugging을 클릭한다.

★launch.json파일이 열린다.

“configurations” 항목

★ “url” 키에는 개발 서버가 구동되고 있는 위치인 localhost:3000로 지정한다.

★ “webRoot”에는 workspaceFolder 그대로 두는데, 이는 프로젝트 폴더가 파일의 호스트로 간주된다는 의미다.

★ 이제 코드를 컴파일하고 소스맵 구성을 true로 설정하여 소스맵이 생성되도록 한다.

★ Break point를 추가하고 launch.json을 구성한 다음 이 위치에서 디버깅 작업을 시작한다

★ 자동으로 새 탭이 열린다. 디버깅을 종료하면 자동으로 닫힌다.

★ 좌측 디버깅 화면에서는 변수를 추적하고 특정 표현식과 현재의 호출 스택을 확인할 수 있다.

★ 버튼을 클릭했을 시 console.log가 실행되는 곳에 브레이크 포인트를 추가했다면 vscode 편집기로 돌아가고 브레이크 포인트에서 코드 실행이 중단된다.

★ 여기서 variables 를 살펴볼 수 있다. watch에 특정 표현식을 확인해볼 수도 있다. 조작 버튼을 사용하여 코드를 단계적으로 처리하여 다음 단계로 진행하면서 다음 함수 호출을 건너뛰거나 함수 호출을 시작하거나 현재의 함수 호출을 종료할 수도 있다.