웹 디버거

휴대폰에서만 레이아웃이 깨지거나, 버튼을 눌러도 반응이 없거나, H5 페이지가 하얗게만 보이는 문제——PC라면 F12 한 번으로 바로 알 수 있지만, 휴대폰에서는 alert를 넣고 다시 빌드해서 확인하는 수밖에 없었습니다. 웹 디버거는 그 개발자 도구를 기기에서 실제로 돌아가는 페이지에 그대로 연결합니다. 케이블만 꽂으면 Elements, Console, Sources, Network, Storage가 PC에 뜨고, 값을 바꾸면 휴대폰 화면이 즉시 다시 그려집니다.

---

1. 패킷 캡처와의 역할 분담

둘 다 필요하지만, 답하는 질문이 다릅니다.

	패킷 캡처	웹 디버거
답하는 것	네트워크에서 무슨 일이 있었나	페이지 안에서 무슨 일이 있었나
보이는 것	요청 / 응답, 헤더, body(복호화된)	DOM 트리, 계산된 스타일, 콘솔 오류, 호출 스택, 쿠키와 스토리지
전형적인 질문	이 엔드포인트가 뭘 반환했나, 파라미터가 맞나	이 요청은 어느 줄의 자바스크립트가 보냈나, 왜 스타일이 안 먹히나

캡처는 요청 자체는 보여주지만 그걸 보낸 코드까지는 보여주지 않습니다. 디버거는 Sources 패널에서 중단점을 걸고 그 요청을 보낸 줄까지 거슬러 올라갈 수 있습니다. 둘 다 같은 소프트웨어 안에 있어서, 오갈 때 도구를 바꿀 필요가 없습니다.

---

2. 시작하기 전, 한 번만 하는 준비

아래 세 가지는 서로 나란한 선택지입니다. 디버깅할 대상에 해당하는 것만, 한 번만 해두면 됩니다.

iOS 기기

케이블을 연결하고 기기 잠금을 풀어 둔 채로, 웹 인스펙터 스위치를 켭니다.

• Safari: 설정 → Safari → 고급 → 웹 인스펙터
• Chrome: Chrome 설정 → 콘텐츠 설정 → 웹 인스펙터

이 스위치는 iOS에서 가장 놓치기 쉬운 단계입니다. 켜지 않으면 기기는 인식되지만 페이지 목록이 비어 있습니다.

안드로이드 기기

케이블을 연결하고 개발자 옵션에서 USB 디버깅을 켭니다. 안드로이드 에뮬레이터는 대개 케이블 없이도 알아서 잡힙니다.

PC의 브라우저

--remote-debugging-port=9222 로 Chrome이나 Edge를 실행한 뒤, 페이지 목록에서 새로고침을 누릅니다.

# macOS
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --remote-debugging-port=9222

# Windows
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

---

3. 앱 안의 페이지도 디버깅하려면, 한 가지 더

브라우저 탭만 볼 거라면 이 절은 건너뛰어도 됩니다.

내 앱이라면 코드에 한 번만 켜두면 됩니다.

// 안드로이드: Application이나 Activity가 시작할 때 한 번 호출
WebView.setWebContentsDebuggingEnabled(true);

// iOS 16.4부터: WKWebView를 검사 가능하게 설정
webView.isInspectable = true

남의 앱이거나 코드를 고치기 싫다면, 대화상자에서 “앱 내 페이지도 포함“을 체크하세요. 실행 중인 앱 안의 페이지까지 목록에 나옵니다. 체크를 해제하면 다시 브라우저 탭만 남습니다.

	조건	비고
안드로이드	루팅된 기기	실행 중인 앱의 WebView 디버깅을 켭니다. 재패키징 불필요
iOS	개발 서명된 앱만	시스템 제약. App Store에서 설치한 앱은 포함할 수 없습니다

어느 쪽이든 앱을 다시 빌드하거나, 서명하거나, 기기에 보조 프로그램을 설치할 필요가 없습니다. 세션이 끝나면 기기는 원래 상태로 돌아갑니다.

---

4. 디버깅 시작

준비가 끝나면, 매번 이것만 하면 됩니다.

새 캡처 → 대상(이 PC / iOS / 안드로이드) → 방식 “웹 디버거” → 새로고침 → 페이지 선택 → 디버그

• 페이지는 소속 앱별로 묶여서 나오므로, 앱 내 페이지인지 브라우저 탭인지 한눈에 구분됩니다.
• 디버그를 누르면 PC 브라우저에 완전한 개발자 도구가 열리고, 기기의 그 페이지에 연결됩니다.
• 원하는 만큼 동시에 열 수 있습니다 — 페이지 하나에 창 하나씩, 서로 간섭하지 않습니다.

