BROWSER DEVTOOLS

브라우저 개발자 도구 증거

DevTools를 열었다는 것만으로 디버깅이 되지는 않는다. 렌더가 이상하면 Elements와 Computed, 요청이 실패하면 Network, 느리면 Performance, 저장 상태가 의심되면 Application, JavaScript 오류는 Console과 Sources를 연결해서 봐야 한다.

01

증상 분류

화면 깨짐, 요청 실패, 느린 반응, 저장 문제, JS 오류 중 어느 문제인지 먼저 나눈다.

탭을 돌아다니기 전에 질문을 좁힌다
02

DOM과 스타일 확인

Elements에서 실제 DOM과 Computed style, box model을 확인한다.

소스 코드와 실제 DOM은 다를 수 있다
03

Network 분석

status, method, request payload, response, timing, cache hit 여부를 본다.

CORS와 404, 500을 구분한다
04

Performance 기록

사용자 행동을 녹화해 scripting, rendering, painting, long task를 확인한다.

느낌보다 timeline이 정확하다
05

저장소와 SW 확인

쿠키, localStorage, IndexedDB, Cache Storage, Service Worker 상태를 본다.

오래된 캐시가 버그처럼 보일 수 있다
Elements
DOM과 CSS 요소 구조, 적용 selector, box model, 접근성 트리를 확인한다.
겹침과 overflow를 찾는다
Network
요청과 응답 headers, payload, timing, cache, preview로 통신 문제를 본다.
disable cache 조건을 구분한다
Performance
시간축 분석 long task, layout, paint, LCP, interaction 지연을 기록한다.
재현 절차가 중요하다
Application
브라우저 저장 상태 쿠키, storage, service worker, cache를 확인하고 삭제해 재현한다.
로그아웃과 캐시 문제가 여기서 보인다

디버깅 확인

재현 절차 문제를 발생시키는 클릭과 입력 순서를 먼저 고정한다.
증거 캡처 오류 메시지, 요청 ID, timing, DOM 상태를 함께 남긴다.
캐시 분리 캐시 사용 상태와 비활성화 상태에서 결과가 다른지 확인한다.