Elements: 보고, 바로 고치고
페이지의 실시간 DOM 트리에 계산된 스타일, 상속, 박스 모델까지. 값을 바꾸면 기기가 즉시 다시 그립니다. 모바일 레이아웃 버그를 잡는 가장 빠른 길입니다.
휴대폰 속 웹페이지를 PC에서 디버깅
PC 브라우저에서 F12를 누르듯이, iOS·안드로이드 실기기에서 열려 있는 페이지를 원격 디버깅합니다 — 브라우저 탭도, 앱에 내장된 WebView / H5도. 요소 검사, 콘솔 오류, 소스 중단점, 네트워크 요청, 쿠키와 로컬 스토리지까지.
- 앱 내 WebView 요청 캡처
- 휴대폰 브라우저 요청 캡처
- 기기 화면을 패널 옆에
- 앱 수정·재빌드 불필요
모바일 웹 디버깅, 돌아가지 않고
아래는 휴대폰 페이지를 디버깅하는 평범한 하루입니다. 왼쪽 열이 보통의 방식입니다.
| 하려는 일 | 보통의 방식 | 웹 디버거라면 |
|---|---|---|
| 휴대폰에서만 레이아웃이 깨진다 | 고칠 방법을 추측해 빌드하고 배포한 뒤 다시 확인 | 요소와 CSS를 그 자리에서 고치면 기기가 즉시 다시 그린다 |
| 흰 화면, 눌러도 반응 없는 버튼 | 휴대폰에는 콘솔이 없어 alert와 로그를 심는다 | 페이지가 던진 그대로의 오류와 로그가 콘솔에 |
| 이 요청을 보낸 자바스크립트가 어느 줄인지 | 캡처 도구는 요청만 보여줄 뿐 호출한 쪽은 모른다 | Sources에서 중단점과 단계 실행, 변수까지 그 자리에서 |
| 쿠키와 로컬 스토리지에 실제로 뭐가 있는지 | 요청 헤더로 짐작 | 이름·값·도메인·만료·Secure·HttpOnly·SameSite를 표로, 수정도 가능 |
| 앱에 들어 있는 H5 페이지 디버깅 | 트래픽에 묻혀 붙을 방법조차 없다 | 소유한 앱별로 목록에 표시, 고르면 일반 페이지처럼 디버깅 |
| 원격 디버깅을 일단 돌아가게 만들기 | 플랫폼마다 다른 설정, 깊이 숨은 진입점, 잡다한 절차 | 대화상자 하나: 기기 고르고, 페이지 고르고, 디버그 클릭 |
| 트래픽과 페이지 상태를 함께 보기 | 캡처 도구와 디버거를 따로 띄워 두고 오간다 | 한 도구 안에서: 복호화된 요청과, 그것을 보낸 코드 |
축소판 뷰어가 아니라, 진짜 개발자 도구
PC에서 매일 쓰는 그 패널 그대로, 휴대폰에서 돌아가는 페이지에 붙습니다.
Console: 오류와 즉시 실행
페이지가 낸 모든 오류와 로그, 그리고 그 기기의 그 페이지 안에서 내 자바스크립트를 실행하는 프롬프트까지. alert() 디버깅은 이제 그만.
Sources: 중단점과 단계 실행
페이지가 불러온 스크립트와 스타일시트를 훑고, 중단점을 걸고, 호출 스택을 따라가며, 문제가 난 그 순간의 변수를 확인합니다.
Network: 모든 요청을 폭포수로
요청마다 상태, 유형, 발신 위치, 크기, 타이밍, 캐시 상태를 보여주고, 요청 수·전송량·DOMContentLoaded·전체 로드 시간까지 합계로 알려줍니다.
Storage: 쿠키, 로컬, 세션
도메인별 쿠키에 만료, Secure, HttpOnly, SameSite가 붙고 그 옆에 localStorage와 sessionStorage가 놓입니다. 로그인 상태 버그를 푸는 가장 빠른 자리입니다.
기기 화면을 내 화면에
안드로이드에서는 실시간 페이지 화면이 패널 옆에 뜨고 마우스로 클릭·스크롤할 수 있습니다. 휴대폰과 키보드를 번갈아 잡을 필요 없이 한 화면에서 끝납니다.
실제 화면
진짜 기기에 연결해 찍은 화면 그대로입니다.
무엇을 디버깅할 수 있나
휴대폰, 태블릿, 에뮬레이터와 시뮬레이터, 그리고 내 PC의 브라우저.
| 이 PC | iOS | Android | |
|---|---|---|---|
| 브라우저 탭 | ✓ | ✓ | ✓ |
| 앱 안의 페이지(WebView / WKWebView / H5) | ✓ | ✓ | ✓ |
| 에뮬레이터 / 시뮬레이터 | — | ✓ | ✓ |
| 요소와 스타일 실시간 검사·수정 | ✓ | ✓ | ✓ |
| 콘솔, 중단점, 단계 실행 | ✓ | ✓ | ✓ |
| 페이지 단위 네트워크 폭포수 | ✓ | ✓ | ✓ |
| 쿠키 / localStorage / sessionStorage | ✓ | ✓ | ✓ |
| 기기 화면을 패널 옆에 표시 | — | — | ✓ |
| 인증서도 프록시 설정도 불필요 | ✓ | ✓ | ✓ |
시작하기 전, 한 번만 하는 준비
아래 세 가지는 서로 나란한 선택지입니다. 디버깅할 대상에 해당하는 것만, 한 번만 해두면 됩니다.
iOS 기기
케이블로 연결하고 잠금을 풀어 둡니다. Safari는 설정 → Safari → 고급 → 웹 인스펙터, Chrome은 Chrome 설정 → 콘텐츠 설정 → 웹 인스펙터를 켭니다.
안드로이드 기기
케이블로 연결하고 개발자 옵션에서 USB 디버깅을 켭니다. 에뮬레이터는 케이블 없이도 대개 알아서 잡힙니다.
PC의 브라우저
--remote-debugging-port=9222 로 Chrome이나 Edge를 실행한 뒤, 페이지 목록에서 새로고침을 누릅니다.
앱 안의 페이지도 볼 건가요? 한 가지 더
브라우저 탭만 볼 거라면 건너뛰어도 됩니다. 내 앱: 안드로이드는 setWebContentsDebuggingEnabled(true) 를 한 번 호출하고, iOS 16.4부터는 WKWebView에 isInspectable = true 를 설정합니다. 남의 앱이거나 코드를 고치기 싫다면 “앱 내 페이지도 포함”을 체크하세요. 실행 중인 앱 안의 페이지까지 목록에 나옵니다 — 안드로이드는 루팅이 필요하고, iOS는 개발 서명된 앱만 됩니다.
준비가 끝나면, 매번 이것만 하면 됩니다
새 캡처 → 대상(이 PC / iOS / 안드로이드) → 방식 “웹 디버거” → 새로고침 → 페이지 선택 → “디버그”. 브라우저에 완전한 개발자 도구가 열립니다. 원하는 만큼 동시에 열어도 서로 간섭하지 않습니다.
앱 속에 숨은 페이지까지
요즘 앱은 절반은 네이티브, 절반은 웹입니다. 골치 아픈 버그는 대개 그 임베디드 H5 페이지에 있고, 보통의 도구는 거기서 아무것도 보여주지 못합니다.
소유한 앱별로 정리
페이지 목록이 앱 단위로 묶여, 앱 안의 결제 페이지와 브라우저 탭을 한눈에 구분하고 원하는 페이지에만 정확히 붙을 수 있습니다.
체크 하나면 끝
“앱 안의 페이지도 포함”을 체크하면 실행 중인 앱 내부 페이지가 목록에 더해집니다. 해제하면 다시 브라우저 탭만 남습니다.
흔적을 남기지 않음
앱을 다시 빌드하거나 서명하지 않고, 기기에 상주 도구를 설치하지도 않습니다. 세션이 끝나면 기기는 원래대로 돌아갑니다.
패킷 캡처와 함께
여기서 페이지를 디버깅하면서, 같은 도구로 같은 앱의 트래픽을 캡처하세요. 인증서 고정이나 프록시를 무시하는 앱의 HTTPS도 복호화됩니다.
모바일 웹 디버깅: 자주 묻는 질문
휴대폰에서 “요소 검사”는 어떻게 하나요?
휴대폰을 USB로 PC에 연결하고 Trace Eagle에서 새 캡처 → iOS 또는 Android → 방식 “웹 디버거”를 고른 뒤 페이지를 선택하고 디버그를 누르세요. PC에 완전한 Elements 패널이 열려 기기 페이지의 실시간 DOM과 CSS를 보여주며, 여기서 값을 바꾸면 휴대폰 화면이 즉시 바뀝니다.
앱을 수정하지 않고 안드로이드 WebView를 디버깅할 수 있나요?
가능합니다. 이미 디버깅이 허용된 WebView는 바로 목록에 나타납니다. 열어두지 않은 앱이라면 “앱 안의 페이지도 포함”을 체크해 실행 중인 앱 내부 페이지를 목록에 더할 수 있습니다. 이 옵션에는 루팅된 기기가 필요하지만, 앱을 다시 빌드하거나 리패키징하거나 영구 설치하는 일은 전혀 없습니다.
iPhone이나 iPad의 웹페이지는 어떻게 디버깅하나요?
기기를 연결해 잠금을 풀고 설정 → Safari → 고급 → 웹 인스펙터(또는 Chrome 설정 → 콘텐츠 설정 → 웹 인스펙터)를 켜세요. 그다음 Trace Eagle에서 기기와 페이지를 고르고 디버그를 누르면, Elements·Console·Sources·Network·Storage·Layers를 갖춘 완전한 웹 인스펙터가 PC 브라우저에 열립니다.
chrome://inspect 와 같은 건가요?
같은 일을 하면서 더 넓게 다룹니다. 브라우저 내장 원격 디버깅은 안드로이드의 Chromium 대상만 지원하지만, 여기서는 iOS·안드로이드·로컬 브라우저가 같은 선택창에 모이고, 페이지가 앱별로 정리되며, 앱 내 H5는 체크 하나로 추가되고, 바로 옆에 같은 앱의 HTTPS 트래픽을 복호화하는 캡처 기능이 있습니다.
탈옥이나 루팅이 필요한가요?
일반적인 디버깅에는 필요 없습니다. 브라우저 탭이나 이미 디버깅을 허용한 앱은 순정 기기에서도 됩니다. 루팅된 안드로이드 기기가 필요한 것은 “서드파티 앱 안의 페이지까지 목록에 더하는” 선택 항목뿐이며, iOS에서는 어떤 앱을 포함할 수 있는지 시스템이 정합니다.
인증서나 프록시, 앱 내 SDK가 필요한가요?
셋 다 필요 없습니다. 실기기 원격 디버깅은 USB 연결을 통해 이뤄지므로 프록시 설정도, 기기에 루트 인증서를 설치할 일도, 앱에 SDK나 라이브러리를 넣을 일도 없습니다.
패킷 캡처와는 무엇이 다른가요?
캡처는 “네트워크에 무엇이 흘렀는가”에 답합니다. 요청, 응답, 헤더, 본문을 복호화해 보여주죠. 웹 디버거는 “페이지가 무엇을 했는가”에 답합니다. DOM, 스타일, 콘솔 오류, 어떤 스크립트가 그 요청을 보냈는지, 그 전에 쿠키와 스토리지에 무엇이 들어 있었는지까지요. Trace Eagle에는 둘 다 있어 도구를 바꾸지 않고 오갈 수 있습니다.
디버깅 창은 어떤 브라우저로 열리나요?
안드로이드와 로컬 브라우저 세션은 Chrome, Edge, Brave에서 열립니다(Trace Eagle이 알아서 띄웁니다). iOS 세션은 어떤 브라우저에서도 잘 작동합니다.
에뮬레이터와 시뮬레이터에서도 되나요?
됩니다. 안드로이드 에뮬레이터는 보통 케이블 없이도 인식되고, PC에서 실행 중인 iOS 시뮬레이터도 잡힙니다. 절차는 실기기와 완전히 같습니다.
웹 디버거는 무료인가요?
무료입니다. Trace Eagle의 다른 기능과 마찬가지로 macOS·Windows·Linux에서 완전히 무료이며, 기능 제한도 없습니다.