[Basic]Android 기기 원격 디버그(PC에서 모바일 화면 동기화)

모바일에서 터치 이벤트 감지에 대한 디버깅을 하고 싶었다.

검색을 통해 모바일 화면을 실시간으로 PC에서 보는 방법을 발견!

아래의 방법으로 진행하여 실시간으로 모바일 화면 동기화가 가능하다 😃

 

설정 방법

• 모바일 디바이스를 유선으로 컴퓨터 본체(노트북)에 연결한다.
• 크롬 주소창에 chrome://inspect/#devices를 입력한다.(DevTools에 접속)
• https://developer.chrome.com/docs/devtools/remote-debugging?hl=ko#discover 에 나온 설명대로 진행한다. (아래 첨부)

1.  Discover USB devices가 사용 설정되어 있는지 확인합니다
2. USB 케이블을 사용하여 Android 기기를 개발 머신에 직접 연결합니다.
3. 기기를 처음 연결하는 경우 기기가 '오프라인'으로 표시되며 인증 대기 중입니다.이 경우 기기 화면에서 디버깅 세션 메시지를 수락합니다.
4. Pending authentication: please accept debugging session on the device 메세지가 계속 떠 있고, 아래에 모바일에서 켜놓은 Chrome이 보이지 않을 시, 안드로이드에서 설정>개발자옵션>USB디버깅을 다시 껐다가 켜준 후, 해당 화면에서 대기하면 연결된 Chrome이 보인다.
5. Android 기기의 모델 이름이 표시되면 DevTools에서 성공적으로 기기와의 연결을 설정한 것입니다.
6. Android 기기에서 Chrome을 엽니다.
7. 개발 머신의 chrome://inspect/#devices에 Android 기기의 모델 이름과 일련번호가 표시됩니다. 그 아래에 기기에서 실행 중인 Chrome 버전이 표시되며 버전 번호가 괄호로 묶여 있습니다.

   

8. 방금 연 URL 옆에 있는 검사를 클릭합니다. 새 DevTools 인스턴스가 열립니다. (Remote Target에 연결된 디바이스를 inspect를 눌러모바일 화면을 크롬으로 송출)

 

Local Network 를 띄운 후 위의 방법으로 진행하면 모바일에서 보이는 화면을 PC에서도 동일하게 볼 수 있다.

PC나 모바일이 동기화되어 똑같이 보여지기 때문에 둘 다 동작 가능하다.

모바일에서 이루어지는 동작을 실시간으로 PC에서 보며 디버깅할 때 유용한 방법 같다! 👍