[JavaScript] 자바스크립트 디버깅하기

 

 

티스토리는 다 좋은데.. 

이모티콘이 제한적이어서 아쉽다ㅠㅠ

카카오톡과 연동했으면 이모티콘도 연동됐으면 좋겠다 ㅎ_ㅎ 

(너무 욕심인가)

 

 

 

분명 세팅해줬는데,,

 

리모트 박스의 목록이 없는 경우에는 "목록이 존재하지 않습니다." 라는 문구를 출력하고 싶은데 

어디선가 다시 값을 세팅해주는건지,, "()" 이런 문구로 바뀌어 출력된다.

 

콘솔 로그만 계속 찍어보다가 .. 자바스크립트는 디버깅 안 되나..? 디버깅을 잘 사용할줄은 모르지만 .. 이렇게 콘솔 찍는 것보다는 낫겠지 

역시 디버깅하는 방법이 있었다 !

https://ko.javascript.info/debugging-chrome

Chrome으로 디버깅하기

모던 JavaScript 튜토리얼에 잘 나와있다.

 

 

크게 두 가지 방법이 있었는데,
1. 개발자 모드(F12)에서 소스 -> breakPoint 설정 -> 실행 
2. 소스코드에 debugger; 명령어 추가 -> 실행

 

 

 

 

의심되는 부분에 breakpoint를 찍고 해당 동작을 새로고침 후 실행한다.

 

 

위와 같은 문구를 볼 수 있고,

 

 

소스 패널에서 다음 동작을 실행시켜 볼 수 있다.

 – ‘Step’: 다음 명령어를 실행함 (단축키 F9)
 – ‘Step over’: 다음 명령어를 실행하되, 함수 안으로 들어가진 않음 (단축키 F10)
 – ‘Step into’ (단축키 F11)
 – ‘Step out’: 실행 중인 함수의 실행이 끝날 때 까지 실행을 계속함 (단축키 Shift+F11)

 

나는 해당 함수 이후에 어디서 세팅해주는지가 궁금했기 때문에

Step into 후에 Step over를 눌러가며 문제가 되는 메서드가 있는지 확인했다.

 

 

그리고 발견 ㅠㅠ

리스트 출력해주는 jsp에서 한번더 문구를 세팅해주고 있었다..

집..

자바스크립트는 비동기적인 실행 순서 때문에 

헷갈리고 잡히지 않는 어려운 존재.. 라는 인식이 있다.

오늘 알게된 디버깅 방법이 

앞으로 잡히지 않는 문제를 해결하는데 큰 도움을 줄 것 같다 ! ㅎㅎ