브라우저 디버깅 방법을 처음 찾아봤을 때, F12 누르면 뭔가 가득 뜨는데 뭘 봐야 하는지 몰랐거든요. 탭도 여러 개고, 빨간 글씨도 여기저기 보이고. 그냥 창 닫은 적도 있었어요.
근데 알고 보면 브라우저 개발자 도구(DevTools)에서 실제로 쓰는 탭은 3~4개뿐이더라고요. 이 글에서는 초보자가 바로 쓸 수 있는 브라우저 디버깅 방법을 탭별로 정리했어요.
▲ DevTools 탭 구성 한눈에 보기
개발자 도구는 어떻게 여나요
운영체제와 브라우저에 따라 단축키가 조금씩 달라요.
| 환경 | 단축키 |
|---|---|
| Windows / Linux | F12 또는 Ctrl + Shift + I |
| macOS | Cmd + Option + I |
| 오른쪽 클릭 | 검사(Inspect) 선택 |
▲ 브라우저 공통 단축키
Chrome, Edge, Firefox 모두 동일한 구조로 열리고요, Safari는 먼저 환경설정 → 고급 → “메뉴 막대에 개발자용 메뉴 표시”를 켜야 해요.
브라우저 디버깅 방법 핵심 — 탭 3개만 알면 됩니다
DevTools를 열면 탭이 한 줄 가득이에요. 근데 브라우저 디버깅 방법을 익히는 데 처음부터 다 알 필요는 없어요. 아래 세 탭으로 에러의 80%는 해결할 수 있거든요.
① Console 탭 — 에러 메시지 읽는 곳
Console은 브라우저가 뭔가 문제가 생겼을 때 메시지를 남기는 공간이에요. 빨간 줄이 보이면 에러, 노란 줄이면 경고예요.
에러 메시지 옆에 파일명과 줄 번호가 같이 표시되거든요. 그 링크를 클릭하면 문제가 된 코드 위치로 바로 이동해요. 에러 원인을 한 줄씩 읽어보면 대부분 이렇게 나와요.
Uncaught TypeError— 변수 타입이 맞지 않을 때404 Not Found— 파일이나 URL이 없을 때CORS error— 다른 도메인 리소스 접근이 차단됐을 때
Console에 직접 JavaScript를 입력해서 실행해볼 수도 있어요. 예를 들어 document.title을 입력하면 현재 페이지 제목이 바로 출력되는 식이에요.
② Network 탭 — 요청·응답 흐름 보는 곳
Network 탭은 브라우저가 서버에 뭘 요청했고, 서버가 뭘 돌려줬는지를 기록해요. API 연동이 안 될 때 가장 먼저 봐야 하는 곳이에요.
탭을 열고 페이지를 새로 고침하면 요청 목록이 쭉 나와요. 각 요청을 클릭하면 오른쪽에 세부 정보가 나오는데, Status 코드가 핵심이에요.
| 상태 코드 | 의미 | 주로 확인할 것 |
|---|---|---|
| 200 | 정상 응답 | Response 탭에서 데이터 확인 |
| 401 | 인증 실패 | 토큰·헤더 누락 여부 |
| 403 | 권한 없음 | API 키 권한 설정 확인 |
| 404 | 주소 없음 | URL 오타 확인 |
| 500 | 서버 오류 | 서버 측 로그 확인 필요 |
▲ Network 상태 코드별 확인 포인트
Fetch/XHR 필터를 켜면 API 요청만 따로 걸러볼 수 있어서 불필요한 이미지·폰트 요청 없이 깔끔하게 확인할 수 있어요.
▲ API 요청만 필터링한 화면
③ Elements 탭 — HTML/CSS 구조 확인하는 곳
Elements 탭은 현재 페이지의 HTML 구조와 적용된 CSS를 실시간으로 보여줘요. 레이아웃이 깨졌을 때, 특정 요소에 어떤 스타일이 붙어 있는지 확인할 때 주로 써요.
페이지에서 특정 요소를 마우스 오른쪽 클릭 → 검사(Inspect)를 누르면 Elements 탭이 해당 요소 위치로 바로 이동해요. CSS 값도 그 자리에서 직접 수정해볼 수 있고요. 저장은 안 되지만, 수정 결과를 미리 보는 용도로 유용해요.
Sources 탭으로 중단점 디버깅하는 법
좀 더 정교한 브라우저 디버깅 방법이 필요할 때 Sources 탭을 써요. 코드 실행을 특정 줄에서 멈추고, 그 시점의 변수 값을 확인할 수 있거든요.
중단점(Breakpoint)을 설정하는 방법은 간단해요.
- Sources 탭 → 왼쪽 파일 목록에서 디버깅할 JS 파일 클릭
- 코드 줄 번호 옆을 클릭하면 파란 마커가 생겨요 → 이게 중단점
- 페이지를 새로 고침하면 그 줄에서 실행이 멈춰요
- 오른쪽 Scope 패널에서 변수 값을 확인
- F8(또는 Resume 버튼)로 다음 중단점까지 진행
Console에서 에러 위치를 찾았는데 원인을 모르겠을 때, 그 줄 앞에 중단점을 걸고 변수 상태를 확인하는 식으로 쓰면 꽤 유용해요.
초보자가 자주 놓치는 브라우저 디버깅 포인트
브라우저 디버깅 방법을 처음 배울 때 헷갈리는 부분이 있어요. 정리해봤어요.
- DevTools를 연 상태에서 새로 고침해야 Network 탭에 요청이 기록돼요. 미리 열어놔야 해요.
- Console 에러가 여러 개일 때 가장 먼저 뜬 에러부터 봐야 해요. 첫 번째 에러가 연쇄적으로 아래 에러를 만드는 경우가 많거든요.
- 캐시 때문에 수정이 반영 안 될 때는 Ctrl + Shift + R (강력 새로 고침)로 해결돼요.
- 모바일 환경 테스트는 Elements 탭 왼쪽 상단의 기기 아이콘 클릭으로 에뮬레이션할 수 있어요.
▲ Console 에러 위치 클릭 화면
브라우저 디버깅, 처음엔 Console부터 시작하세요
탭이 많아서 복잡해 보이지만, 결국 브라우저 디버깅 방법의 시작은 Console이에요. 에러 메시지 읽기 → Network에서 요청 확인 → Sources에서 중단점 설정. 이 순서로만 익혀도 대부분의 프론트엔드 문제는 잡을 수 있어요.
MDN에서 제공하는 브라우저 개발자 도구 공식 가이드도 함께 보면 도움이 돼요. 탭별 설명이 꽤 자세하거든요.
F12 눌렀다가 창 닫던 사람이라면, 이번엔 Console 탭 하나만 30초 읽어보는 것부터 시작해보세요.
자주 묻는 질문
Q. 개발자 도구에서 수정한 CSS가 새로 고침하면 사라지는 게 정상인가요?
A. 네, 정상이에요. Elements 탭의 수정은 임시 미리보기용이에요. 실제 파일에 저장하려면 Sources 탭의 Overrides 기능을 써야 해요.
Q. Network 탭에서 요청이 하나도 안 보여요.
A. DevTools를 페이지 로드 전에 미리 열어놔야 기록돼요. 탭을 연 다음 F5로 새로 고침하면 요청 목록이 채워져요.
Q. CORS 에러가 계속 나는데 어떻게 해야 하나요?
A. CORS(Cross-Origin Resource Sharing, 다른 출처 간 리소스 공유 제한)는 서버 쪽에서 허용 도메인을 설정해야 해결돼요. 프론트엔드 단에서만 수정하는 건 한계가 있어요. 서버 응답 헤더에 Access-Control-Allow-Origin이 포함되어 있는지 Network 탭 Response Headers에서 먼저 확인해보세요.
📌 관련 글도 읽어보세요
썸네일: Arthur Lambillotte on Unsplash