디버깅 창은 어느 브라우저로 열리나

안드로이드와 로컬 브라우저 세션은 Chrome, Edge, Brave가 필요합니다(Trace Eagle이 자동으로 실행해 줍니다). iOS 세션은 어떤 브라우저에서도 정상 동작합니다.

---

5. 무엇을 볼 수 있나

PC에서 매일 쓰는 것과 똑같은 패널이, 휴대폰 속 그 페이지를 향해 열립니다.

패널	할 수 있는 일
Elements	페이지의 실시간 DOM 트리와 계산된 스타일, 상속 관계, 박스 모델. 값을 바꾸면 기기가 즉시 다시 그려집니다 — 모바일 레이아웃 버그를 잡는 가장 빠른 방법
Console	페이지가 낸 모든 오류와 로그, 그리고 그 기기의 그 페이지 안에서 자바스크립트를 실행할 수 있는 입력창
Sources	페이지가 로드한 스크립트와 스타일시트를 훑어보고, 중단점을 걸고, 호출 스택을 따라가며, 문제가 생긴 순간의 변수를 확인
Network	페이지가 보낸 모든 요청을 워터폴로 표시: 상태, 종류, 발생 위치, 크기, 시간, 캐시 여부. 아래에는 전체 요청 수, 전송량, DOMContentLoaded, 전체 로드 시간까지
Storage	도메인별로 묶인 쿠키(만료, Secure, HttpOnly, SameSite)와 그 옆에 localStorage, sessionStorage — 로그인 상태 버그를 잡는 가장 빠른 방법

안드로이드에서는 기기 화면이 실시간으로 패널 옆에 표시되고 마우스로 클릭·스크롤할 수 있습니다 — 휴대폰과 키보드를 양손으로 오갈 필요 없이, 검사와 조작이 한 화면에서 끝납니다.

---

6. 지원 범위

	이 PC	iOS	안드로이드
브라우저 탭	✓	✓	✓
앱 내 페이지(WebView / WKWebView / H5)	✓	✓	✓
에뮬레이터 / 시뮬레이터	—	✓	✓
요소·스타일 실시간 검사 및 수정	✓	✓	✓
콘솔, 중단점, 단계별 실행	✓	✓	✓
페이지 단위 네트워크 워터폴	✓	✓	✓
Cookie / localStorage / sessionStorage	✓	✓	✓
기기 화면과 패널 동시 표시	—	—	✓
인증서·프록시 설정 불필요	✓	✓	✓

---

7. 안 될 때 먼저 확인할 것들

증상	대개 원인	조치
기기는 잡히는데 페이지 목록이 비어 있음	iOS 웹 인스펙터가 꺼져 있거나 화면이 잠겨 있음	2절대로 켜고, 잠금을 푼 채 새로고침
안드로이드에서 앱 내 페이지가 안 보임	그 WebView에 디버깅이 켜져 있지 않음	내 앱이면 setWebContentsDebuggingEnabled(true) 추가, 남의 앱이면 “앱 내 페이지도 포함” 체크(루팅 필요)
iOS의 특정 앱만 계속 안 나옴	시스템 제약	App Store 앱은 포함 불가. 개발 서명된 앱만 가능
PC 브라우저에서 페이지가 안 보임	디버깅 포트 없이 실행됨	--remote-debugging-port=9222 로 Chrome / Edge를 다시 실행하고 새로고침
디버그를 눌러도 창이 안 열림	지원하지 않는 브라우저	안드로이드·로컬 세션은 Chrome, Edge, Brave가 필요

---

8. 이럴 때 씁니다

• 휴대폰에서만 문제가 생길 때: 레이아웃, 터치 영역, 폰트 렌더링.
• H5 페이지가 하얗게 나오거나 동작이 안 될 때, 콘솔 오류와 호출 스택을 봐야 할 때.
• 어떤 요청을 어느 스크립트가 보냈는지 알고 싶을 때 — 캡처만으로는 알 수 없습니다.
• 로그인 상태나 캐시 문제를 쫓으며 쿠키·localStorage에 실제로 뭐가 들어 있는지 봐야 할 때.
• 앱에 내장된 H5를 디버깅할 때 — 일반 도구로는 여기서 아무것도 할 수 없습니다.

---

시작하기로 돌아가기 · 관련: 검사와 디코딩 · iOS 캡처 · 안드로이드 캡처