[개발자 도구] Chrome 개발자 도구 사용법

개발자도구의 구성

탭 : 개발자 도구에서 사용할 수 있는 주요 기능 탭 

Main 패널 : 주요 기능 탭이 바뀔 때마다 해당 기능으로 채워짐

Drawer 패널 : 주요 기능이 아닌 부가 기능이나 정보를 보여주는 영역 

---

Elements 

html 및 css 코드 분석 및 실시간 수정 가능 

쿼리의 요소를 자식으로 드래그해서 자식으로 변경하는 것도 가능

elements 의 디버깅 검사 가능 

예) DOM breakpoints 에 엘리먼트를 변경시키는 (필요없다고 판단되는) 요소를 추가시켜 실행

     마우스 우클릭 → break on → attribute modifications → DOM breakpoints 에 추가

 

---

Console

clear : 모든 기록을 지움

컨텍스트 선택 영역 : 페이지의 프레임을 바꿔가면서 콘솔을 확인하는 기능

Live Expression 생성 : 개발 도중 어떤 값을 지속적으로 확인하고 싶을 때 사용 (단, 전역에서 접근 가능할 때만 가능함) 

Filter 영역 : 로그를 텍스트로 검색할 수 있음

Level 필터 영역 : 로그의 레벨을 Errors, Warnings, info, Verbose 등으로 셀렉트 해서 조회 가능함

설정 : 비슷한 옵션을 그룹화하거나 네트워크 옵션을 선택할 수 있음

---

Sources

자바스크립트, CSS, 이미지 파일등을 살펴볼 수 있음

Page : 페이지에 로드 된 모든 리소스를 폴더 & origin 으로 묶어서 볼 수 있음

Filesystem : 로컬 시스템에 저장 된 파일을 해당 영역에 불러오면, 간단하게 코드를 수정하고 저장할 수 있음

Overrides : 새로고침 이후에도 개발자 도구의 수정 사항을 기억해둠

---

Network

페이지의 요청과 응답을 확인할 때 사용

 

Recording : 주고 받은 요청과 응답을 기록하는 버튼 

clear : 모든 기록을 지움

Filter : 각 요청을 타입이나 url 별로 필터링 

Preserve log : 페이지를 이동해도 기록이 저장됨 (기본적으론 꺼져있음)

Disable cache : 브라우저 캐시의 비활성화 기능. 

해당 기능을 킬 경우, 항상 서버로부터 모든 리소스를 내려받아 최신 리소스를 유지하게 됨

(단, 개발자도구가 켜져있을 경우에만)

Network Emulation : 네트워크 연결상태를 emulating. 

---

Performance : 웹 서비스의 전반적인 성능 측정

Memory : 메모리 사용 및 누수탐지 

Application : 웹 페이지에 사용된 리소스를 검사

---

해당 포스트는 NHN cloud 님의 유튜브를 참고로 하여 작성하였습니다.