JavaScript 디버깅 방식

1. VSCode의 에러 메시지에 주목
2. 크롬 개발자 도구의 에러 메시지에 주목
3. console.log() 이용
4. 크롬 개발자 도구의 중단점 이용

중단점

중단점 이용하기

크롬 개발자 도구 - source 탭 - 우측 페이지에서 원하는 스크립트 파일 선택 - 라인넘버를 클릭해 중단점 설정

중단점 설정 시 위 사진과 같이 파란색 영역으로 표시되며, 중단점 설정 후 웹 페이지를 조작할 경우 해당 스크립트 영역에서 작동이 중지됨

중단점 라인에 존재하는 변수에 마우스 커서를 올리면 중단 시점의 값을 알 수 있음.

조건부 중단점

라인 넘버를 우클릭 - 조건부 중단점을 추가할 수 있음

다음과 같이 스크립트의 변수를 활용해 조건부 중단점을 설정할 수 있음.

이벤트 리스너 중단점

코드 우측에 보이는 탭에서 이벤트 리스너 중단점 을 확인할 수 있다. 여러 종류 중에 나는 마우스 클릭 이벤트 리스너 중단점을 주로 사용한다. 이렇게 되면 버튼을 클릭하는 경우 스크립트 실행이 중단하면서 클릭 이벤트가 발생한 부분을 확인할 수 있다.

이렇게 중단점을 활용해 문제가 예상되는 부분을 찾았으면, 개발자 도구 내에서 스크립트를 수정해 로컬 파일에는 영향을 주지 않고 다양한 실험을 할 수 있다. 실험을 통해 올바른 결과가 도출하면 디버깅에 성공한 것이고 해당 사항을 로컬에 반영해주면 되는 것이다.