개발자 도구란?

구글에서 제작한 웹 브라우저 크롬에는 개발자를 위해 다양한 기능을 제공하고있다.
개발자 도구를 활용하면 HTML, CSS, JavaScript의 생산성을 극대화 할 수 있으며 개발자 뿐만 아니라 디자인요소도 같이 확인이 가능하기에 디자이너에게도 유용하게 쓰이는 기능이다.

1. Network 탭

Network탭은 서버와 데이터를 주고 받을 때 편리하게 디버깅을 할 수 있도록 도와주는 도구이다. 페이지를 구성하고 있는 다양한 소스들이 다운로드 될때의 속도, 응답은 어떻게 되는지에 관련해 이러한 문제가 발생할 때 비교하고 분석할 수 있게 해주는 유용한 도구이다.

위에 보이는 사진이 바로 개발자 도구를 오픈하고 네트워크 탭을 클릭했을 때 보여주는 창이다. (사진의 페이지기준은 구글 첫 화면을 기준으로 하고 있음)

최상단으로부터 요소(Element), 콘솔(Console), 소스(Source), 네트워크(Network) 등의 순으로 정렬되어 있으며 지금 알아 볼 것은 네트워크에 해당되는 내용을 알아보려고 한다.

2. 네트워크 탭에서 활용 가능한 탭

• 사진의 최상단에 가장 눈에 띄는 빨간점은 페이지를 로딩하는 동안 다운받는 모든 네트워크 요소들을 기록중이라는 의미로 해당 버튼을 클릭하면 기록을 중단할 수 있고 오른쪽의 🚫버튼을 누르면 기록된 모든 요소들을 삭제 할 수 있다.
• 필터(Filter)와 검색(Search)는 이름그대로 찾고자 하는 요소들을 필터링해주고 검색해주는 역할을 해준다.
• 로그 보존(Preserve Log)는 페이지가 이동되어도 로그를 보존해주는 역할을 한다.
• 캐시 사용 중지(Disable Cache)는 브라우저의 캐시를 비활성화 해준다.
• 제한 없음(No Throttling)은 기본적으로 세팅이 되어있는 값이며 이를 클릭하면 빠른 3G(Fast 3G), 느린 3G(Slow 3G), 오프라인(Offline) 등 다양한 환경에서의 사용을 테스트할 수 있도록 해준다.

  • Filter
    Filter는 네트워크 소스를 타입별로 정렬해 볼 수 잇으며, 대체로 Fetch/XHR이 주로 사용된다.

2-1. Network 소스

위 사진은 네트워크 소스이며 이름은 파일의 이름을 명시, 상태는 HTTP의 상태 코드를 보여준다.
폭포라고 불리는 Waterfall은 request가 언제, 얼마만큼의 시간이 소요되며 도달하는지에 대한 정보를 나타내주고 해당 소스의 폭포를 클릭하면 더 자세한 사항을 볼 수 있다.

위의 사진이 Waterfall을 눌렀을 때 보여주는 자세한 정보들이다.

• 00.00 밀리초에 대기열에 추가됨(Queued at 00.00s): 개발자 도구를 켠 순간부터 큐(대기열)에 적재되는데 까지 걸리는 시간
• 00.00 밀리초에 시작함(Stated at 00.00s): 개발자 도구를 켠 순간부터 request를 보내는데 까지 걸리는 시간
• (Queueing): 구문을 분석한 시적에서 대기열에 적재되어 있는 시간.
• 중단됨(Stalled): 큐(대기열)에서 request를 보내는동안 정지되어 있는 시간
• (Proxy negotiation): 브라우저가 프록시 서버로 요청을 보내는데까지 걸리는 시간
• (Waiting(TTFB)): response에 첫번째 바이트가 도달하는데 까지 걸리는 시간
  - TTFB = Time To First Byte
• 컨텐츠 다운로드(Contents Download): 컨텐트가 다운로드 되는데까지 기다린 시간
• 설명(Explanation): 총 소요된 시간

2-2. Network 탭 하단

마지막으로 네트워크 탭의 최하단부이다.

• DOMContentLoaded: Waterfall에서 파란색 선으로 표시가 되는 부분으로, DOM Tree를 그리는데 걸리는 시간을 나타낸다.
• 로드(Load): Waterfall에서 빨간색 선으로 표시가 되는 부분으로 DOM Tree 구조를 포함하여, 이미지까지 화면에 로드되는 시간이다.

3. 참고!

3-1. XHR(XMLHttpRequest)

XMLHttpRequest객체는 서버와 상호작용하기 위해 사용되며 전체 페이지의 새로고침 없이도 URL로부터 데이터를 받아올 수 있게 해준다.
웹페이지가 사용자가 하고 있는 것을 방해하지 않으면서 페이지의 일부를 업데이트 할 수 있도록 해주며 주로 AJAX프로그래밍에 주로 사용된다.
XHR은 이름만 봐서는 XML만 받아올 수 있을 것 같지만, 모든 종류의 데이터를 받아오는데 사용이 가능하며 HTTP이외의 프로토콜도 지원한다(file, ftp포함)

3-2. Fetch

Fetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공한다. Fetch API가 제공하는 전역 fetch() 메소드로 리소스를 쉽게 비동기적으로 가져올 수도 있다.
이전에는 XHR을 통해 사용할 수 있었으나 Fetch는 더 좋은 대체제이면서, 서비스 워커 등 다른 기술에서도 쉽게 사용할 수 있는 API이다. 또한 CORS와 같이 HTTP와 관련된 다른 개념들을 한 곳에 모아 정의할 수 있는 논리적인 장소도 제공한다.

자료출처:
1. https://velog.io/@te-ing/%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%8F%84%EA%B5%AC-Network%ED%83%AD-%EC%B4%9D%EC%A0%95%EB%A6%AC
2. MDN
3. https://inpa.tistory.com/entry/%F0%9F%92%BB-%ED%81%AC%EB%A1%AC-%EA%B0%9C%EB%B0%9C%EC%9E%90-%EB%8F%84%EA%B5%AC-F12-%F0%9F%94%8D-%ED%99%9C%EC%9A%A9%EB%B2%95-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-Elements%ED%8E%B8#%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC_%ED%83%AD