개발자 도구란
Web 개발에 도움이 되는 도구로서 'Element', 'console',
'Sources', 'Network', 'Performance', 'Memory',
'Application', 'Security', 'Lighthouse' 패널 등,
브라우저에서 제공하는 툴.
Network Panel이란?
Network 패널은 웹페이지를 로드하기 시작했을 때 부터 웹페이지 안에 포함되어있는 이미지, 리소스 등을 Network(서버)를 통해서 각각의 이미지, 리소스를 가져오는데
- 얼마나 많은 시간이 걸리는지,
- 어떤 순서로 리소스를 가져오는지,
- 어떤 요청과 응답이 오고가는지 등
웹페이지와 서버 사이에서의 데이터의 흐름을 분석하고,
문제 발생 시 해결책을 찾을 수 있는 곳.
Network Panel의 기능
- http 네트워크 통신 확인
- API 크롤링, 페이지 로딩 성능 테스트
- 이미지, 영상 등의 소스(mock data 활용)
- 네트워크에 모든것이 들어있다
Mock Data란
단어 그대로 가짜 데이터(샘플데이터)라는 뜻이다
즉, 실제 API 데이터가 아닌 테스트를 하기 위해 샘플로 만들어진 데이터 Network Panel Tap종류
- All, XHR, JS CSS IMG, MEDIA...
- XHR(xml(extensible markup language)
Http Request) 데이터를 칭함
브라우저와 서버가 HTTP 통신 할 때 request 전문이 어떻게 구성되어 서버로 전달 되는지, 서버로 부터 요청에 따른 response결과를 확인할때 사용한다
(프론트와 백엔드의 오류를 확인할 수 있음 [XHR-headers-status code:], 백엔드에서 데이터를 가져옴)
xor-name(에서 어떤 api가 문제가생겼는지 확인)-headers와 preview확인
각 Tap의 기능
- Filmstrip
이미지 최상단에 위치한 그래프
타임라인 형태로 어떠한 데이터가 어떤 순서로 로드됐는지 표시되는 곳 - Name
리소스의 이름과 URL - Status
작동 여부를 숫자로 표시하여 오류를 확인 할 수 있는 곳
ex) 200:정상작동 / 304:Not modified 400: 클라이언트 오류 등.. - Type
파일의 형식(.html/ .js 등의 형식)을 볼 수 있는 곳
XHR = API이며,
API란 프로그램들이 서로 상호작용하는 것을
도와주는 매개체이자 접근성을 허용할지 말지 확인하는 것이다.- Initiator
시작지점을 의미
'initiator에서 호출 됐다'는 의미 - Size
받아온 각 리소스들의 데이터/파일의 크기 - Time
웹 페이지(클라이언트)가 요청하고, 서버가 응답하는 것 까지의 걸린시간 - waterfall
타임라인의 세부 정보를 알려주는곳
- 메뉴 세부사항 확인하기
name- 해당이름찾기 - PreView - datacategory
- 영상 가져오기
Media- request url
웬만하면 10초단위로 끊어서 여러번 가져옴
:D