3. Ajax - FE (2)

2) 디버깅 - 크롬 개발자 도구

1. 크롬 개발자 도구의 네트워크 패널

• 네트워크 통신이라는 것은 소스 코드 상으로 우리가 직접 서버에 보내는 것보다는 브라우저가 우리의 소스 코드를 읽어서 필요한 부분을 서버로 요청을 보내고 응답을 받아서 화면에 띄우는 것이라 볼 수 있습니다.
• 대부분의 브라우저들에는 네트워크 모듈이 들어있어서 주소창에 어떤 값을 입력할 떄 서버로 GET방식의 요청이 가는 것이고 서버가 요청을 받으면 어떤 처리를 한 뒤 response를 주게 됩니다. 브라우저, 클라이언트가 그것을 다시 받아 소스 코드 상의 어떤 과정을 거친 후에 화면을 표현하게 되어있습니다.
• 다시 말해 클라이언트가 소스 코드를 통해 어떤 해석을 한 뒤에 필요한 브라우저에 있는 네트워크 통신 모듈을 불러 그것을 통해 서버로 요청을 하고, 서버에서 어떤 처리를 한 뒤 response를 하고, 브라우저에서 그 응답을 받아서 렌더링하다가 대기 상태의 비동기작업에 대해 응답이 오면 처리를 하고 화면 출력을 마무리 짓습니다.
• 이러한 클라이언트와 서버의 통신에서 서버, 클라이언트, 또는 네트워크 중간에 문제가 있을 수 있습니다. 그래서 예상하지 못한 결과가 나올 수 있는데 이 원인을 찾는 방법은 여러가지가 있습니다.
• 소스 코드만 갖고 있는 개발자 입장에선 알아내기 어려우므로 막연하게 서버에 문제가 있다고 판단하고 서버 쪽의 로그를 본다거나, 그 전 단계로 클라이언트 단에서 서버에게 요청을 보내는 것은 잘 되는지 아니면 서버에서 어떤 문제가 있었는지 모르지만 응답이 잘 왔는지 혹은 응답이 안 왔는지 이런 것들을 확인할 수 있습니다.
• Network 패널에서는 클라이언트와 서버간의 데이터를 주고 받는 어떤 상태들을 다 표시해줍니다. 어떤 파일 타입인지도 알려주며 크기, 타임, 성능 등 각각의 정보들을 알려줍니다. 녹화기능을 통해서 HTML, CSS, JavaScript, image파일을 내려받는 상황을 알 수 있고, 흔히 겪는 404와 같은 응답 오류에 대해서 문제를 쉽게 찾을 수 있으며, 응답 시간이 서버로부터 얼마나 걸리는지도 알 수 있습니다. 즉, 성능개선을 위해서 진단할 수 있는 도구 역할을 하는 것이죠.

크롬 개발자 도구 - Network 패널

 

• 다양한 탭을 통해서 XHR, JS 등 통신 항목만 추려서 그 결과를 확인할 수 있으므로, 디버깅을 쉽게 할 수 있습니다.
• 또한, Name, status, type과 같은 항목도 내 맘대로 설정해서 노출할 수가 있습니다.
• 전체적으로 HTTP통신과정에서 생기는 문제는 여기서 대부분 실마리를 찾을 수 있을 겁니다.

생각해보기

• 네트워크 패널에서 제공하는 기능 중에 'Capture screenshots' 이라는 기능이 있습니다. 이 부분을 활성화하고 웹사이트를 다시 로딩해서 그 결과를 확인해보세요. 시간대별로 화면을 볼 수 있는 신기한 기능입니다. 주로 성능 측정에 쓰입니다.

참고 자료

[참고링크] 구글에서 제공하는 가이드
https://developers.google.com/web/tools/chrome-devtools/?hl=ko#network