실제 기기 Android 기기의 Chrome에서 개발자 도구를 사용하여 디버깅하는 방법

요청



실제 기기의 Android 단말에서 특정 웹 페이지에 대해 웹 인스펙터로 내용을 다시 쓰거나 콘솔을 통해 스크립트를 두드려 실행한 결과를 보고 싶다.

-> iPhone 버전

Android 기기의 원격 디버깅



Mac의 Chrome이나 Android 에뮬레이터에서도 어느 정도의 표시 확인은 할 수 있지만, 역시 실기에서의 조작감이나 외형의 확인은 중요하다.



조금 조사해 보았는데, Mac과 Android 단말을 접속하는 것으로, PC와 같이 실기에서의 동작 확인이 가능한 것이 판명되었기 때문에, 실제로 시험해 보았다.

Android 기기의 원격 디버깅하기 | Tools for Web Developers

Developer Tools의 Remote devices 사용



Mac과 Android 기기를 케이블로 연결. Chrome 개발자 도구를 열고 Main Menu > More tools > Remote devices를 선택합니다.


Remote Device 탭의 Settings에서 Discover USB devices 확인란이 선택되어 있는지 확인합니다.



[Devices]에서 대상 Android 기기를 선택합니다.


New tab 텍스트 상자에 URL을 입력하고 Open 버튼을 클릭합니다.


Android 기기의 Chrome에서 대상 페이지가 열리므로 [Inspect]를 클릭하면 개발자 도구가 시작됩니다.

스크린 캐스트로 실제 기기 Android 기기와 동기화. 요소 검증이나 재기록도 할 수 있어 콘솔에서 스크립트 두드려 실행하는 것도 가능.

편리.

좋은 웹페이지 즐겨찾기