Chrome 개발자 도구 설명서
신입사원이 Chrome 개발자 도구를 알려달라고 요청했다.
- 어디서부터 설명하지?
chrome 개발자 도구의 구성
탭 - Elements
개요
- 실시간 수정 기능
- Text
- Attribute, style
개발자 도구 콘솔에서 $0 ~ $4 까지해서 클릭한 element 들을 최근 클릭순으로 저장할 수 가 있다.
Element 안의 탭
영역 우클릭 Dom Break points
Element - Styles 탭 (강추 ) 근데 많이 아는 기능이랄까
Console 탭
Clear 버튼
select 버튼
개발 도중에 Live Expression 생성 버튼으로 어떤 값을 지속적으로 감시 가능
레벨 필터 영역 지정 가능
설정버튼으로 네트워크 로그를 숨기거나 다양한 옵션을 볼 수가 있다.
Source 탭
그 소스를 어디에 뒀더라..?
로드된 자바스크립트, CSS 등등 페이지에 로드된 리소트 탐색.
폴더 & Origins 으로 묶어서 볼 수가 있음
Source - FileSystem
Source - Override (따봉기능) : 개발자 도구에서 일어난 코드의 변경사항을 새로고침 이후에도 유지할 수 있도록 저장
Source - Snippets : 자주 사용할 수 있는 코드 조각, 저장해두고 필요할 때마다 사용
Source - break point (따봉기능) conditional break point 로 표현식이 참일때만 bp 를 잡을 수 있다.
로그 포인트를 만나면 결과값을 콘솔에 출력해주기도함
소스탭은 주옥같은 기능이 많은데
Blackbox Script (따봉) - 디버깅할때 디버깅에 방해되는 라이브러리들은 Blackbox script 로 추가 우클릭으로 블랙박스 스크립트에 포함시켜주면 됨.
Source - Debugger 툴바
Source - Watch = break point 에서의 변수값
Source - XHR/fetch Breakpoint = 특정 URL 이 포함된 경우 XHR 이나 fetch 요청을 보낼때를 break point 로 잡을 수 있음
Source - EventListener BreakPoint = 특정 이벤트가 발생할 때 BP 발생
Network 탭
Disable Cache (항상 서버로 요청 ) (따봉)
그 옆의 Online - 셀렉트박스 = 네트워크 인프라 로딩이 나쁜 환경 테스트
Network 하단 상태 표시 바
Load Timing
Performance 탭
뭔가 느린듯한 느낌적인 느낌이 들 때
레코딩 버튼 - 성능 기록을 위한 버튼
새로고침 버튼 - Reload and Record 버튼
Clear 버튼 - 기록을 지워줌
영역
오버뷰 - 기록한 시간을 축으로
Frame Chart - 각 작업의 하위작업으로 나타내줌. 해당 작업의 상세 정보를 보여줌
Memory Profile- JS 메모리. Heap 메모리 영역까지 알려줌
Summary - 상세한 정보들을 표현해주는 영역. 각 작업의 수행시점에 대한 정보를 알 수가 있다.
Memory 탭
메모리 누수문제가 발생한 상황
HeapSnapshot - 페이지의 Js 객체와 관련된 DOM Node 사이의 Memory
Allocation instrumentation on timeline : 시간의 흐름에 따라 memory 누수를 동적으로 확인할 수가 있음
Allocation Sampling : 메모리 공간을 할당한 Js 함수를 보여줌
내 웹서비스의 성능은 괜찮은 편일까?
Light House탭
각종 검사 (성능, 접근성, Best Practice, SEO, PWA )
기타
개발자 도구 에서 ESC 누르면
특정 URL로의 요청을 막아주는 Request Blocking
재렌더링기능 깜박이게 해주는 기능
눈에 안 띄는 버튼 dock side - 점3개 쪽의 More tools
설정테마도 다크테마로 가능
Setting - Preference
Setting - Shortcut
커맨트쉬프트 P 윈도우에서는 컨트롤쉬프트P