ADB를 활용한 모바일 웹 디버깅
모바일에서 웹페이지를 보면 PC브라우저와 달리 스크립트가 실행이 안되거나, 화면이 틀어지는 현상이 나올 때가 있습니다.
웹모바일로 봤을때 모바일에서 나오는 증상이 같이 나오면 웹모바일에서 디버깅을 하면 그만이지만,
오로지 모바일에서만 다르게 나올때 사용하는 방법이 ADB를 이용해 디버깅을 해보도록 합시다.
모바일 디버깅 준비과정
모바일 디버깅을 하기위해서는 PC와 모바일에서 몇가지 준비과정이 필요로 합니다.
PC 준비과정
1. 크롬 웹 스토어(https://chrome.google.com/webstore?hl=ko)에 접속 후 ADB 검색 후 설치
2. 설치된 ADB를 환경변수 path 설정을 합니다.(크롬 웹 스토어 저장 경로를 모르시면 adb.exe파일을 검색 후 파일이 있는 폴더를 path 잡으시면 됩니다. )
모바일 준비과정
1. 옵션 > 개발자도구 > USB 디버깅 모드 활성화를 시켜주도록 합니다.(개발자도구가 메뉴가 안나오시는 분은 개발자도구를 활성화를 시켜줘야 합니다. 모바일 기기마다 메뉴를 여는 방법이 다른데 대부분? 옵션 > 휴대전화 정보 > 소프트웨어 정보 > 빌드번호가 있는 곳을 여러번 클릭 하면 열리는 듯 합니다)
2. 크롬 앱 설치 디버깅은 크롬에서만 가능 하므로 크롬이 설치가 안되어 있다고 하시면 크롬 브라우저를 설치하도록 합시다.
모바일 PC 연결
이렇게 모든 준비 과정은 끝났습니다.
이제부터는 PC와 모바일을 연결해 디버깅을 해보도록 합시다.
1. 크롬 브라우저 > 개발자도구(F12) > 옵션 > More tools > Remote devices를 선택을 합니다( 크롬에서 chrome://inspect 페이지를 접속을 해도 상관 없습니다.) 모바일과 pc를 연결하기 전에는 목록에 Devices와 Settings라는 목록밖에 보이지 않습니다.
2. 모바일과 pc를 USB 케이블 선으로 연결을 합니다.
3. 연결된 디바이스 확인 연결이 되고 난 뒤는 Devices목록 아래에 연결된 모바일 기기가 나옵니다. 해당 기기를 눌러주면 우측에 크롬앱에서 실행된 웹페이지가 나옵니다(모바일에서 크롬 앱이 포그라운드로 실행이 되고 있는 상태에서 나옵니다.)
그래도 목록에 안나오신다고 하면 작업관리자 > 프로세스 > adb.exe 가 실행이 되고 있는지 체크를 합니다.
adb kill-server -> 서비스 종료
adb start-server -> 서비스 시작
adb devices -> 연결된 디바이스 목록 보여줌
3개 명령어를 순차적으로 사용뒤 adb devices 명령어를 했을때 디바이스 목록이 나오는지 꼭 확인을 합니다.(디바이스 목록이 나와야 아래 화면에서 연결된 기기가 나옵니다.)
4. inspect 버튼을 이용해 열려있는 웹페이지를 PC 브라우저로 열람
inspect를 눌렀을때 한 브라우저 화면서 모바일 화면과 개발자도구를 같이 나와 디버깅을 활용할 수 가 있습니다.
