구글 개발자 도구와 친해지기

보통 이슈로 등록한 티켓들은 개발 단에 Client 단의 이슈인지, Back 단의 이슈인지 핑퐁을 하다가 정착을 한다.

물론 QA에서 어디 단에 이슈인지 명확히 알고 할당(Assign)을 하면 다행이지만,

우리가 다 어떻게 알겠는가?!!? ㅋㅋㅋ

그리고 할당을 했다고 하더라도 개발의 수정 방향에 따라 Back 단에 이슈를 Front에서 처리하거나 할 수 있지 않는가?

(응답이 2xx라는 가정하에서만)

 

그래도 이슈를 파악하기 위해 Back 단의 이슈인지 Front 단에 이슈인지 개발자 도구까지 꺼내 볼 줄 안다면 

개발자들과의 대화가, 업무가, 내 이해도가, 나의 업무 퀄리티가 높아지지 않겠는가?

 

그렇다. 크롬의 개발자 도구와 친해져 보자!

이 창에서는 너무 많은 정보를 우리에게 끊임없이 제공해주려고 하는데

너무 그냥 지나쳐간건 아닐까?

 

근데 저 수많은 기능들을 다 리뷰하기에는 시간이(열정이) 없다.

정말 궁금하면 https://developer.chrome.com/docs/devtools/ 공식 사이트만한게 없지 않은가!!

(ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ)

 

내가 Web QA 업무를 할 때 제일 많이 쓰는 Network만 간단히 소개하려고 한다.

 

개발자 도구를 열고, Network 탭을 선택하고, 웹페이지에서는 구글을 들어가 보자

뭔가 댑따 많이 출력되지 않은가?

이 웹페이지에서 통신을 하는 것들에 대해 볼 수 있다. 

png 파일, js 파일, script.. 등 구글 페이지만 진입해도 이 수많은 정보들이 받아져서 document에 표시된다.

 

그렇다면 QA 하는 웹 페이지에서 제대로 통신을 하고 있는지, 응답 및 요청은 정상인지, 속도는 괜찮게 나오는지 여러 가지를 볼 수 있겠지?

 

우선 서버와의 통신을 필터 해서 보기 위해 xhr을 선택하자.

그리고 xhr이 뭐지 하는 사람들은, mozila 아래 사이트를 참고하길 바란다.

https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest

XMLHttpRequest - Web API | MDN

그리고 날씨를 구글 검색 창에 검색을 해보자

검색 창에 "날씨"만 입력했는데도 search~ 어쩌고 한 리스트를 5개나 볼 수 있다.

저게 크롬 검색과 검색 엔진 사이에 통신한 내용이다.

 

뭔가 개발에 1cm에는 가까워 진건 아닌가 싶다!

Server의  에러라면 200이 아니라 다른 이외의 값을 줄 것이다.

또한 정상이라고 해도 혹은 Client와 협의되지 않은 다른 값을 줌으로 써, 기능이 정상적으로 동작하지 않은 경우도 있을 수 있을 것이다.

 

이렇다면, 우린 좀 더 Client와 Back단에 이슈를 나눠 등록할 수 있는 

좀 더 나은 QA가 되지 않았을까?

 

Status Code 도 이왕이면 알면 좋겠지??

https://developer.mozilla.org/ko/docs/Web/HTTP/Status

HTTP 상태 코드 - HTTP | MDN

 

어제보다 1cm 정도 배운 사람이 되어보자!