[Do it!] SPECIAL : 크롬 브라우저로 디버깅하기

1. console패널

console패널은 오류 문구와 함께 오류가 발생한 파일명과 행을 알려주기 때문에 쉽게 디버깅할 수 있다.

2. source 패널

source패널은 코드의 어떤 부분에서 오류가 발생했는지 알려주기 때문에 쉽게 디버깅할 수 있다.

(1) 중단점 활용

행 번호를 클릭하면 중단점을 생성할 수 있다. 중단점을 생성한 이후 새로고침을 하면, 설정한 중단점 위치에서 프로그램이 멈춰있는것을 확인할 수 있다. 이때 F11키를 누르면 프로그램이 한 줄씩 실행되고, F8키를 누르면 나머지 부분이 한번에 실행된다. 해당 기능들은 프로그램 오류를 찾거나 실행 과정을 확인할 때 매우 유용하다.

(2) watch 활용

watch와 중단점을 함께 활용하면 더 좋다. watch에는 관찰하고 싶은 변수를 등록할 수 있다.

1. source패널에서 중단점 등록하고, watch탭의 +버튼 눌러서 변수 등록하기
2. F5키를 눌러 새로고침 한 후, F11키를 누르면서 등록한 변수가 어떻게 변하는지관찰하기