Mac 없이 iPhone에서 웹 페이지 디버깅하는 방법

진단부터: 자동 검사 한 번

DOM을 들여다보기 전에 자동 검사에게 뻔한 것부터 물어보세요. OpenHTML의 진단은 페이지가 참조하지만 없는 파일, 개인정보 기본값 때문에 차단된 원격 리소스, JavaScript 런타임 오류, 인코딩 문제를 나열하고, 해결책이 있는 항목에는 한 번의 탭으로 고치는 방법(네트워크 허용, JS 켜기, 로컬 서버로 전환)을 함께 보여 줍니다.

실제로 "왜 비어 있지 / 스타일이 없지 / 반만 작동하지" 같은 경우 대부분이 몇 초 만에 해결됩니다. 만들어지지도 않은 파일을 참조하는 AI 생성 페이지라면 더욱 그렇습니다.

콘솔: 페이지가 하는 말

콘솔은 페이지 JavaScript의 log, warn, error 출력을 실시간으로 수집합니다. 잡히지 않은 예외도 메시지와 함께 여기에 표시되며, 상호작용이 멈췄을 때 가장 빠른 단서가 되는 경우가 많습니다.

요소 인스펙터: 기기에서 보는 DOM (Pro)

• 아무 요소나 탭하면 태그, 속성, 계산된 스타일을 볼 수 있습니다.
• 속성을 그 자리에서 편집해 가설을 검증하세요. 그 클래스를 빼면 레이아웃이 제자리를 찾나요?
• 검사 중인 요소에서 소스 뷰어의 해당 줄로 바로 이동할 수 있습니다.

네트워크 패널: 모든 요청과 타이밍 (Pro)

fetch, XHR, WebSocket 트래픽을 URL, 상태 코드, 크기, 타이밍과 함께 확인하세요. 기기에서 쓰는 네트워크 탭인 셈입니다. 세션 전체를 HAR 파일로 내보내 나중에 데스크톱 DevTools나 Charles, Proxyman에서 분석할 수도 있습니다.

개인정보 기본값을 기억하세요. 문서별로 허용하기 전까지 페이지는 네트워크에 접근할 수 없으므로, 네트워크 패널이 비어 있다면 단지 페이지가 오프라인으로 유지되고 있다는 뜻일 수 있습니다. 진단이 그렇게 알려 줍니다.

실제 조건 재현하기

• 로컬 서버 모드(Pro)는 프로젝트를 127.0.0.1에서 제공하므로 fetch(), ES 모듈, JSON 로딩이 프로덕션과 똑같이 동작합니다. ZIP 웹 프로젝트에는 필수입니다.
• 뷰포트 프리셋(Pro)은 페이지를 휴대폰, 태블릿, 데스크톱 너비로 렌더링해 반응형 버그를 찾아냅니다.
• 데스크탑 사이트 요청(Pro)은 페이지가 모바일에 지나치게 맞춰질 때 데스크톱 레이아웃을 불러옵니다.

실제 작업 흐름 예시

1. 페이지나 프로젝트를 가져오면 진단이 차단된 CDN 스타일시트 하나와 콘솔 오류 하나를 표시합니다.
2. 해당 문서에 네트워크를 허용하면 스타일이 적용되지만 오류는 남아 있습니다.
3. 콘솔이 app.js의 정의되지 않은 변수를 가리키고, 소스 뷰어가 그 줄로 이동합니다.
4. 인스펙터에서 DOM 속성을 편집해 수정 방향을 확인한 뒤, 책상에 돌아가 파일을 제대로 고치고 다시 가져와 검증합니다.