Chrome DevTools: Elements, Console, Network
Elements, Console, Network 패널을 탐색해 스타일을 검사하고 JavaScript 오류를 디버깅하며 HTTP 요청을 모니터링합니다.
Chrome DevTools: Elements, Console, Network은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
DevTools 효율적으로 열기
요소를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택하면 해당 요소가 선택된 상태로 DevTools가 열립니다. F12로 패널을 전환할 수 있습니다. Mac에서는 Cmd+Shift+C, Windows에서는 Ctrl+Shift+C를 누르면 전체 패널을 열지 않고 바로 검사 모드로 들어갑니다.
요소 패널 — DOM 검사기
요소 패널에는 원본 HTML 소스가 아니라 실시간으로 파싱된 DOM 트리가 표시됩니다. JavaScript로 수정한 내용도 반영됩니다. 노드 위에 마우스를 올리면 페이지에서 해당 노드가 강조 표시됩니다. 두 번 클릭하면 HTML을 인라인으로 편집할 수 있습니다.
스타일 및 계산된 값 창
요소를 선택하면 스타일 창에 적용된 모든 CSS 규칙이 명시도가 높은 순서로 표시됩니다. 취소선이 그어진 규칙은 다른 규칙에 의해 재정의된 것입니다. 계산된 값 창에는 모든 속성의 최종 계산값이 표시됩니다.
요소 상태 강제 적용
스타일 창의 :hov 버튼을 클릭하면 :hover, :focus, :active 또는 :visited와 같은 CSS 상태를 강제로 적용할 수 있습니다. 커서를 완벽하게 가만히 유지하지 않고도 마우스 오버 스타일을 검사할 수 있습니다.
박스 모델 시각화
계산된 값 창에는 콘텐츠, 패딩, 테두리, 여백을 보여 주는 대화형 박스 모델 다이어그램이 표시됩니다. 각 영역에 마우스를 올리면 값을 확인할 수 있습니다. 클릭하면 여백과 패딩 값을 실시간으로 편집할 수 있습니다.
콘솔 기초 — 로그 기록 및 코드 실행
콘솔에는 오류, 경고 및 로그가 표시됩니다. JavaScript 식을 입력하고 Enter를 누르면 실시간 페이지를 기준으로 평가됩니다. 콘솔을 대화형 REPL로 사용하여 코드 조각을 즉시 테스트할 수 있습니다.
// Examples to type in the Console:
document.title
document.querySelectorAll('a').length
['a','b','c'].map(x => x.toUpperCase())콘솔 API 메서드
console.log 외에도 console.warn()(노란색 경고), console.error()(빨간색 오류), console.table()(배열이나 객체를 표로 표시), 그룹화된 출력을 위한 console.group() / console.groupEnd(), 시간 측정을 위한 console.time()을 사용할 수 있습니다.
네트워크 패널 개요
모든 HTTP 요청(HTML, JS, CSS, 이미지, XHR, 가져오기)이 한 행으로 표시됩니다. 열에는 메서드, 상태, 크기 및 시간이 표시됩니다. 행을 클릭하면 전체 요청과 응답 세부 정보를 확인할 수 있습니다.
네트워크 요청 필터링
필터 막대를 사용하여 URL로 검색하거나 유형별로 필터링할 수 있습니다. 유형에는 모두, XHR/Fetch, JS, CSS, 이미지, 미디어, 글꼴, WS가 있습니다. JavaScript에서 발생한 API 호출을 디버깅할 때는 XHR/Fetch 필터가 가장 유용합니다.
요청 및 응답 검사
네트워크 요청을 선택하면 다음을 확인할 수 있습니다. 헤더(요청 및 응답), 미리보기(형식이 지정된 JSON/HTML), 응답(원본 본문), 시간(연결 단계)입니다. 페이로드 탭에는 POST 본문 매개변수가 표시됩니다.
속도 제한 — 느린 네트워크 시뮬레이션
속도 제한 드롭다운(기본값: 속도 제한 없음)을 클릭하면 느린 3G, 빠른 3G 또는 오프라인 상태를 시뮬레이션할 수 있습니다. 캐시 사용 안 함 확인란을 선택하면 테스트 중 브라우저가 캐시된 리소스를 사용하지 않습니다.
빠른 확인
선택한 요소에 적용된 모든 CSS 규칙과 재정의된 규칙을 확인할 수 있는 Chrome DevTools의 위치는 어디입니까?
요약: Chrome DevTools 패널
요소: 실시간 DOM과 CSS를 검사하고 편집합니다. 의사 상태를 강제로 적용하여 마우스 오버 스타일을 검사합니다. 콘솔: 실시간으로 JS를 기록하고 디버깅하며 실행합니다. 네트워크: 모든 HTTP 요청을 모니터링하고 헤더와 응답을 검사하며, 느린 연결을 시뮬레이션하도록 속도를 제한합니다.
자주 묻는 질문
“Chrome DevTools: Elements, Console, Network” 강의는 무료인가요?
네 — “Chrome DevTools: Elements, Console, Network” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“Chrome DevTools: Elements, Console, Network”에서 뭘 배우나요?
Elements, Console, Network 패널을 탐색해 스타일을 검사하고 JavaScript 오류를 디버깅하며 HTTP 요청을 모니터링합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Frontend Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“Chrome DevTools: Elements, Console, Network” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- Chrome DevTools: Elements, Console, Network
- VSCode: 확장 기능, Emmet, 단축키
- Prettier 및 ESLint 설정
- 브라우저 호환성과 caniuse.com