android chrome debug mode

pc용 웹 화면의 경우에는 chrome에서 F12키를 눌러서 개발자 도구를 활성화시킬 경우 console을 보거나 network request, response를 확인하거나 화면상의 Elements(html, javascript) 정보를 수정하거나 cookie, local storage 값을 변경 할 수도 있다.

 

물론 Firefox, MS Edge 등 타 브라우저에서도 가능하다.

 

그렇지만 스마트폰으로 접속한 크롬의 경우 debuging을 하기가 쉽지 않다.

 

스마트폰 자체에서 개발자 도구 기능을 지원하지 않기 때문이다.

 

이럴 때는 스마트폰을 PC와 연결한 뒤에 PC에서 debuging을 하면 된다.

 

1. 스마트폰은 개발자 모드를 활성화 한 뒤에 USB 디버깅 모드를 체크한다.

개발자 모드는 설정 - 휴대전화 정보 - 빌드 번호를 연속으로 몇 번 클릭해 주면 된다. 그러면 설정 - 시스템에 개발자 옵션 메뉴가 추가된다. 이것은 스마트폰마다 다를 수 있다.

 

2. 스마트폰을 PC와 USB 케이블로 연결한다.

이때 USB 디버깅 모드를 활성화 시킬 것인지 스마트폰에서 물어볼 수 있다.

 

3. PC의 크롬에서 해당 URL을 접속한다.

chrome://inspect

 

4. 위의 URL 을 접속하고 조금 기다리면 모바일 탭에서 열려있는 목록을 볼 수 있다.

디버깅하고자 하는 탭의 inspect를 클릭한다.

devtools의 화면이 나타나며 이때 404 에러가 뜨거나 잘 안 되는 경우 inspect fallback을 클릭한다.

 

5. 디버깅을 진행한다.

PC의 개발자 모드처럼 안정적으로 되지 않는 경우가 많다.

오류가 많고 중간에 접속이 잘 끊기기도 하며 network에서 preserve log가 제대로 적용되지 않는 경우도 있었다.