Chrome과 안드로이드 기기를 유선/무선 연결하기

• 프로젝트: loplat UI
• 키워드: mobile debug, adb(Android Debug Bridge), samsung internet, chrome
• 상황
  1. Spinner를 구현하던 중(https://vroomfan.tistory.com/6), 안드로이드 삼성인터넷 브라우저에서만 Spinner가 오작동하는 버그가 발견되었다.
  2. 코드를 여러 방법으로 수정해보았지만 PC 환경에서 디버깅하기엔 한계가 있었다.
  3. android와 PC를 연결하여 안드로이드 모바일 화면을 PC chrome에서 디버깅하고자 한다.
• 해결방법
  
  1. 안드로이드 기기와 PC가 통신할 수 있도록 해주는 adb(Android Debug Bridge)를 설치한다. Android 디버그 브리지 사이트에서 다운로드 받을 수 있지만, macOS의 brew로 쉽게 다운로드 가능하다.
     

       brew install --cask android-platform-tools

     원래는 `brew cask install android-platform-tools` 였으나, homebrew 공식 문서를 보니 위의 명령어로 문법이 바뀐 듯하다.
  2. 안드로이드 기기 '설정'의 '개발자 옵션'에 들어가, 'USB 디버깅'을 ON 한다.
     

     

  3. 휴대폰과 맥OS를 케이블로 연결한다. 이때, 충전용 케이블이 아닌 데이터 전송용 케이블을 사용해야한다.
     'USB 디버깅을 허용하시겠습니까?'라는 alert가 뜨면 허용을 누른다.
     

     

  4. 그 후, adb list를 확인하면 디바이스가 목록에 추가된 것을 확인할 수 있다.
     

     

  5. chrome://inspect/#devices를 주소창에 입력하고 접속하면, 동일하게 기기가 연결되었음을 확인할 수 있다.
     

     

  6. 마지막으로 맨 아래에 있는 'inspect'를 누르면, 모바일의 크롬/삼성인터넷 브라우저가 PC와 공유된다. 개발자 도구로 디버깅도 가능하다.
     

     

• 해결방법2
  1. 케이블이 없다면, 와이파이를 이용하여 기기를 연결할 수 있다.
  2. 안드로이드 '설정'의 '개발자 옵션'에서 '무선 디버깅'을 ON 한다.
  3. PC와 모바일 기기를 와이파이에 연결한다.
  4. '개발자 옵션'의 '무선 디버깅' 페이지에 들어간 뒤, '페어링 코드로 기기 페어링'을 눌러 ip address와 페어링 코드를 확인한다.
  5. terminal에 아래와 같이 기기 페어링탭에 있는(위의 버튼을 눌러서 나온) ip 주소와 포트를 입력한다.
     

       adb pair {ip address}:{port}
     ex> adb pair 172.30.1.1:12345
     
     Successfully paired to 172.30.1.1:12345 [guid=adb-R1111111-b22222]

  6. terminal에 아래와 같이 IP 주소 및 포트를 입력한다.(기기 페어링탭이 아닌 '무선 디버깅 탭'에 보이는 ip 주소와 포트)
     

       adb connect {ip}:{port}
     
     connected to 172.30.1.1:54321​

  7. 해결방법 1과 똑같이 chrome://inspect/#devices 에서 연결된 디바이스를 inspect할 수 있다!
     

     

  8. 디버깅이 끝나면
     

       adb kill-server

     로 서버를 종료한다.