크롬 개발자도구로 디버깅하기

디버깅은 개발자에게 코드의 흐름에 따라 변하는 변수나 값을 쉽게 알게해주는 강력한 개발도구이다.

 

1. 크롬 개발자도구 실행(F12)

2. 개발자도구 탭에서 소스탭 클릭 후에 디버깅을 원하는 파일에 가서 중단지점을 설정한다. 중단지점은 해당 line의 번호를 클릭하면 지정된다.

중단점 설정

3. 코드를 실행하고 중단점을 만나게되면 아래와 같은 화면이 나오게 된다. 코드 수행중에 중단점을 만난 화면이므로, 원하는 변수의 값을 마우스오버하여 확인하자. 이후 확인이 끝났으면 다음 스텝에 가기 위해 재생버튼을 누르면 중단점에서 다시 멈춘다. 다시 확인한다.