크롬 개발자 도구(Chrome DevTools) 완벽 활용 가이드

by

크롬 개발자 도구(Chrome DevTools) 완벽 활용 가이드

웹 개발자라면 크롬 개발자 도구(Chrome DevTools)를 반드시 활용할 줄 알아야 합니다. 개발자 도구는 HTML/CSS 수정, JavaScript 디버깅, 성능 분석, API 요청 확인 등 다양한 기능을 제공합니다. 이번 글에서는 크롬 개발자 도구의 핵심 기능과 활용법을 자세히 알아보겠습니다.

1. 크롬 개발자 도구 열기

단축키로 빠르게 열기

  • Windows/Linux: F12 또는 Ctrl + Shift + I
  • Mac: Cmd + Option + I

우클릭으로 열기

  • 웹페이지에서 우클릭 → “검사(Inspect)” 선택
  • 특정 요소의 HTML/CSS를 바로 확인 가능

2. Elements 탭 (HTML & CSS 수정)

기능

  • 웹페이지의 HTML 구조 및 CSS 스타일 수정 가능
  • 레이아웃, 마진(margin), 패딩(padding) 등 확인
  • 클래스 추가 및 스타일 변경
  • 색상 피커(Color Picker) 사용 가능

활용법

  1. F12 또는 Ctrl + Shift + I로 개발자 도구 열기
  2. Elements 탭에서 마우스를 요소 위에 올려 확인
  3. HTML 요소 클릭 후 오른쪽 Styles 패널에서 CSS 수정
  4. 변경된 CSS는 페이지에서 바로 적용됨
  5. 우클릭 → “Copy → Copy Selector”로 특정 요소의 CSS 선택자 복사 가능

3. Console 탭 (JavaScript 디버깅)

기능

  • JavaScript 코드 실행 및 디버깅
  • 오류(Error) 메시지 확인 및 해결
  • DOM 조작 및 이벤트 확인 가능
  • console.log() 출력 확인

활용법

  1. Console 탭에서 다음 코드 실행: 
    console.log("Hello, DevTools!");
  2. 특정 요소의 텍스트 변경: 
    document.querySelector("h1").innerText = "개발자 도구 배우는 중!";
  3. 발생한 오류 메시지를 확인하고 클릭하면 상세 내용 확인 가능

4. Network 탭 (HTTP 요청 확인)

기능

  • 웹페이지의 모든 네트워크 요청(API, 이미지, CSS, JS 등) 확인
  • 백엔드와의 통신 디버깅 가능
  • 응답(Response) 및 요청(Request) 헤더 확인

활용법

  1. Network 탭에서 F5 또는 Ctrl + R로 새로고침하여 요청 확인
  2. 특정 요청 클릭 → Headers에서 요청 및 응답 정보 확인
  3. Preview에서 JSON 응답 데이터 확인
  4. API 요청만 보려면 Filter에서 XHR 또는 Fetch/XHR 선택
  5. 요청을 다시 실행하려면 Right Click → Replay XHR 선택

5. Sources 탭 (브레이크포인트 & 디버깅)

기능

  • JavaScript 코드 실행 흐름 추적
  • 브레이크포인트 설정으로 코드 실행 중지 및 디버깅
  • 변수 값 확인 및 수정 가능

활용법

  1. Sources 탭에서 .js 파일 클릭
  2. 특정 줄 번호를 클릭하여 브레이크포인트 설정
  3. 페이지 새로고침 시 해당 위치에서 코드 실행 멈춤
  4. Scope 패널에서 변수 값 확인 및 수정 가능

6. Application 탭 (쿠키 & 스토리지 관리)

기능

  • 쿠키(Cookies) 확인 및 수정
  • 로컬 스토리지(Local Storage) 및 세션 스토리지(Session Storage) 관리
  • 서비스 워커(Service Worker) 및 캐시 확인

활용법

  1. Application → Storage에서 Local Storage 선택
  2. 특정 값 추가: 
    localStorage.setItem("user", "홍길동");
  3. 페이지 새로고침 후 Local Storage에서 값 확인

7. Lighthouse 탭 (웹사이트 성능 분석)

기능

  • 성능(Performance), 접근성(Accessibility), SEO 점수 분석
  • 로딩 속도 최적화 추천 사항 제공

활용법

  1. Lighthouse 탭 이동
  2. “Generate Report” 클릭하여 분석 시작
  3. 성능(Performance), SEO 점수 및 개선 방법 확인

8. Performance 탭 (속도 최적화)

기능

  • 페이지 로딩 속도 및 렌더링 문제 분석
  • CPU 프로파일링 및 메모리 사용량 확인

활용법

  1. Performance 탭 열기
  2. “Record” 버튼 클릭 후 페이지 조작
  3. “Stop” 클릭 후 성능 분석 데이터 확인

9. Device Mode (모바일 화면 테스트)

기능

  • 다양한 모바일 기기 화면 크기 테스트
  • 반응형 웹 디자인 확인 가능

활용법

  1. 개발자 도구에서 Ctrl + Shift + M (Cmd + Shift + M on Mac)
  2. “Responsive”에서 기기 선택 (예: iPhone, Galaxy 등)
  3. 화면 크기 조정 후 반응형 UI 확인

💡 크롬 개발자 도구 활용 팁

✅ 단축키 사용

  • Ctrl + Shift + C (Cmd + Shift + C on Mac) → 요소 검사 모드
  • Ctrl + Shift + J (Cmd + Option + J on Mac) → Console 바로 열기
  • Ctrl + Shift + P (Cmd + Shift + P on Mac) → Quick Commands 실행

✅ 개발자 도구 설정 변경

  • Settings (F1)에서 다크 모드, 자동 새로고침 등 설정 가능

✅ API 요청 테스트

  • Network에서 요청을 Copy as fetch/XHR 후, Console에서 직접 실행 가능

✅ CSS 및 레이아웃 디버깅

  • Layout 패널에서 Flexbox/Grid 레이아웃 디버깅 가능

크롬 개발자 도구를 잘 활용하면 HTML/CSS 수정, API 디버깅, 성능 분석까지 쉽게 할 수 있습니다. 실습하면서 직접 사용해 보면 더욱 익숙해질 것입니다.

Leave a Comment