브라우저 개발자 도구로 디버깅하기

코드를 작성하면 반드시 버그가 생깁니다. 화면이 의도와 다르게 나오거나, 버튼을 눌러도 반응이 없거나, 데이터가 안 불러와지거나. 이때 개발자가 제일 먼저 하는 것은 — **브라우저 개발자 도구(DevTools)**를 여는 것입니다.

실험실에서 결과가 이상하면 현미경으로 들여다보듯, 웹 개발에서 문제가 생기면 DevTools로 들여다봅니다. 모든 최신 브라우저(Chrome, Edge, Safari, Firefox)에 내장되어 있고, 설치할 것이 없습니다.

DevTools 열기

맥:     ⌘ + Option + I
윈도우:  F12 또는 Ctrl + Shift + I

또는: 웹페이지에서 마우스 우클릭 → "검사(Inspect)"

DevTools가 열리면 여러 탭이 보입니다. 가장 많이 쓰는 세 가지를 배우겠습니다.

Elements 탭: HTML/CSS 구조 보기

Elements 탭은 현재 페이지의 HTML 구조와 CSS 스타일을 실시간으로 보여줍니다. 실험 노트의 현재 상태를 들여다보는 것과 같습니다.

할 수 있는 것:

1. HTML 구조 확인 — 어떤 태그가 어디에 있는지, 중첩 구조가 어떤지 트리 형태로 볼 수 있습니다

2. CSS 실시간 수정 — 오른쪽 패널에서 CSS 값을 직접 바꿔보며 즉시 결과를 확인할 수 있습니다. "이 패딩을 20px로 바꾸면 어떨까?" → 바로 확인 → 마음에 들면 코드에 반영

3. 요소 선택 — DevTools 왼쪽 상단의 커서 아이콘(또는 ⌘ + Shift + C)을 누르면, 페이지에서 클릭한 요소가 Elements 탭에서 하이라이트됩니다

실전 사용 예시:

문제: "글자 크기를 바꿨는데 적용이 안 된다"

1. 해당 요소를 우클릭 → 검사(Inspect)
2. Elements 탭에서 해당 요소가 선택됨
3. 오른쪽 Styles 패널 확인
4. 내 CSS가 취소선으로 그어져 있음 → 다른 CSS가 우선순위로 덮어쓰고 있다는 뜻
5. 어떤 CSS가 덮어쓰는지 확인하고 수정

Console 탭: JavaScript 실행과 에러 확인

Console 탭은 JavaScript의 현미경입니다. 두 가지 역할을 합니다.

1. 에러 메시지 확인

JavaScript에서 에러가 나면 Console에 빨간색으로 표시됩니다:

❌ Uncaught TypeError: Cannot read properties of undefined (reading 'length')
     at calculateGC (script.js:15:28)

이 메시지는 "script.js 파일의 15번째 줄에서, undefined의 length를 읽으려 했다"는 뜻입니다. 에러 메시지만 읽을 줄 알아도 디버깅의 절반은 끝납니다.

2. 코드 직접 실행

Console에 JavaScript 코드를 직접 입력하고 실행할 수 있습니다:

// Console에서 직접 타이핑
document.title
// → "Western Blot 프로토콜"

document.querySelectorAll("li").length
// → 9 (목록 항목 개수)

2 + 2
// → 4

변수 값을 확인하거나, DOM 요소를 탐색하거나, 간단한 계산을 할 때 유용합니다.

Console과 Elements 동시에 보기:

Elements 탭을 보면서 아래에 Console을 같이 띄울 수 있습니다:

• Esc 키를 누르면 하단에 Console 서랍(Drawer)이 나타남
• 다시 Esc를 누르면 닫힘

이렇게 하면 HTML 구조를 보면서 동시에 JavaScript를 실행할 수 있습니다.

Network 탭: API 호출 추적

Network 탭은 브라우저가 서버와 주고받는 모든 요청을 보여줍니다. fetch나 Ajax로 API를 호출했을 때, 요청이 제대로 갔는지, 응답이 뭔지 확인할 수 있습니다.

