Chrome DevTools

디버깅(Debugging)

프론트엔드 개발에서 디버깅은 코드 작성만큼이나 중요한 작업입니다.

단순히 문법 오류만 잡는 것이 아니라, 컴포넌트의 상태 변화, 비동기 흐름, 스타일 겹침, 네트워크 지연, 스토리지 꼬임 등 예상하지 못한 여러 상황을 파악하고 해결해야 합니다.

이때 사용하는 가장 강력한 도구가 바로 Chrome DevTools입니다.

단순한 HTML/CSS 편집 도구로만 인식하는 경우가 많은데, 사실 DevTools는 다음과 같은 기능을 제공합니다

• DOM & 스타일 실시간 조작
• 자바스크립트 코드 흐름 추적 및 중단점 디버깅
• 비동기 콜백과 Promise 디버깅
• API 요청 및 응답 데이터 확인
• 브라우저 저장소(LocalStorage, 쿠키 등) 점검
• 렌더링 성능 확인
• 메모리 누수 추적

 

---

Elements 패널 – HTML & CSS 실시간 조작

주요 기능

• 현재 페이지의 DOM 구조 탐색 및 실시간 수정
• 클래스 추가/삭제, 스타일 즉시 변경 가능
• :hover, :focus, :active 상태 강제 적용 (상단 [ :hov ] 버튼)
• Box Model 구조 시각화 (Padding, Border, Margin 등)

활용 예시

• 요소가 클릭되지 않을 경우 → z-index, position, pointer-events 속성 체크
• 잘린 텍스트 → overflow, white-space, text-overflow 속성 실험
• 특정 폰트 적용 확인 → font-family 변경해서 즉시 확인 가능
• 자주 쓰는 요소를 Store as global variable로 $temp1 같은 전역 변수로 지정해 Console에서 바로 접근 가능
• copy selector 기능을 통해 정확한 CSS 셀렉터를 복사할 수 있음

 

---

Console 패널 – 로그와 에러

주요 기능

• 런타임 에러 로그 확인
• console.log, console.table, console.dir, console.trace 지원
• $0 ~ $4: Elements에서 선택한 최근 5개의 요소 접근 가능
• $_: 최근 평가된 표현식 결과 접근 가능

활용 예시

console.table(users);
console.dir(document.body);
console.trace('함수 호출 위치 추적');

• 콘솔에서 함수 직접 호출해서 디버깅 가능 (예: fetchData(1))
• 특정 변수 변경도 가능: window.count = 100
• 콘솔 필터 사용 (Errors, Warnings, Logs, Info, Verbose)
• 특정 키워드만 필터링해서 로그 보기
• Preserve log를 켜면 페이지 이동 시에도 로그 유지됨

 

---

Sources 패널 – JS 디버깅의 핵심

주요 기능

• 파일 구조 탐색 (좌측 파란색 탐색기)
• 브레이크포인트 설정 (라인 번호 클릭)
• Call Stack, Scope, Watch 탭을 통한 코드 흐름 파악
• Live Edit 지원 (코드를 직접 수정하고 적용 가능)
• Blackboxing 기능 (라이브러리 코드를 디버깅 제외)

브레이크포인트 종류

• 일반 브레이크포인트
• 조건부 브레이크포인트
• DOM 변경 브레이크포인트
• XHR/Fetch 요청 브레이크포인트
• 이벤트 리스너 브레이크포인트 (예: click, input, keypress)

디버깅 예시

function fetchUser() {
  fetch('/api/user')
    .then(res => res.json())
    .then(data => {
      console.log(data); // 브레이크포인트 위치
    });
}

• 이 위치에 브레이크포인트 설정 후, 응답 데이터 확인
• Scope에서 data 값 직접 확인 및 조작 가능
• Call Stack으로 호출 경로 추적
• Watch에서 data.name 등 실시간 확인 가능

 

---

 

 

Network 패널 – API 요청 및 리소스 추적

주요 기능

• XHR, fetch, script, font, image 등 모든 요청 확인
• Request, Response, Header, Preview 탭으로 요청/응답 파악
• 요청 상태, 시간, Content-Type 등 정보 확인

활용 예시

• API 호출이 실패할 경우, 응답 본문에서 에러 메시지 확인
• 요청 파라미터(body, query string) 확인
• CORS 이슈, 토큰 만료 등 실시간으로 파악 가능
• GraphQL 요청도 Preview 탭에서 query/mutation 확인 가능
• 필터에 fetch, XHR 입력해 API 요청만 확인
• 느린 로딩 문제 분석 시 Waterfall 보기 추천
• Disable cache 활성화하면 항상 새 요청 보냄

 

 

---

 

Application 패널 – 스토리지와 캐시 분석

 

주요 기능

• LocalStorage, SessionStorage, Cookies, IndexedDB 탐색 및 조작
• Service Worker 등록 여부 확인
• Cache Storage에 있는 정적 자원 확인 가능
• Manifest.json 정보 및 앱 설치 여부 확인

활용 예시

• LocalStorage에 저장된 JWT 토큰 확인 및 제거
• 세션 정보가 꼬였을 때 Storage 전체 초기화로 해결
• Service Worker 등록 실패 시 에러 로그 확인 가능
• 오프라인 디버깅 가능: Service Worker & Cache 사용 확인
• 쿠키 설정이 만료되었거나 도메인 제한된 경우 문제 발생 가능

 

---

 

 

 

디버깅 예제 – useEffect 무한 루프 잡기

useEffect(() => {
  fetchUser();
}, [user]);

• 위 코드는 user가 변경될 때마다 fetchUser를 호출합니다.
• 문제는 fetchUser 내부에서 setUser를 다시 호출한다면, 무한 루프가 발생합니다.

디버깅 절차

1. Sources 패널에서 fetchUser() 내부에 브레이크포인트 설정
2. Watch 패널에서 user 상태 값 확인
3. Call Stack에서 fetchUser → setUser → useEffect → fetchUser 루프 확인
4. Network 탭에서 요청이 일정 간격으로 반복됨을 확인 → 무한 루프 추정

해결 방법: 의존성 배열에 user 대신 필요한 최소 상태값만 포함하거나, useRef를 활용해 최초 1회만 실행되도록 조정