PC 크롬에서 Android 크롬 디버깅하기

개발을 하다보면 별의 별 경우가 다 있습니다.

PC 브라우저의 모바일 버전에서는 정상인데, Android 브라우저에서 에러가 발생했습니다.

 

크롬 확장 프로그램인 ADB를 사용해 PC 크롬에서 Android 크롬을 디버깅해보겠습니다.

 

 

---

 

1. Android USB Driver 설치

우선, 자신이 사용하는 안드로이드 기기가 PC에서 인식될 수 있도록 드라이버를 설치해주세요.

 

 

 

2. ADB 설치

https://chrome.google.com/webstore/detail/dpngiggdglpdnjdoaefidgiigpemgage

설치 후 설명 그림처럼 크롬 탭에 안드로이드 아이콘이 나타나면 됩니다.

 

 

 

2. Android SDK 설치

https://developer.android.com/studio

여기서 Platform-tools만 설치해도 되지만 설치 경로 등 설정이 귀찮기 때문에 Android Studio를 설치합시다.

 

저는 윈도우에서 Android Studio 3.6.1 버전을 다운받았습니다.

저처럼 Android Studio를 실행파일(exe)로 설치했을 경우 Android SDK의 기본 경로는

C:\Users\사용자\AppData\Local\Android\Sdk

입니다.

 

 

3. ADB 서비스 재시작

크롬에서 모바일 디바이스 연결 인식이 잘 안되는 경우가 있기 때문에 ADB 프로세스를 죽였다가 재시작해줍니다.

# ADB 경로로 이동
cd C:\Users\사용자\AppData\Local\Android\Sdk\platform-tools

# ADB process kill
adb kill-server

# ADB process start
adb start-server

 

 

4. PC와 모바일 디바이스 연결

USB로 연결한 뒤 모바일 디바이스에서 [설정] - [개발자 도구] - [USB 디버깅]에 체크

 

 

 

5. 디버깅하기

모바일 크롬에서 디버깅하려는 페이지를 연후

PC 크롬에서 [ADB] - [View Inspection Targets]

 

연결된 디바이스 목록에서 기종을 찾아 [inspect]를 누릅니다.

 

모바일과 실시간으로 연동되며, Console, Network 등 개발자 도구를 확인할 수 있습니다.