크롬 개발자 도구
개발자 도구는 브라우저에 제공하는 하나의 도구이다. 웹 사이트를 즉각적으로 수정하고 문제 발생시 원인을 파악하여 빠른 속도로 더 나은 사이트를 만들수 있도록 도와준다.
- 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
프론트엔드 개발자