DevTools

패널 고르기: 지금 답해야 할 질문을 기준으로

화면이 이상한지, 요청이 느린지, 스크립트가 멈추는지, 캐시가 꼬였는지에 따라 처음 열 패널이 달라집니다.

DOM

Elements

렌더링된 구조, 스타일 충돌, Hydration 후 DOM 차이를 확인합니다.

Request

Network

상태 코드, 응답 시간, payload, 캐시 여부로 API와 리소스 문제를 좁힙니다.

Runtime

Sources

브레이크포인트, scope, call stack으로 상태 변경과 함수 호출 순서를 추적합니다.

증상

문제를 한 문장으로 적습니다.

패널

답할 질문에 맞게 엽니다.

증거

로그와 요청을 캡처합니다.

수정

변경 후 같은 패널에서 확인합니다.