크롬 개발자 도구(Network Panel)

위코드 공통세션 과제 중 개발자 도구를 분석하는 과제를 주셨습니다! 사전스터디 때 HTML을 소홀히 했더니 과제할 때 개발자 도구를 처음 들어 가봤다는...😅 그래서 조금 고생을 했지만, 팀원들께서 많이 도와주셔서, 공부한 것을 바탕으로 정리해봤습니다!
[참고 문헌]

개발자도구 Network탭 총정리
Inspect network activity - Chrome Developers

XMLHttpRequest(XHR) 란 무엇인가.

Web Performance: Optimizing the Network Waterfall

💡 과제 안내
- Network 패널의 기능은?
- Network 패넣의 여러 가지 탭의 종류와 기능 살펴보기
- Market Kurly(마켓컬리) 카테고리 정보 가져오는 API 찾아보기
- Tesla 홈페이지에서 신나게 달리는 자동차 동영상 url 가져오기

0. 크롬 개발자 도구란?

개발자 도구는 브라우저에서 제공하는 도구이다. 웹 사이트 디버깅을 빠르게 할 수 있도록 도와준다.

그렇다면 왜 Chrome 개발자 도구를 사용하는 것일까?

이유는 간단하다. 사람들이 크롬을 많이 사용하기 때문이다. 그렇기 때문에, 크롬을 기준으로 개발을 진행한다.

(게다가 개발자도구까지 잘 구축되어 있다니, 일석이조 아닌가! 개발자들이 사용하기 편하다.)

사용 방법은 맥북 기준 cmd + shift + c 를 누르면 된다! 다양한 개발자 도구들을 구경해보자!

1. Network 패널이란?

개발자 도구의 네트워크 탭은 서버와 데이터를 주고 받을 때 편리하게 디버깅을 할 수 있도록 도와주는 도구이다.

각 소스들을 불러올 때 속도, 응답 등 네트워크 측면에서 확인 가능하며, 문제시 비교, 분석을 할 수 있게 해주는 패널이다.

• 리소스의 업로드, 다운로드 확인
• HTTP헤더, 콘텐츠, 크기 등과 같은 개별 리소스의 속성 검사
• 클라이언트 성능 개선 지점 비교, 분석 시 활용

단, Network Panel에서 원하는 데이터를 확인하려면 반드시 F5(새로고침)을 해야한다..! (맥북은 cmd + r)

2. Network Panel 자세히 살펴보기

• Name : 리소스의 파일 이름
• Status : HTTP 상태 코드
• Type : 요청된 리소스의 MIME 유형
• Initiator : 다음 개체 또는 프로세스가 요청을 시작할 수 있음
• Size : 서버에서 전달한 응답 헤더와 응답 본문의 결합된 크기
• Time : 요청 시작부터 응답의 마지막 바이트 수신까지의 총 기간
• Waterfall : 각 요청의 활동에 대한 시각적 분석

3. Network Panel에서 유용하다고 생각하는 3가지 기능

1. 느린 네트워크 연결 에뮬레이션

Throtting 메뉴에서 Slow 3G, Fast 3G 및 기타 연결 속도를 에뮬레이트할 수 있다.
우리나라의 경우 빠른 인터넷이 보급화되어 있지만, 그렇지 않은 나라들도 많기 때문에, 사용자의 서비스가 어떻게 진행되고 있는지 테스트해볼 수 있다.
원하는 속도로 페이지를 로드해보고, 걸리는 시간을 체크할 수 있다.

2. 유형별 요청 필터링

내가 원하는 유형을 데이터 값을 필터 기능을 통해 보다 빠르게 확인할 수 있다.

프론트엔드의 경우, Javascript 나 CSS 코드가 너무 길면, 페이지의 로드 시간이 과도하게 길어지게 된다. 따라서, 실시간으로 체크하면서 섹션을 구분하거나, 필요한 부분만 필터링해서 로드할 수 있도록 효율적으로 최적화를 시킬 수 있다.

3. Waterfall (폭포)

폭포는 각 요청의 활동에 대한 시각적 분석을 제공한다.

데이터 받는 모습이 폭포같다고 하여 폭포인갑다

타임라인을 개략적으로 보여준다.

원하는 데이터의 폭포를 클릭하면 더 자세한 내용을 확인할 수 있다.

Queued at ms - 개발자 도구를 켠 순간부터 큐에 적재되는데 까지 걸리는 시간
Started at ms - 개발자 도구를 켠 순간부터 request를 보내는데 까지 걸리는 시간
Queueing - 구문 분석한 시점에서 큐에 넣는데 그게 적재되어 있는 시간
Stalled - 큐에서 request를 보내는데 그게 정지되어 있는 시간
Proxy negotiation - 브라우저가 프록시 서버로 요청을 보내는데까지 걸리는 시간
Request sent - request를 보내는데 걸리는 시간.
Waiting (TTFB) - response의 첫번째바이트가 도달하는데 까지 기다린 시간(TTFB는 Time To First Byte)
Content Download - content가 다운로드가 되는데 까지 기다린 시간, 시작 시점은 response 시작 시점, 종료 시점은 response 종료시점이라 생각해도 무방
Explanation - 이 모든걸 종료하는데 걸리는 시간

이때, 새로고침을 해도 모든 것이 한꺼번에 받아와지는 것이 아니다. 페이지의 로딩 시간에 따라, 데이터는 계속 추가된다. 새로고침을 해도 워터폴이 계속 추가되는 것을 확인할 수 있다. 즉, 데이터 전송에는 시간차가 존재한다.

(폭포를 통해서면 시각적으로 확인할 수 있다는 것이 가장 큰 장점)

4. 마켓컬리 카테고리 API 가져오기

마켓컬리는 특이하게 홈페이지에 우클릭이 막혀있다..! 위에 알려준대로 단축키를 활용해서 개발자도구에 접속해 보자!
cmd + Shift + C(I) (윈도우 ctrl + Shift + I)

1. 개발자도구 접속
2. Network Panel 접속
3. 새로고침!!!!
4. XHR/Fetch 탭 접속
5. 카테고리 API를 원하기 때문에, categories API를 가져오면 된다! (찾기 힘들다면 필터링 기능을 추천!)

💡 여기서 잠깐!
API란? 프로그램들이 서로 상호작용하는 것을 도와주는 매개체이다. 서버와 데이터에 대한 출입구 역할을 한다. 또한 데이터를 원활히 주고받을 수 있도록하며, 모든 접속을 표준화한다!

5. Tesla 동영상 가져오기

신나게 달리는 테슬라의 영상의 url을 가져와 봅시다!

(테슬라 승승장구해서 주가 좀 팍팍 올려줘☺️)

url이 있다면 내가 만들고 싶은 프로젝트가 있을때 원본 url을 통하여 가공해서 사용할 수 있다.

우선, 나는 개발자도구의 network패널을 통해서 url을 가져오는 방법을 조사받았지만, HTML 소스코드에서 동영상의 url을 가져오는 방법도 있다!

1. 개발자도구 접속
2. Network Panel 접속
3. 새로고침
4. Media 탭 접속
5. .mp4 로 끝나는 영상중 원하는 영상의 데이터 클릭
6. header 탭에서 url을 가져오면 된다!