웹 개발
JS 디버깅
KairoYang
2020. 6. 4. 01:42
디버깅
-소스 코드를 작성 하여 실행시켰을 때, 원하는 결과가 나오지 않는다면 내가 작성한 소스 코드를 위에서부터 한줄씩 읽으면서 어느 부분에서 에러가 발생하였는지 짚고 넘어가는 방법이다. 이런한 과정을 디버깅이라고한다. 컴퓨터에서 발생한 오류를 찾기 위해 소그 코드를 한줄 씩 따라가면서 변수값의 변화를 검사하는 과정.
console.log()나 console.dir()도 디버깅하는 방법이다.
debugger를 사용하려면 코드를 작성하고
확인하고싶은 위치에 debugger문장을 삽입한다.
크롬의 F12-Sources에서 (element-console-sources있는부분) 에서
첫번째는 debugger라는 구문이 밑에 또 있지 않는 한 끝까지 실행한다. 다른 debugger를 만나면 그자리에서 멈춘다
두번째는 다음 함수 구문으로 넘어가는 버튼이다. 다음 단계로 한개한개 진행해서 볼 수 있다.
좋은 방법은: 17번째 줄에 오른쪽 버튼을 클릭하여 Add conditional breakpoint를 클릭한다
클릭하여 원하는 조건을 넣는다 (ex i ===15) 엔터를 누르면 반점이 나온다.
그리고 나서 파란 재생 버튼을 누르면 조건 위치에 멈춘다.
다음 함수 버튼을 눌러(두번째) 어떤 로직으로 실행 되었는지 볼 수 있다.
혹은 소스코드에서 debugger 위치에 if(i ===15){debugger;} 도 가능하다.