개발자 도구: DevTools 열기 및 사용

모든 최신 브라우저에는 개발자 도구가 기본으로 포함되어 있습니다. DevTools를 사용하면 브라우저를 벗어나지 않고 HTML과 CSS를 검사하고, JavaScript를 디버깅하고, 성능을 분석하고, 네트워크 요청을 모니터링하는 등 다양한 작업을 할 수 있습니다.

F12(Windows/Linux) 또는 Cmd+Option+I(Mac)를 눌러 DevTools를 여세요. 요소를 마우스 오른쪽 버튼으로 클릭한 다음 검사를 선택해도 됩니다. Ctrl+Shift+J / Cmd+Option+J 단축키를 사용하면 바로 콘솔이 열립니다.

요소 패널에는 실시간 DOM 트리가 표시됩니다. 요소를 클릭하여 선택하면 스타일 창에서 계산된 스타일을 확인할 수 있습니다. HTML이나 CSS 값을 두 번 클릭하여 실시간으로 편집할 수도 있습니다. 변경 사항은 즉시 적용되지만 파일에는 저장되지 않습니다.

스타일 창에서 속성 값을 클릭하여 변경하세요. + 버튼으로 새 규칙을 추가할 수 있습니다. 전환 확인란을 사용하면 규칙을 비활성화할 수 있습니다. 편집기로 전환하지 않고 CSS의 시안을 만드는 가장 빠른 방법입니다.

콘솔에는 기록된 메시지와 경고, 오류가 표시됩니다. JavaScript를 직접 입력하고 실행할 수도 있습니다. 디버깅 중 데이터를 출력할 때는 console.log(), console.warn(), console.error(), console.table()을 사용하세요.

네트워크 패널에는 페이지가 보내는 모든 HTTP 요청이 표시됩니다. 요청을 선택하면 헤더를 확인하고, 응답 본문을 미리 보고, 시간별 폭포형 내역을 확인할 수 있습니다. 유형별로 필터링할 수도 있습니다: XHR/Fetch, JS, CSS, 이미지, 글꼴.

각 요청에는 대기열에 추가됨, DNS 조회, 초기 연결, SSL, 요청 전송, 대기(TTFB), 콘텐츠 다운로드가 표시됩니다. TTFB(첫 바이트까지 걸린 시간)는 서버 응답 시간을 나타냅니다.

네트워크 패널의 속도 제한 드롭다운을 사용하여 느린 3G 환경이나 오프라인 상태를 시뮬레이션하세요. 빠른 광대역 환경에서는 보이지 않는 성능 문제를 발견하고, 연결 상태가 좋지 않은 사용자에게도 작동하는 경험을 만드는 데 도움이 됩니다.

기기 아이콘(Ctrl+Shift+M / Cmd+Shift+M)을 클릭하여 기기 모드로 들어가세요. 모바일 뷰포트와 DPR, 터치 이벤트, 네트워크 환경을 시뮬레이션할 수 있습니다. iPhone 14와 같은 사전 설정을 선택하거나 너비를 직접 지정할 수 있습니다.

소스 패널에서는 JavaScript 파일을 읽고 중단점을 설정할 수 있습니다. 중단점은 실행을 일시 중지하므로 변수 값과 호출 스택을 확인하고, F10(프로시저 건너뛰기)과 F11(프로시저 안으로 들어가기)을 사용하여 코드를 한 줄씩 살펴볼 수 있습니다.

Sources에서 줄 번호를 클릭하여 중단점을 추가하세요. 실행이 일시 중지되면 변수 위에 마우스를 올려 값을 확인하거나 Console에 변수를 입력하세요. 호출 스택 창에서 이 지점까지 실행을 이끈 함수가 무엇인지 확인하세요.

페이지가 보내는 모든 HTTP 요청과 각 요청의 상태 코드 및 응답 시간을 보여 주는 DevTools 패널은 무엇인가요?

요소: 실시간 DOM을 검사하고 편집합니다. 콘솔: log하고 JavaScript를 실행합니다. 네트워크: HTTP 통신을 모니터링합니다. 소스: 중단점을 설정하고 디버깅합니다. 기기 모드: 반응형 레이아웃을 테스트합니다. 이 네 패널을 능숙하게 다루면 디버깅 작업 흐름이 크게 달라집니다.