[Mobile] 모바일 크롬 개발자 모드 디버깅 환경 구축하기

 

 

 

 

 

 

🌈 모바일 크롬에서 개발자 모드 구축하는 방법

모바일에서의 디버깅이 필요할 때 크롬 개발자 모드를 통해 쉽게 개발 환경을 구축할 수 있다.

 

 

 

 

1️⃣ 안드로이드 개발자 모드 활성화

개발자 옵션 메뉴가 보이지 않는 경우 개발자 옵션이 보이도록 설정해야 한다.

 

휴대전화 정보 →  →  소프트웨어 정보  →  빌드번호 7번 클릭 시 개발자 옵션 메뉴가 보이게 된다.

 

 

 

개발자 옵션 메뉴가 보이는 경우 아래 절차를 따라 모바일에서의 디버깅 환경 설정을 마친다.

 

개발자 옵션 → 켜진 상태로 유지 → USB 디버깅

 

 

 

 

 

2️⃣ PC와 휴대폰 연결

USB를 통해 PC와 휴대폰을 연결한다.

 

 

 

 

3️⃣ 크롬 개발자 도구 페이지로 이동 및 포트 포워딩

URL에 chrome://inspect/#devices 를 검색하여 개발자 도구 페이지로 이동한다.

개발자 도구 페이지로 이동하면 몇 초 후에 USB가 연결된 안드로이드 기기 정보가 디바이스 목록에 표시된다.

 

디버깅을 원하는 사이트의 URL을 입력하거나 이미 켜져 있는 사이트의 inspect 버튼을 눌러 디버깅을 진행하면 된다

 

 

또는 모바일에서의 접근 포트번호와 디버깅하려는 웹의 포트를 포워딩하여 접근할 수도 있다.