입사 초에 '개발자 도구'만 알아도 업무가 많이 쉬워질 것이다. 라고 이야기 해줬던 개발자가 있는데 이제서야 개발자 도구를 공부해 보려고 한다.
1. 개발자 도구란?
(크롬) 브라우저에서 F12누르면 나오는 창이 개발자 도구이다.
언어가 지금 한국어로 설정되어 있는데 톱니바퀴 모양의 [설정]을 눌러서 언어를 영어로 변경해 준다.
개발자 도구를 보면 영역이 아래처럼 나눠지는데, 기획자인 내가 모든 것을 공부하기는 어려울 것 같고 콘솔(오류 메시지 확인)이나 네트워크(브라우저 통신 확인)탭만 볼 수 있다면 괜찮을 것 같다.
내가 주로 궁금한 것은 api를 호출했을 때 서버에서 실제로 값을 어떻게 보내주고 있는가?이다.
개발 과정에서 API 문서가 변경되는 경우가 많은데 일정이 바쁘다보니 문서의 동기화가 이뤄지지 않는 경우가 많고 그래서 API를 받아서 웹에서 개발을 해줬을 때 오류가 나는 경우가 종종 있었다.
이 경우에 API 자체가 변경되거나 API 호출이 안 되는 게 아닌 이상 개발자 도구로 서버에서 보내주는 응답값 확인이 가능하다는 사실을 알게 되었다!
2. Network > Fetch/XHR
네트워크 탭에서 Fetch/XHR에 들어가면 Response를 확인할 수 있다.
여기서 API를 호출했을 때 서버에서 응답을 어떻게 보내주는지 확인이 가능했다!
아주 유레카! 입사하고 1년 5개월이 지나서 알게 되었지만 업무에 활용할 생각을 하니 기대된다ㅎㅎ
이상 풍화설월 하러 가야즤
반응형
