크롬으로 안드로이드 웹 디버깅 하기

안드로이드 웹 개발시에 모바일의 크롬을 PC의 크롬에서 디버깅 하는 방법을 공유합니다. 아래 링크를 따라하셔도 됩니다.

https://developers.google.com/chrome-developer-tools/docs/remote-debugging?hl=ko 

요약하자면.. 안드로이드에 크롬을 설치하고, USB로 PC로 연결하고, PC의 크롬에서 인식하는 방식입니다. 

1. 안드로이드에서 크롬을 설치하고요.(버전 32 이상!)
2. USB로 PC에 연결합니다.(별다른 SW 설치 없이 그냥 연결입니다, PC 탐색기에서 폰 디랙토리가 보여야 합니다.)
3. 안드로이드 환경설정에서 개발자옵션을 켜고, USB디버깅을 활성화(아래 그림 3가지 참고)
4. PC에 설치된 크롬에서 기기를 찾습니다. (PC주소창에 about:inspect )

 

 

 

 

1,2단계는 패스하고, 3단계부터 알아보겠습니다.

 

3. 안드로이드 환경설정에서 개발자옵션을 켜고, USB디버깅을 활성화

갤럭시노트2 android 4.3 기준 화면입니다.

환경설정-디바이스정보-빌드번호항목을 찾습니다 여기서 빌드번호를 7차례 클릭합니다 (꾹 여러번 눌러보세요) 이후 개발자옵션이 활성화 됩니다.

아래는 빌드번호를 누른 후 활성회돤 ‘개발자옵션’ 입니다

그다음은 개발자옵션을 클릭하고 들어가면 ‘USB 디버깅’ 이라는 것이 보입니다. 이걸 활성화하시면 됩니다 >

 

 

 

 

 

 

 

 

 

4. PC에 설치된 크롬에서 기기를 찾습니다.

PC의 크롬을 실행한 후 주소창에 ‘chrome://inspect’ 입력합니다. 다음과 같은 화면을 볼 수 있습니다.

 

기기 정보가 보이면 성공한 것입니다.

만일 기기 정보가 보이지 않으면 아래와 같이 해 보세요 https://developers.google.com/chrome-developer-tools/docs/remote-debugging의 단계를 따릅니다. Windows USB 드라이버 설치 http://developer.samsung.com/android/tools-sdks/Samsung-Android-USB-Driver-for-Windows Android SDK 설치 http://developer.android.com/sdk/index.html Android SDK 플랫폼 도구 설치 http://developer.android.com/sdk/installing/adding-packages.html (이 단계는 회사 Wi-Fi에서 차단되었으므로 단일 ADB 패키지를 설치했습니다. https : //forum.xda- developers.com/showthread.php?t=2317790 ) 명령 프롬프트를 사용하여 ADB를 실행하고 cmd에서 ADB 도구의 설치 디렉토리로 이동하여 다음을 입력합니다. adb kill-server adb start-server 휴대 전화를 연결하고 about:inspect데스크톱의 Chrome을 탐색 하여 기기에서 Chrome 브라우저가 열려 있는지 확인하세요. 출처 : https://stackoverflow.com/questions/21925992/chrome-devtools-devices-does-not-detect-device-when-plugged-in

 

 

 

이제 안드로이드 폰의 크롬을 실행해서 원하는 웹사이트 접속합니다. 그 리스트가 PC 크롬화면에서 계속 보여야 합니다.

inspect 를 클릭해보세요. 크롬개발자도구가 나오면서 모바일웹화면의 DOM을 분석 할 수 있습니다.

 

추가로 한가지 더 간단히 해볼만한 것이 있네요.

PC에서 개발중인 localhost 서버를 모바일웹에서 볼 수 있습니다. 먼저 PC의 크롬을 열고 주소창에 chrome://inspect 을 입력해서 접속 한 후 ‘Port forwarding’ 이라고 나오는 버튼을 누르면 8080 이라는 부분이 설정되어 있습니다. 만약 8080 포트로 서비스중인 로컬 서비스가 있다면 바로 안드로이드 브라우저에서 PC의 로컬서비스에 접속해서 테스트 할 수 있습니다.

 

이후에 안드로이드기기의 크롬에서 ‘http://localhost:8080’를 입력 후에 접속해보세요. PC개발 중인 localhost서버를 바로 모바일웹에서도 볼 수 있습니다. 제가 다른 IP로 설정후에 동작시켜보니 빨간불이 나오고…동작이 잘 안되네요. (아직 답을 찾지 못했어요)

모바일웹은 특히나 디버깅방법을 잘 아는 것이 시간절약 측면에서 중요한 것 같습니다. 몇 년전보다 훨씬 편리한 방식들이 속속히 나오고 있는 것 같네요.

모두 즐거운 모바일웹 개발이 되시길~

 

 

 

출처: https://beagle-dev.tistory.com/218 [언젠간 되어있겠지]