DevTools

브라우저 DevTools 문제 분리

화면이 이상할 때 Elements, Console, Network, Performance 탭을 나누어 보면 원인을 빠르게 좁힐 수 있다.

디버깅 탭 선택

browser debug

Elements

렌더링된 HTML 구조와 실제 적용된 CSS를 확인한다.

Console

런타임 오류, 경고, 직접 실행한 로그를 확인한다.

Network

API 요청 상태, 응답 시간, 캐시 여부를 추적한다.

Performance

느린 렌더링이나 긴 작업을 시간축으로 분석한다.

inspectconsolenetworkprofile
디버깅 탭 선택

개발자 도구는 한 화면에서 다 보는 도구가 아니라, 증상 종류에 맞는 탭으로 원인을 좁히는 도구다.