모바일 웹(크롬) 디버깅 하는법

모바일 Chrome 브라우저나 앱 내 WebView 디버깅이 필요할 때나 크롬 개발자모드가 필요한 경우 사용할 수 있는 도구가 바로 Chrome의 chrome://inspect입니다. 이 포스팅에서는 chrome://inspect의 주요 기능과 사용법에 대해 설명합니다.

1. chrome://inspect

chrome://inspect는 Chrome 브라우저에 내장된 디버깅 도구로, 모바일 디바이스에서 실행 중인 웹페이지나 앱의 WebView를 PC에서 디버깅할 수 있도록 지원합니다. 주로 다음과 같은 용도로 사용됩니다:

모바일 웹 디버깅: 모바일 Chrome에서 실행 중인 웹페이지를 디버깅.

WebView 디버깅: Android 애플리케이션 내부에서 실행되는 WebView 콘텐츠 디버깅.

원격 디버깅: 같은 네트워크 상의 다른 PC나 디바이스의 Chrome 탭 디버깅.

---

2. chrome://inspect 사용법

PC 측 Chrome 브라우저 준비

검색창에 chrome://inspect 입력

---

모바일 측  준비

• 모바일 디바이스에서 설정-시스템-태블릿정보-빌드번호 연타를 해서 Android 디바이스에서 개발자 옵션을 활성화
• 시스템- 개발자 옵션- USB 디버깅을 허용합니다.

 

"Devices" 섹션에 연결된 디바이스가 표시되며, 디버깅 가능한 페이지 목록이 나타납니다.
디바이스가 표시되면 모바일에서 웹 접속을 하면 버튼이 나옵니다.

---

.모바일에서 웹 접속을 하게 되면 아래처럼 inspect 버튼이 나오는걸 확인 가능햅니다.

 

디버깅할 페이지 옆의 "Inspect" 버튼을 클릭하면 크롬 개발자 도구가 열리고, 모바일 웹 페이지를 디버깅을 시작할 수 있습니다.

 

---

3. 주요 기능 설명

1) 모바일 디바이스 디버깅

chrome://inspect의 가장 대표적인 기능으로, 모바일 디바이스에서 실행 중인 웹페이지의 DOM, 스타일, 네트워크 요청, 콘솔 로그 등을 실시간으로 확인하고 수정할 수 있습니다.

DOM 구조 확인 및 수정: 모바일 페이지의 DOM 구조를 PC에서 확인하고 실시간으로 수정할 수 있습니다.

네트워크 요청 모니터링: 모바일에서 발생하는 네트워크 요청과 응답을 PC에서 쉽게 추적할 수 있습니다.

2) WebView 디버깅

Android 애플리케이션 내부에서 실행되는 WebView 콘텐츠도 디버깅할 수 있습니다.

요구 사항: 앱이 WebView 디버깅을 지원하려면 다음과 같이 setWebContentsDebuggingEnabled(true) 메서드를 호출해야 합니다.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

WebView 디버깅이 가능해지면, PC의 Chrome에서 해당 WebView 콘텐츠를 확인할 수 있습니다.

3) 원격 Chrome 탭 디버깅

같은 네트워크에 연결된 다른 PC나 디바이스에서 실행 중인 Chrome 탭을 디버깅할 수 있습니다.

요구 사항: 원격 디바이스에서 Chrome을 실행한 후, 디버깅 옵션을 활성화해야 합니다.

디버깅할 탭을 선택하면 PC에서 해당 탭의 내용을 실시간으로 디버깅할 수 있습니다.

---

 팁 & 트러블슈팅

1) 디바이스가 인식되지 않을 때

USB 디버깅 활성화 여부 확인: Android 디바이스의 "개발자 옵션"에서 "USB 디버깅"이 활성화되어 있는지 확인합니다.
드라이버 설치: Windows PC의 경우 Android USB 드라이버가 제대로 설치되어 있는지 확인합니다.

2) 디바이스가 연결되었으나 페이지가 표시되지 않을 때

Chrome 버전 확인: PC와 모바일 디바이스 모두 최신 버전의 Chrome을 사용하고 있는지 확인합니다.
USB 케이블 교체: 일부 USB 케이블은 데이터 전송을 지원하지 않으므로, 반드시 데이터 전송이 가능한 케이블을 사용해야 합니다.

3) 네트워크 연결 문제

원격 디버깅 시 같은 네트워크에 연결되어 있어야 합니다.
방화벽 설정이 원격 연결을 차단하고 있지는 않은지 확인합니다.