먼저 원리는 간단합니다.
안드로이드에 크롬을 설치하고,USB로 PC로 연결하고,PC의 크롬에서 인식하는 방식입니다.
좀더 자세히 설명하면,
- 1. 안드로이드에서 크롬을 설치하고요.(버전 32 이상!)
- 2. USB로 PC에 연결합니다.(별다른 SW 설치 없이 그냥 연결입니다)
- 3. 안드로이드 환경설정에서 개발자옵션을 켜고, USB디버깅을 활성화(아래 그림 3가지 참고)
- 4. PC에 설치된 크롬에서 기기를 찾습니다. (주소창에 about:inspect)
- chrome://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로 설정후에 동작시켜보니 빨간불이 나오고…동작이 잘 안되네요. (아직 답을 찾지 못했어요)
모바일웹은 특히나 디버깅방법을 잘 아는 것이 시간절약 측면에서 중요한 것 같습니다. 몇 년전보다 훨씬 편리한 방식들이 속속히 나오고 있는 것 같네요.
모두 즐거운 모바일웹 개발이 되시길~
원 출처 : [출처] https://nigayo.github.io/javascript/2014/03/14/Chrome_Android_remote_debugging.html
출처: https://beagle-dev.tistory.com/218 [언젠간 되어있겠지]