할 수 있는 것:

1. 요청 목록 확인 — 페이지가 로드되면서 불러온 모든 파일(HTML, CSS, JS, 이미지, API 응답)이 시간순으로 나열됩니다

2. API 응답 확인 — 특정 요청을 클릭하면 Headers(요청/응답 헤더), Preview(응답 미리보기), Response(원본 응답)를 볼 수 있습니다

3. 상태 코드 확인 — 200(성공), 404(없음), 500(서버 에러) 등이 한눈에 보입니다

실전 사용 예시:

문제: "fetch로 시료 데이터를 불러오는데 빈 화면만 나온다"

1. Network 탭 열기
2. 페이지 새로고침 (⌘ + R)
3. /api/samples 요청 찾기
4. 상태 코드 확인:
   - 404 → URL이 틀렸거나 서버에 해당 라우트가 없음
   - 500 → 서버 코드에 에러 (서버 로그 확인)
   - 200인데 빈 배열 → 데이터가 없거나 DB 쿼리 문제
5. Response 탭에서 실제 응답 데이터 확인

Application 탭: 저장된 데이터 확인

Application 탭에서는 쿠키, localStorage, 세션 스토리지를 확인하고 수정할 수 있습니다.

auth-cookies 토픽에서 배운 쿠키가 실제로 어떻게 저장되어 있는지 이 탭에서 확인할 수 있습니다:

Application → Cookies → localhost
→ session_id: abc123
→ Path: /
→ HttpOnly: ✓

DevBench의 학습 진행률도 localStorage에 저장됩니다. Application → Local Storage에서 확인할 수 있습니다.

디버깅 3단계 체크리스트

문제가 생겼을 때, 이 순서로 확인하세요:

1단계: Console 확인 (빨간 에러 있는가?)

• 있으면 → 에러 메시지 읽기 → 파일명:줄번호 확인 → 해당 코드 수정
• 없으면 → 2단계로

2단계: Network 확인 (API 요청이 성공했는가?)

• 404/500이면 → 서버 쪽 문제
• 200인데 데이터가 이상하면 → Response 확인
• 요청 자체가 없으면 → fetch 코드가 실행되지 않았음 → Console에서 확인

3단계: Elements 확인 (화면에 요소가 있는가?)

• 요소가 있는데 안 보이면 → CSS 문제 (display: none, 크기 0, 투명도 등)
• 요소 자체가 없으면 → JavaScript가 DOM에 추가하지 못한 것

이 세 단계만 기억해도 대부분의 웹 개발 문제를 진단할 수 있습니다.

직접 해보기 (Faded Example)

아래 빈칸을 채워 DevTools Console에서 실행할 디버깅 코드를 완성하세요.

// 1. 페이지의 모든 h2 태그 개수 확인
document.querySelectorAll("").length
// 2. id가 "result"인 요소의 텍스트 확인
document.("result").innerText
// 3. 특정 변수의 타입 확인
 odValue
// → "number"

흔한 에러 & 해결법

Q: DevTools를 열었는데 Network 탭이 비어있습니다

Network 탭은 열린 이후의 요청만 기록합니다. DevTools를 먼저 열고, 그다음에 페이지를 새로고침(⌘ + R)하세요.

Q: Console에 에러가 많은데 내 코드 에러인지 모르겠습니다

브라우저 확장 프로그램(광고 차단 등)이 에러를 만드는 경우가 많습니다. 시크릿 모드(⌘ + Shift + N)에서 열면 확장 프로그램 없이 테스트할 수 있습니다.

Q: Elements에서 CSS를 수정했는데 새로고침하면 원래대로 돌아갑니다

DevTools에서 수정한 것은 임시입니다. 마음에 드는 값을 찾았으면 실제 CSS 파일에 반영해야 합니다. DevTools는 "실험용"이고, 코드 파일이 "영구 저장소"입니다.