library

크롬 DevTools에서 알아 두면 디버깅 시간이 줄어드는 기능 모음. 대부분 다른 크로미움(Chromium) 브라우저에서도 같다.

요소(Elements)

Cmd+Shift+C(Windows Ctrl+Shift+C)로 화면에서 요소를 바로 고른다
고른 요소는 콘솔에서 $0, 그 전에 골랐던 것들은 $1~$4로 참조한다. 예: 동영상 요소를 골라 $0.playbackRate = 2로 재생 속도 바꾸기
스타일 패널의 +로 임시 스타일시트를 만들어 * { outline: 1px solid red }를 넣으면 모든 상자의 경계가 보인다
Computed 탭에서 최종 적용된 값과 그 값을 준 규칙을 찾는다. 글꼴이 여러 개 지정됐을 때 실제 렌더링된 폰트도 여기서 확인한다 → CSS 캐스케이드
flex·grid 컨테이너 옆 배지를 누르면 Flexbox·CSS Grid 오버레이와 속성 편집기가 뜬다
요소 우클릭: 전역 변수로 저장, 노드 스크린샷, 하위 노드 전부 펼치기

스로틀링(Throttling)으로 느린 네트워크를 흉내 낸다. "Disable cache"로 캐시 없이 테스트한다
필터에 status-code:404, method:POST, domain: 같은 키워드를 쓰고, 앞에 -를 붙이면 제외한다
요청 우클릭 → Copy as cURL / Copy as fetch로 같은 요청을 터미널이나 콘솔에서 다시 보낸다. 백엔드에 재현 방법을 넘길 때 좋다
표 머리 우클릭으로 Path 열을 켜면 파일 전체 경로가 보인다

다른 탭에서 Esc를 누르면 콘솔이 아래 서랍으로 뜬다
$('sel'), $$('sel')은 querySelector, querySelectorAll의 단축이다
console.log({ x, y })처럼 객체로 감싸면 변수 이름이 함께 찍힌다. console.table(arr, ['col'])은 표로 보여 준다
console.log('%c강조', 'color: orange; font-size: 2em')처럼 %c 뒤에 CSS를 주면 스타일이 입혀진다. %c마다 인자를 하나씩 받는다
console.dir(el)은 DOM(Document Object Model) 요소를 HTML 트리가 아닌 JS(JavaScript) 객체(속성 목록)로 보여 준다. console.log(el)은 요소 트리로 보여 준다
Preserve log를 켜면 페이지를 이동해도 로그가 남는다. Live expression(눈 아이콘)으로 값을 계속 지켜본다
iframe 안을 디버깅할 때는 콘솔 위 컨텍스트 선택기에서 iframe을 고른다
document.designMode = 'on'이면 페이지 글자를 바로 고쳐 볼 수 있다

Performance 패널의 CPU(Central Processing Unit) 스로틀링으로 저사양 기기를 흉내 낸다. 보라색 Layout 블록의 "Forced reflow" 경고로 레이아웃 스래싱을 찾는다
Rendering 패널의 Paint flashing으로 다시 칠하는 영역을, Frame Rendering Stats로 FPS(Frames Per Second)를 실시간으로 본다
Coverage 탭으로 쓰이지 않는 JS·CSS를 찾는다 → 번들 크기 줄이기
Cmd+Shift+P 명령 메뉴에서 대부분의 기능을 이름으로 찾을 수 있다. 기기 모드에서 "Capture full size screenshot"으로 페이지 전체를 캡처한다