디버깅 근거 확인 흐름

DevTools 증거 비교

Network, Performance, Memory 탭은 각각 요청, 런타임 비용, 남아 있는 객체를 확인하는 도구입니다.

데이터가 비거나 다름

서버 통신 이후 화면 상태가 예상과 다릅니다.

Network

Headers, Payload, Response, Timing을 요청 단위로 봅니다.

확인 증거

상태 코드, 보낸 값, 실제 응답 본문, 느린 구간을 비교합니다.

스크롤과 입력이 끊김

렌더링과 자바스크립트 실행 비용이 섞여 보입니다.

Performance

기록 후 Long Task, Layout, Paint, 프레임 드롭을 봅니다.

확인 증거

긴 함수 호출, 반복 레이아웃, 특정 사용자 행동의 비용을 찾습니다.

오래 켜두면 느려짐

가비지 컬렉션 뒤에도 객체가 남아 있을 수 있습니다.

Memory

Heap snapshot과 Allocation timeline으로 보존 객체를 봅니다.

확인 증거

이벤트 리스너, DOM 참조, 캐시 객체가 계속 증가하는지 확인합니다.