크롬으로 안드로이드 디바이스 디버깅 하기

안드로이드 디바이스를 크롬 개발자도구를 활용해서 디버깅 하는 방법.

macOS 를 사용하기 때문에 아이폰 화면은 xcode 의 시뮬레이터를 활용해서 디버깅을 하게 되는데, 안드로이드 디바이스의 경우는 실물 기기를 활용해서 디버깅을 하고 있다.

 

필요한 것은 안드로이드 디바이스, 연결케이블, pc, 크롬브라우저!

간단하다.

 

디바이스와 pc를 케이블로 연결 한 후,

안드로이드 디바이스 > 설정 > 개발자옵션 > USB 디버깅을 on으로 변경해준다.

 

그럼 위 이미지처럼 디버깅을 허용할지 물어보는 팝업이 뜬다. 

당연히 '허용'

 

그리고 크롬 브라우저에서 개발자도구를 연 다음

console > more tools > remote devices 를 선택하게 되면 하단 콘솔창 옆에 리모트 디바이스 창이 뜬다.

여기서 chrome://inspect/#devices 를 누르면 창이 열린다.

그럼 위 이미지처럼 안드로이드 디바이스에 열려있는 크롬 페이지가 모두 뜬다.

여기서 내가 디버깅 하고자 하는 페이지의 inspect 를 누르면 새로운 개발자도구 화면이 열린다.

 

디바이스 화면과 개발자도구를 볼 수 있는 화면이 뜬다. 여기서부턴 웹 개발자도구를 활용하 듯 사용하면 된다. 디바이스 화면을 스크롤 하면 개발자도구 화면도 같이 스크롤이 되고, 개발자도구에서 화면을 수정하면 디바이스에도 실시간으로 반영이 된다.

 

 

개발자도구에서 타이틀 영역을 선택하고 '가즈아~!' 라는 텍스트를 추가하면 디바이스에도 바로 반영이 된다. 요즘은 개발자도구를 아는 사람들도 많아서 이런식으로 장난(주작질)을 많이 한다고 하는데, 잘못하면 잡혀갈 것 같으니 장난치지 말자.

 

디바이스에서 홈 버튼 등을 눌러 현재 디버깅 중인 페이지가 닫히게 되면 개발자도구 화면도 멈추게 된다. 개발자도구 화면을 보면 가즈아~! 라는 수정사항이 보인다.ㅎㅎ

크롬 디버깅 페이지에선 안드로이드 웹뷰 화면도 디버깅을 할 수 있다. 예시는 팟빵으로 ㅎㅎ  

웹뷰를 사용하는 앱을 켜게 되면 chrome://inspect/#devices 에 웹뷰를 확인할 수 있다. 웹 디버깅과 동일하게 inspect 를 선택하면 된다.

 

왼쪽 이미지는 팟빵화면을 캡쳐한 이미지이고 오른쪽이 웹뷰 디버깅 화면인데, 둘 사이엔 차이가 있다. 웹뷰화면을 디버깅 하는 것이기 때문에 앱 영역은 보이지 않는 다는 점이다. 팟빵 앱 하단 네비게이션과 재생리스트(?) 영역은 웹뷰 화면에서 보이지 않는다. 저 부분은 앱으로 개발된 부분으로 추측해볼 수 있다.

 

웹뷰 말고도 앱 코드도 열어볼 수는 있지만 앱은 잘 모르니...패스..(앱 코드에서도 텍스트 변경을 하니 디바이스에서 바로 확인이 되긴 하더라..ㅎㅎ) 

 

---

방법만 알면 정말 쉬운 안드로이드 디바이스 크롬 디버깅.

마크업을 하다보면 가끔 ios 에서만 이상해요~ 안드로이드에서만 이상해요~ 라는 QA가 들어오는 경우도 있는데, 각 디바이스별로 디버깅을 하면서 확인해주면 된다.