[Computer Science][Codestates] - HTTP/Network 기초 - 2 : Chrome Error , Chrome Network Tap 사용법

이 포스팅은 앞으로 웹 개발을 하면서 꼭 알아둬야 하는 Google의 Chrom Network Tap사용법 영상을 보고 정리한 글이다

크롬 브라우저 에러 읽기

chrome://network-errors/ 을 브라우저에 입력하여 전체 error 목록을 확인할 수 있다.

문제 해결 페이지

Chrom Network Tap 사용법!!

아래 수염난 아저씨가 상당히 잘 설명을 해주셨다. 영어가 조금 약해도 이해가 쏙쏙쏙 되었다.

 

Devtool은 열려있는 동안 only 네트워크 활동? (network activity)만을 읽는다고 한다.

1. network tap 기본 기능들에 대한 설명

• 아래의 빨간 박스로 체크된 곳을 보며, 전체 request와 전송된 data를 볼 수 있다. 그 위에 위에 나오는 chart는 전체적인 network 활동을 보여준다.
  
  

  

• 이 테이블을 Network log라고 하고, 기본값으로 시간순으로 network 활동의 로그를 보여준다.
  
  

  

• Head Bar에 대한 설명
  • Status : server가 반환한 HTTP response code
  • Type : resource type
  • Initiator : what caused the resource to be requested 리소스 요청 원인
  • Size : 리소스의 크기
  • Time : 리소스를 받아오는데 걸린 시간 (upload or dwonload)
  • waterfall : visual summary of the network for each resource
    각 리소스당 네트워크의 시각적 활동 요약. 확인하려면 Time column과 waterfall을 확인하여 resource를 다운로드하는데 얼마나 걸리는지 알 수 있다.
    

    

    
• 한 개의 log를 클릭해서 보면 다른 phases에 따른 시각적 그래를 보여준다.
  
  

  

  
  
  
  
• Use Large Request Row를 check 하면 각 리소스에 대한 더 많은 정보를 표시한다.
  

  

  
  
  

• 특히 Size column은 리소스가 압축됐는지 확인할 때 아주 유용하다. 맨 위의 값은 압축되지 않은 사이즈이고 밑의 값은 압축된 사이즈이다. 두 값이 같으면 압축되지 않음을 의미한다.
  
  

  

Network log는 network request가 예상한 대로 진행이 되고 있는지 확인하기 유용하다.

예를 들어, resource를 fetch 하는 code를 추가할 때 Network panel을 열고 새로운 요청이 진행되고 있는지 확인한다. 또는 정의되지 않은 다른 file에 있는 어떤 함수에서 reference error가 났을 때 script가 잘못된 순서대로 로딩이 되고 있는지 Network log를 분석한다.

한 가지 중요하게 인지하고 있어야 하는 것은, DevTools가 열려있는 동안에는 logs는 network activity를 계속 기록하고 있다는 것이다. 충분히 로그를 얻었다면 stop recoding으로 network log 기록을 중단할 수 있다.

2. network throttling(네트워크 조절)을 사용하면 모바일 사용자처럼 경험할 수 있다!

1. Network를 조절하기 위해 Throttling dropdown을 클릭한다.
2. Slow 3G를 클릭하면 3g와 같은 network connection을 갖게 된다.
   
   

   

3. 처음 들어온 상태로 돌아가기 위해 새로고침을 길게 누르고 Empty cache and Hard Reload를 클릭한다. 이 기능은 브라우저가 cache로 이동하는 대신 모든 리소스에 대해 network로 이동한다.
   

   

   
   
   

결과를 확인해보면 확실히 리소스를 다운로드하는데 더 오래 거린 것을 확인할 수 있다.

3. How to inspect individual network resource 개별 Network resource 검사

• resource의 name을 click 하면 resource에 더 많은 정보를 알 수 있다.
  
  

  

• Headers : HTTP request and response header를 보여준다.
  
  

  

• Preview : 리소스의 기본적인 randering을 보여준다. HTML에서 error code를 반환하는 API와 같이 사용할 때 이 기능은 유용하다.
  
  

  

• Response : resource의 source code를 보여준다.
  
  

  

• Timing : waterfall에서 봤던 비슷한 timimg을 보여줌
• Network panel은 또한 message 본문 검색 , header 검색도 지원한다.

예를 들어 리소스가 합리적인 cache 정책을 사용하고 있는지 확인을 한다고 해보자. resource는 자주 변경되지 않으므로 browser는 오랫동안 chache 해야 하고 동일한 리소스가 반복적으로 다운로드되지 않는다. cache policy는 header에 정의되어 있으므로 이때 network panel에서 이 정보를 검색하는 것은 매우 유용하다.

• real world에서 resource를 검사항 때 상당히 많은 network resource page를 보게 된다. DevTools는 noise를 filter 하는 기능이 있다.
  
  

  

regular expression도 사용 가능하다.

아래의 정규표현식은 끝이 C 또는 J로 끝나지 않고 1개 이상의 S'가 오는 것만 추출이 가능하다.

또한 만약 어떤 pattern을 제외하고 싶다면 -main.css 와 같이 "-"를 맨 앞에 넣어주면 된다.

• Request blocking은 개별적인 resource의 block을 가능하게 한다.

cmd + shifr + p ⇒ block 검색 ⇒ show network request blocking

아래와 같이 main.css를 add 해준다.

page를 Reload 하면 위에서 stype sheet을 block request를 했기 때문에 page styling이 제대로 되지 않는다.