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

[출처] https://nigayo.github.io/javascript/2014/03/14/Chrome_Android_remote_debugging.html

크롬으로 안드로이드 웹 디버깅 하기 | HI! I'M NIGAYO ;-)

 

안드로이드 웹 개발시에 크롬으로 손쉽게 디버깅 하는 방법을 공유합니다.이 포스트는 아래 링크를 통해서 시도해본 결과를 공유한 것입니다.

따라서 아래 링크를 따라하셔도 됩니다.
https://developers.google.com/chrome-developer-tools/docs/remote-debugging?hl=ko 

먼저 원리는 간단합니다.

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

좀더 자세히 설명하면,

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

3단계부터 조금 자세히 알아보겠습니다.

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

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

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

아래는 빌드번호를 누룬 다음에 활성회돤 ‘개발자옵셥’메뉴항목입니다 >

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

이것으로 안드로이드 기기에서 할 일은 모두 끝났습니다.(안드로이드에 설치한 크롬에서 뭔가 할 게 없어요)

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

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

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

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

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

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

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

 

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

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

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