크롬 개발자 도구 실습 가이드

by

크롬 개발자 도구 Elements(요소) 탭 실습 가이드

웹 개발을 하면서 페이지의 HTML과 CSS를 실시간으로 수정하고, 디버깅하는 방법을 배우는 것은 매우 중요합니다. 크롬 개발자 도구(DevTools)의 Elements(요소) 탭을 활용하면 코드 변경 사항을 실시간으로 확인하고, 디자인을 조정할 수 있습니다. 이 가이드를 따라 단계별로 실습해 보세요! 🚀

1. 개발자 도구 열기

1.1 크롬 개발자 도구 실행 방법

  1. 실습할 웹페이지를 엽니다. (예제: Wikipedia)
  2. 크롬 개발자 도구를 여는 방법:
    • 단축키: F12 또는 Ctrl + Shift + I (Cmd + Option + I on Mac)
    • 우클릭 → “검사(Inspect)” 클릭

2. HTML & CSS 실습

2.1 요소 선택 및 수정

  1. Elements 탭을 선택합니다.
  2. 특정 요소(예: <h1> 제목)를 우클릭 → “검사(Inspect)” 클릭.
  3. 해당 HTML 요소가 강조됩니다.
  4. 요소 텍스트 수정:
    • <h1> 요소를 더블 클릭 → “Hello DevTools!”로 변경 후 Enter.
    • 변경 사항이 실시간으로 반영되는지 확인하세요.
  5. 새로운 요소 추가:
    • <h1>을 우클릭 → “Edit as HTML” 클릭.
    • 아래 코드를 추가 후 Enter: 
      <p style="color: blue;">개발자 도구 실습 중입니다.</p>
    • 페이지에서 새로운 텍스트가 추가됨을 확인하세요.

2.2 CSS 스타일 수정

  1. Styles 패널에서 선택한 요소의 CSS를 변경할 수 있습니다.
  2. 텍스트 색상 변경:
    • color: blue; → color: red;로 변경 후 Enter
    • 텍스트 색상이 빨간색으로 변경됨을 확인.
  3. 새로운 스타일 추가:
    • element.style 섹션을 클릭하고 아래 코드 추가: 
      font-size: 20px;
font-weight: bold;
background-color: yellow;
    • 스타일이 적용되는지 확인하세요.
  4. Box Model 실습:
    • margin, padding 값을 클릭하여 숫자를 변경해 보세요.
    • 값이 즉시 반영되는 것을 확인하세요.

2.3 강제 상태 적용 (Hover, Focus 등)

  1. 버튼 요소를 선택합니다.
  2. :hov 버튼 클릭 → :hover 체크.
  3. hover 상태가 적용되는 것을 확인!

3. JavaScript Console 실습

3.1 DOM 조작

  1. Console 탭을 열어줍니다.
  2. 다음 코드를 실행하여 <h1> 요소의 텍스트 변경: 
    document.querySelector("h1").innerText = "개발자 도구 실습 완료!";
  3. 색상 변경: 
    document.querySelector("h1").style.color = "green";

3.2 요소 조작

  1. 마지막으로 선택한 요소를 $0을 이용해 가져오기: 
    console.log($0);
  2. 배경색 변경: 
    $0.style.backgroundColor = "lightgray";

4. 네트워크 요청 확인 및 API 실습

4.1 API 요청 확인

  1. Network 탭 열기 (F12 → Network 선택).
  2. 페이지 새로고침 (Ctrl + R 또는 Cmd + R).
  3. XHR 또는 Fetch/XHR 필터 적용하여 API 요청만 확인.

4.2 API 요청 재전송

  1. 특정 요청을 우클릭 → “Replay XHR” 선택.
  2. 동일한 API 요청이 다시 실행됨을 확인하세요.

5. Sources 탭에서 디버깅 실습

5.1 JavaScript 코드 실행 중단 (Breakpoint 설정)

  1. Sources 탭 열기.
  2. Page 섹션에서 .js 파일 선택.
  3. 특정 줄 번호 클릭 → Breakpoint 추가.
  4. 페이지 새로고침 시 해당 코드에서 실행 중단됨을 확인하세요.

5.2 Event Listener 디버깅

  1. 버튼 요소 선택 후 “Event Listeners” 패널 클릭.
  2. click 이벤트를 찾고 실행 코드 확인 가능.

6. Performance & Application 실습

6.1 웹 성능 분석

  1. Performance 탭 열기.
  2. “Start Profiling” 클릭 후 웹사이트에서 스크롤 등 액션 수행.
  3. “Stop” 클릭 후 성능 분석 결과 확인.

6.2 Local Storage 데이터 저장

  1. Console에서 실행: 
    localStorage.setItem("username", "홍길동");
  2. Application → Storage → Local Storage에서 값 확인.

7. 디버깅 챌린지 (문제 해결)

Q1. hover 없이 버튼을 초록색으로 유지하는 방법은?

  • (힌트: :hov 강제 적용 또는 Styles 패널에서 hover 스타일 직접 수정)

Q2. 특정 API 요청을 수정하여 새로운 데이터를 요청하는 방법은?

  • (힌트: Network → Copy as Fetch 후 Console에서 실행)

Q3. 특정 요소가 삭제될 때 자동으로 디버깅하는 방법은?

  • (힌트: “Break on…” 기능 활용)

🔍 결론

이 실습을 통해 HTML/CSS 편집, JavaScript 디버깅, API 분석, 성능 최적화 등 크롬 개발자 도구의 핵심 기능을 익힐 수 있습니다. 실전에서 직접 활용해 보세요! 🚀

 

Leave a Comment