안드로이드 기기 브라우저(or 웹뷰)의 console log 를 PC 에서 확인하는 방법

안드로이드 기기에 있는 브라우저 또는 웹뷰에 띄워놓은 웹사이트의 console log 를 확인해야 할 때 이를 PC 에서 확인할 수 있는 방법이 있습니다. 본 포스팅 글에서는 이 방법을 Mac OS 기준으로 설명하겠습니다.

 

adb 설치

먼저 pc 에 adb 를 설치해야 합니다. (이미 설치가 되어 있으신 분들은 본 과정은 생략하시면 됩니다.) 

아래 명령어를 이용해 설치를 진행합니다.

brew install cask

brew install android-platform-tools --cask

 

그리고 아래 명령어를 통해 설치 여부를 확인합니다.

adb version

 

안드로이드 기기 개발자 옵션 활성화

안드로이드 기기의 개발자 옵션을 활성화해야 합니다. (이미 개발자 옵션이 활성화 되어 있는 분들은 본 과정은 생략하시면 됩니다.) 

1. [설정] -> [소프트웨어 정보] 로 이동
2. 빌드번호 탭을 여러번 탭하기 (탭하다 보면 개발자 옵션 관련 토스트 메시지가 표시됩니다.)
3. 개발자 옵션 활성화 완료

 

개발자 옵션에서 무선 디버깅 설정

1. [설정] -> [개발자 옵션] -> [무선 디버깅] 으로 이동
2. 사용 안함을 사용으로 변경 후, 아래에 표시되는 "IP 주소 및 포트" 정보를 기억해둡니다.

 

PC 에서 adb 로 안드로이드 기기에 무선 연결

이 과정은 안드로이드 기기와 PC 가 같은 네트워크 망을 이용하고 있어야 합니다. 이 부분을 먼저 체크해주신 후, 아까 안드로이드 기기에서 확인한 IP 주소와 포트번호를 이용하여 아래와 같은 명령어를 PC 에서 입력합니다.

adb connect IP주소:포트

만약, 안드로이드 기기에서 IP 주소 및 포트가 "192.168.0.5:44021" 으로 표시되었다면 PC 에서는 "adb connect 192.168.0.5:44021" 으로 입력하면 됩니다.

 

하지만 위 방법으로 연결이 안될 수도 있습니다. 그럴 때는 아래 과정을 대신 진행해주세요.

1. 안드로이드 기기의 [설정] - [개발자 옵션] - [무선 디버깅] 화면에서 페어링 코드로 기기 페어링 탭하기
2. 표시되는 페어링 코드와 IP 주소 및 포트 정보를 기억해두기
3. PC 에서 아래 명령어 입력하기

adb pair IP주소:포트

이 후 페어링 코드를 묻는데 아까 안드로이드 기기에서 확인했던 페어링 코드를 입력하면 됩니다.

 

PC 에서 크롬 브라우저로 연결된 안드로이드 기기 확인

PC 에서 크롬 브라우저를 열고 주소창에 chrome://inspect 라고 입력하면 Remote Target 항목에 연결된 디바이스와 열려져 있는 웹사이트들을 확인할 수 있습니다. 

inspect 를 클릭하면 해당 웹사이트에 대한 개발자도구 기능을 이용할 수 있습니다. 따라서 console log 확인 뿐만 아니라 네트워크 탭이나 element 탭 등도 확인 할 수 있습니다.

 

참고 자료

https://github.com/termux/termux-packages/issues/7946

[Bug]: android-tools (adb) cannot connect to daemon · Issue #7946 · termux/termux-packages

https://info-lab.tistory.com/215

[ADB] MacOS(맥OS)에 ADB Tool 설치 하기(Install)

 

사용 이미지 출처

https://pixabay.com/ko/vectors/pc-%EC%BB%B4%ED%93%A8%ED%84%B0-%ED%99%94%EB%A9%B4-%EA%B0%90%EC%8B%9C-%EC%9E%A5%EC%B9%98-1776996/

 

https://pixabay.com/ko/vectors/%EB%AA%A8%EB%B0%94%EC%9D%BC-%EC%9E%A5%EC%B9%98-%ED%83%9C%EB%B8%94%EB%A6%BF-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8-2017981/

 

https://pixabay.com/ko/vectors/%ED%99%94%EC%82%B4-%ED%8C%8C%EB%9E%80%EC%83%89-%EA%B3%A1%EC%84%A0-%ED%8C%AC%EC%8B%9C-%ED%95%9C-158377/