크롬(Chrome) 환경에서 USB 연결로 모바일 디버깅하기

웹사이트 개발시에, 모바일 환경을 디버깅 하기위한 방법중에서, 모바일폰을 USB 로 PC와 연결하여 디버깅 하는 방법을 정리해 보고자 한다. 

 

크롬의 확장프로그램을 이용하면 USB 디버깅이 가능하다. 

 

 

1. 모바일 기기 세팅 

 

 

설정 > 개발자 옵션으로 들어간다. 

 

 

 

 

 

 

 

 

      USB 디버깅을 활성화 시킨다. 

 

 

 

 

 

 

 

 

 

 

   2. 모바일 기기의 USB 드라이버를 설치한다.

 

   3. 크롬 (Chrome) 의 확장프로그램에서 ADB Pluging 을 설치한다. 

 

메뉴 > 도구 더 보기 > 확장 프로그램 > 더 많은 확장프로그램 다운로드 

 

 

 

 

 

adb plugin 으로 검색후, Chrome 에 추가  

 

 

 

 

chrome://inspect/#devices 로 접속했하여 연결된 디바이스를 확인한다. 

 

 

 

 

아래와 같이 연결이 잘 안되는 경우에는 

 

 

 

 adb 가 설치된 폴더에 가서 다음과 같이 서비스를 재시작 해주면 된다. 

 

 

 

 

이제 연결된 화면에서 inspect 를 클릭하면 해당 페이지를 디버깅 할 수 있다.

 

 

 

아래와 같이 bat 파일을 만들어서 실행시키면 편하다

 

debug.bat 파일 

 

cd ../../Program Files (x86)/Android/android-sdk/platform-tools

adb kill-server

 

adb start-server

 

 

 

 

 

 

 

 

 

리모트 디버깅 참고 원문 

 

https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging?utm_source=dcc

 

 

 

 

참고 사이트 

 

http://blog.naver.com/messinger00/220605133371