웹앱을 개발하다보면 특정 기기의 특정 브라우저에서 생기는 문제를 마주할 경우가 많습니다. 점유율이 낮다면 무시하고 넘어갑니다만, 때때로 무시할 수 없는 때가 있죠. 안드로이드 브라우저 - 크롬과 삼성 인터넷입니다. 국내에서는 각각 38%, 24% 유저가 사용하고 있지요.
이런 상황에서 개발을 빠르고 쉽게 하기 위해서는 PC에서 디버깅할 수 있는 환경을 구축해야 합니다. 스마트폰 화면도 스트리밍되고, 터치도 마우스로 하고 개발자도구도 연결되서 요소확인이나 콘솔 로그를 볼 수 있으면 좋겠지요. 다행히 이런 기능을 모두 크롬 디버거에서 지원하고 있습니다.
⚠️WebView는 따로 코드 내에서 디버거를 활성화해야 아래 기능을 사용할 수 있습니다.
크롬 디버거 연결
개발자의 PC와 안드로이드 기기를 연결하는 방법은 두가지입니다. USB 케이블을 통해 직접 연결하거나 WIFI를 통해 무선으로 연결할 수 있습니다. 당연히 USB 케이블이 빠르고 쉽지만 WIFI 연결이 필요한 경우가 있습니다. 케이블이 없거나, 비전원 상태에서만 발생하는 문제라던지인 경우들이죠.
USB 케이블 연결
- 스마트폰 설정 - 개발자 옵션에서 USB 디버깅을 활성화 합니다.
- 개발자 옵션이 보이지 않는 경우, 설정 - 휴대전화 정보 - 소프트웨어 정보 - 빌드번호를 반복터치(10회 이상)하면 활성화됩니다.
- USB 케이블로 PC와 연결합니다.
- 스마트폰 화면에 “휴대전화 데이터에 접근 허용” 창이 뜨고, 허용을 누릅니다.
- 스마트폰 화면에 “USB 디버깅을 허용하시겠습니까?”창이 뜨고, 허용을 누릅니다.
- 디버깅하고 싶은 브라우저에서 탭을 띄웁니다.
- PC 크롬 브라우저에서 chrome://inspect 로 접속을 하면, 하단에 탭이 보이고, inspect를 누르면 개발자 모드가 열립니다.
WIFI 연결
- 스마트폰 설정 - 개발자 옵션에서 무선 디버깅을 활성화 합니다.
- 개발자 옵션이 보이지 않는 경우, 설정 - 휴대전화 정보 - 소프트웨어 정보 - 빌드번호를 반복터치(10회 이상)하면 활성화됩니다.
- 스마트폰 설정 - 개발자 옵션 - 무선 디버깅에서 “페어링 코드로 기기 페어링” 버튼을 클릭하면 페어링 코드와 IP:Port가 나옵니다.
- PC 터미널에서
adb pair {IP}:{PORT}를 입력합니다. 예시)adb pair 192.168.x.x:32334
- 페어링 코드를 입력하고, 성공했는지 확인합니다.
- 디버깅하고 싶은 브라우저에서 탭을 띄웁니다.
- PC 크롬 브라우저에서 chrome://inspect 로 접속을 하면, 하단에 탭이 보이고, inspect를 누르면 개발자 모드가 열립니다.