[etc] 크롬 개발자 도구

유재민·2021년 12월 31일
0

크롬 개발자 도구

개발자 도구는 브라우저에 제공하는 하나의 도구이다. 웹 사이트를 즉각적으로 수정하고 문제 발생시 원인을 파악하여 빠른 속도로 더 나은 사이트를 만들수 있도록 도와준다.

  • Elements
  • Console
  • Sources
  • Network
  • Performance
  • Memory
  • Application
  • Security
  • Lighthouse

주요 패널로는 Elements, Console, Sources, Network, Application 등이 있다.

#1 Elements

  • HTML이 어떻게 이루어졌는지 DOM트리 구조를 확인할 수 있다.
  • HTML과 CSS를 수정해보며 디버깅 할 수 있다.
  • Styles탭에 CSS 적용순서는 상단에서 하단의 순서로 적용된다.
  • User agent stylesheet : 브라우저의 기본 속성값으로 Chrome, Safari,IE 등 브라우저의 종류에 따라 다르게 적용되어있다.

#2 Console

  • Javascript 파서를 통해 즉시 실행하며 로그에 찍어보며 디버깅 할 수 있다.
  • 다른 패널에서 console패널을 함께 사용하려면 esc키를 누르면 된다.
  • console setting에 preserve log upon navigation을 체크하여 콘솔이 지워지지 않게 유지할 수 있다.

#3 Sources

  • Javascript 코드 트래킹 포함 디버깅 용도로 사용한다.
  • Breakpoint를 설정할 수 있다. 또한 Elements탭과 연계하여 DOM breakpoint를 설정할 수도 있고 Console과 연계하여 breakpoint에서 변수 등을 확인하고 변경해보는 등 작업을 수행할 수 있다.
  • Page : 현재 페이지에 로드된 파일 목록을 표시한다. 기울어진 파일 이름은 해당 파일이 컴파일된 소스로부터 소스맵을 통해 매핑된 파일임을 나타낸다.
  • Filesystem : 로컬 디스크의 소스 위치를 지정하면 현재 페이지에 로드된 파일과 매칭하여 디버깅이 가능할 뿐 아니라 바로 편집하는 것도 가능하다. 아이콘의 초록 점은 해당 소스 파일이 소스맵을 통해 매핑된 파일임을 나타낸다.
  • Snippet : GitHub Gist와 같이 코드 조각을 크롬에 저장하고 반복적으로 사용할 수 있다. 이 내용은 크롬에 연결된 사용자 별로 저장되므로 , 서로 다른 사이트에서도 같은 코드 조각 목록을 사용할 수 있다.
  • Watch : 중단점에서 지정된 변수의 값을 출력한다.
  • Call Stack : 현재 중단된 지점이 어떤 함수 호출을 통해 온 것인지 확인할 수 있다.
  • Scope : 지정된 범위에 포함된 변수를 확인할 수 있다. 지역 변수와 전역 변수 외에도 현재 중단점의 클로저 변수도 확인할 수 있어 유용하다.
  • Breakpoint : 설정된 중단점의 목록을 표시한다. 체크 박스를 해제하면 일시적으로 해당 중단점을 사용하지 않게 할 수 있다. 우클릭을 통해 컨텍스트 메뉴를 호출하여 모든 중단점을 지우거나 비활성화 시키는 등의 작업을 수행할 수 있다.

#4 Network

  • http 네트워크 통신 확인한다.
  • API 크롤링, 페이지 로딩 성능을 테스트한다.
  • 이미지, 영상 등의 소스(mock data 활용)를 가져온다.
  • XHR브라우저와 서버가 HTTP통신 할 때 request 전문이 어떻게 구성되어 서버로 전달 되는지, 서버로 부터 요청에 따른 response 결과를 확인할 때 사용한다. 보통 header > preview로 에러 확인이 가능하다.
  • Name : 리소스의 이름과 URL이 표시된다.
  • Status : 작동 여부를 숫자로 표시하여 오류를 확인하는 기능의 탭이다. (200 : 정상작동 / 304 : Not modified 등)
  • Type : 파일의 형식 (.html / .js 등의 형식)을 볼 수 있는 곳이다.
  • Initiator : Initiator 열의 링크를 클릭하면 요청을 발생시킨 소스 코드로 이동한다.
  • Size : 각 리소스들의 파일 사이즈를 확인할 수 있다.
  • Time : 웹페이지(클라이언트)가 요청하고, 서버가 응답하는 것 까지의 걸린 시간을 확인할 수 있다.
  • Waterfall : 타임라인의 세부 정보를 알려주는 곳이다.

상단 체크박스를 통해 아래와 같은 기능도 가능하다.

  • 캐시 사용안함 (Disable cache)
    캐시를 사용하지 않을 경우 어떻게 네트워크 요청이 이뤄지는지 확인해볼 수 있다.
  • 오프라인 (Offline)
    네트워크가 연결되지 않은 상태를 가정하여 페이지를 표시한다. 오프라인 웹 앱을 구성할 때 사용한다.
  • 트래픽 조절 (Throttling)Preset
    느린 네트워크 상황을 가정하여 페이지를 표시한다. Fast 3G / Slow 3G 등의 프리셋이 있으며, 원하는 속도와 지연 시간을 지정하여 사용할 수도 있다. 개발할 때 자주 이 기능을 활성화 하여 테스트 해보는 것을 추천한다.

#5 Application

  • 저장소의 기능을 한다.
  • HTTP프로포콜의 특징은 클라이언트가 서버에 요청 후 응답 받은 뒤 상태정보를 유지하지 않는 것인데 그러한 단점을 보완하고자 쿠키, 웹스토리지를 사용한다.
  • 쿠키(Cookie), 웹 스토리지(Web Storage)로 나뉘며 웹스토리지는 로컬스토리지(Local Storage), 세션스토리지(Session storage)로 나뉜다.


참고자료
1. 크롬 개발자도구 활용하기
2. Network 패널에 대해 공부해보자
3. 크롬 개발자 도구 101

profile
프론트엔드 개발자

0개의 댓글

관련 채용 정보