Ajax 디버깅 하기 ( feat. Chrome devtools )

Ajax는 비동기 호출로 사용할 경우 테스트하기가 불편하다. print 한 값들이 console에 보이지 않음.

chrome developer tool 에서는 ajax 호출 코드도 쉽게 테스트 할 수 있다.

테스트가 필요한 화면을 호출 한뒤 F12를 눌러 개발자 도구를 호출하면 다음과 같은 화면을 볼 수 있다.

네트워크 탭으로 간 뒤 Clear 버튼을 누른다. ( 빨간 박스로 체크 되어 있는 부분 )

모든 항목이 삭제되었다.

Ajax 코드를 호출 시켜본다.

ajax에서 호출한 부분의 retrun 값만 보여진다.

코드에 디버깅을 위해 print 문을 삽입했다면 print 문도 보여진다.