php+mysql 쇼핑몰 만들기 강좌 - #37. Ajax가 잘 작동하는지 확인해보자. feat.개발자도구

지금까지 많은 ajax를 만들어보았는데 ajax파일이 오류가 나거나 또는 어떤 파라미터를 넘겨주고 어떤 값이 리턴되는지 확인하기가 어려운 단점이 있었다. 그럴때 사용하는 개발자도구라는 놈을 확인해보자.

 

자 ajax를 작동시키기 전에 F12키를 눌러 개발자도구 창을 연다. 개발자도구에는 Elements, Console, Sources, Network등의 메뉴가 있다. 그중에 Network를 클릭한다. 현재는 아무것도 화면에 보이는게 없다. 혹시 여러개의 파일이 보인다면 화면을 미리 깨끗하게 정리해준다.

 

화면을 정리하려면 위 사진에서 맨 왼쪽의 빨간색 버튼이 아니고 그 오른쪽에 있는 Clear버튼을 클릭한다. 이렇게 하면 화면에 나와있는 파일들의 목록이 사라진다.

 

그리고 그 밑에 보면 All과 fetch/XHR이란 버튼이 있다. ajax파일을 확인할때는 fetch/XHR버튼을 클릭한다. 

 

자 준비가 됐으면 쿠폰선택의 셀렉트 버튼을 클릭해서 쿠폰을 선택해보자.

 

그러면 조금전까지 아무것도 없던 화면에 ajax파일명이 나타난다. 그렇다. ajax가 실행한 파일을 보여주는 것이다. 저 파일명을 클릭해보자.

 

 

그러면 Header, Payload, Preview, Response등의 메뉴가 나타난다. 우선 Header를 보자. 여기엔 어떤 파일을 호출했고 상태가 어떤지를 보여준다. 만약 저 파일이 오류가나서 제대로 실행이 안됐다면 파일명이 빨갛게 표시된다. 밑으로 쭈욱 보면 cookie값이 있다. 이 값을 이용해서 크롤링할때 사용하기도 한다...흠흠...

 

이번엔 Payload를 보자. ajax를 호출할때 어떤 파라미터를 전송했는지 확인할 수 있다. 이 값을 보고 제대로 값을 전달했는지 확인하는 것이다.

 

preview와 response는 리턴값을 보여준다. 만약 내가 원하는 결과가 나타나지 않는다면 리턴값이 제대로 넘어오는지 확인해보자.

 

이렇게 ajax를 확인하는 법을 알아보았다.여기서 다른 ajax를 작동시키면 어떻게 될까?

 

새로운 ajax파일이 표시된다. 확인하는 방법은 조금 전과 같다. 이렇게 ajax가 잘 작동하는지 내가 제대로 파라미터를 전송했는지 그리고 원하는 값이 리턴되는지 확인해 볼 수 있다. 

 

이런 부분은 php뿐만아니라 모든 웹개발 언어들에 공통으로 적용되는 내용이다.