Google Chrome DevTool [네트워크] 탭을 효율적으로 사용하기 위한 7가지 팁

개발자들은 언제 DevTool [Network] 탭을 이용할까?

Chrome DevTool의 Network tab은 개발자 특히 웹 / 프론트-엔드 개발자들에게 가장 유명한 디버깅 도구이다. 대표적인 Use-Case로는

• 리소스(resource)가 올바르게 업로드 / 다운로드가 되었는지 확인이 필요할때
• 리소스(resource)의 HTTP header, 사이즈, 등등의 부가적인 metadata를 검사할때

가 있다.

인트로

Chrome DevTool은 너무나도 유명해서 코딩 / 프로그래밍에 관심이 있으신 현재 독자분들은 대부분 한번씩은 사용해 봤을것으로 짐작이된다. 대표적으로 2xx (Success), 4xx (Client Error), 5xx Server Error 와 같은 HTTP status code 를 확인해서 HTTP request / response가 안전하게 서버쪽과 연결이 되었는지 확인과정은 가장 흔하게 사용하는 DevTool의 사용방법이다.

단순히 HTTP status code를 확인하는 것 이외에도 DevTool의 [Network]탭은 더 많은 것을 제공한다. 이번시간에는 그 중 가장 유용한 7가지 팁에 대해서 다루어 보려고 한다.

더 효과적인 설명을 위해서, CNBC Youtube Channel 의 “행복하기 위해서 대학 학위가 필요한가?” (Do you Need A College Degree To Be Happy?) 페이지로부터 DevTool을 열고 스크린샷을 찍어서 사진과 더불어서 설명을 하겠다.

Tip 1

더 많은 정보 표시

많은 정보칸 (Column)들이 기본적으로 (by default) 생략되어있다. 숨겨져 있는 정보칸 (Column)들을 보기 위해서는 네트워크 로그 테이블 (Network Log table) 우-클릭을 하고 필요한 정보칸 (Column) 예를 들어, Domain, Connection ID, Path 등을 선택할 수 있다.