Android 기기 원격 디버그

Sofia Emelianova
Sofia Emelianova

Windows, Mac 또는 Linux 컴퓨터에서 Android 기기의 라이브 콘텐츠를 원격으로 디버그합니다. 이 튜토리얼에서 다음 방법을 배울 수 있습니다.

  • 원격 디버깅을 위해 Android 기기를 설정하고 개발 머신에서 기기를 검색합니다.
  • 개발 머신에서 Android 기기의 라이브 콘텐츠를 검사하고 디버그합니다.
  • 개발용 컴퓨터에서 Android 기기의 콘텐츠를 DevTools 인스턴스로 스크린캐스트합니다.

원격 디버깅 다이어그램

1단계: Android 기기 찾기

아래의 워크플로는 대부분의 사용자에게 적합합니다. 문제 해결: DevTools가 Android를 감지하지 못함 기기를 참조하세요.

  1. Android에서 개발자 옵션 화면을 엽니다. 자세한 내용은 온디바이스 개발자 구성 옵션을 참고하세요.
  2. USB 디버깅 사용을 선택합니다.
  3. 개발 머신에서 Chrome을 엽니다.
  4. chrome://inspect#devices 페이지로 이동합니다.
  5. 체크박스입니다. USB 기기 검색이 사용 설정되어 있는지 확인합니다.

    Discover USB Devices(USB 기기 검색) 체크박스가 사용 설정되었습니다.

  6. USB 케이블을 사용하여 Android 기기를 개발 머신에 직접 연결합니다.

  7. 기기를 처음 연결하는 경우 기기가 '오프라인'으로 표시됩니다. 사용자 인증 정보를 확인할 수 있습니다

    오프라인 기기가 인증 대기 중입니다.

    이 경우 기기 화면에 표시되는 디버깅 세션 메시지를 수락합니다.

  8. Android 기기의 모델 이름이 표시되면 DevTools가 기기 연결을 성공적으로 설정한 것입니다.

    모델 이름이 지정된 성공적으로 연결된 기기입니다.

  9. 2단계로 진행합니다.

문제 해결: DevTools가 Android 기기를 감지하지 못함

하드웨어가 올바르게 설정되었는지 확인합니다.

  • USB 허브를 사용하는 경우 Android 기기를 개발 머신에 직접 연결해 봅니다. 하세요.
  • Android 기기와 개발용 컴퓨터를 연결하는 USB 케이블을 분리한 후 다시 연결합니다. Android 및 개발용 머신 화면이 잠금 해제된 상태에서 실행합니다.
  • USB 케이블이 작동하는지 확인합니다. Android 기기에서 파일을 검사할 수 있어야 합니다. 개발 머신에서 추출해야 합니다

소프트웨어가 올바르게 설정되었는지 확인합니다.

Android 기기에 USB 디버깅 허용 메시지가 표시되지 않으면 다음을 시도해 보세요.

  • DevTools가 개발에 집중할 때 USB 케이블 연결을 해제했다가 다시 연결 Android 홈 화면이 표시됩니다. 즉, 경우에 따라 프롬프트가 Android 또는 개발 머신 화면이 잠겨 있을 때 실행되도록 할 수 있습니다
  • Android 기기 및 개발 머신의 디스플레이 설정이 표시되지 않도록 업데이트 자러 갑니다.
  • Android의 USB 모드를 PTP로 설정합니다. Galaxy S4에 USB 디버깅 승인 대화상자가 표시되지 않음 체크박스를 선택합니다.
  • 휴대전화의 개발자 옵션 화면에서 USB 디버깅 승인 취소를 선택합니다. 초기화해야 합니다.

이 섹션이나 Chrome DevTools에서 언급하지 않은 해결 방법을 찾은 경우 기기를 감지하려면 Stack Overflow 질문에 답변을 추가하거나 Google Cloud developer.chrome.com 저장소에서 문제 해결!

2단계: 개발용 컴퓨터에서 Android 기기의 콘텐츠 디버그

  1. Android 기기에서 Chrome을 엽니다.
  2. 개발 머신의 chrome://inspect/#devices에 Android 기기의 모델 이름과 일련번호입니다. 그 아래에는 기기에서 실행 중인 Chrome 버전이 표시됩니다. 버전 번호가 괄호 안에 표시됩니다.

    기기에서 실행되는 Chrome 버전입니다.

  3. URL로 탭 열기 텍스트 상자에 URL을 입력한 다음 열기를 클릭합니다. 페이지가 Android 기기의 새 탭입니다.

    섹션에 나열된 원격 탭.

    원격 Chrome 탭마다 chrome://inspect/#devices에 섹션이 따로 있습니다. 이 섹션에서 해당 탭과 상호작용할 수 있습니다. WebView를 사용하는 앱이 있는 경우 각 앱에 관한 섹션도 표시됩니다. 이 예에서는 탭이 하나만 열려 있습니다.

  4. 방금 연 URL 옆의 검사를 클릭합니다. 새 DevTools 인스턴스가 열립니다.

원격 탭을 위한 새로운 DevTools 인스턴스입니다.

Android 기기에서 실행 중인 Chrome 버전에 따라 개발 컴퓨터에서 열리는 DevTools 버전이 결정됩니다. 따라서 Android 기기에서 매우 오래된 버전의 Chrome을 실행 중인 경우 DevTools 인스턴스가 익숙한 것과 매우 다르게 보일 수 있습니다.

추가 작업: 일시중지, 포커스, 새로고침, 탭 닫기

URL 아래에서 일시중지, 포커스, 새로고침, 탭 닫기 메뉴를 찾을 수 있습니다.

탭 일시중지, 새로고침, 포커스, 닫기 메뉴입니다.

요소 검사

DevTools 인스턴스의 Elements 패널로 이동하고 요소 위로 마우스를 가져가서 Android 기기의 표시 영역이 될 수도 있습니다.

Android 기기 화면에서 요소를 탭하여 Elements 패널에서 선택할 수도 있습니다. DevTools 인스턴스에서 Select Element 요소 선택를 클릭한 다음 Android 기기 화면에서 요소를 탭합니다. 첫 번째 터치 후에는 요소 선택이 사용 중지되므로 이 기능을 사용할 때마다 다시 사용 설정해야 합니다.

Android 화면을 개발 머신에 스크린캐스트

스크린캐스트 전환을 클릭합니다. 스크린캐스트 전환까지 보기 Android 기기의 콘텐츠를 찾습니다.

다음과 같은 여러 방법으로 스크린캐스트와 상호작용할 수 있습니다.

  • 클릭은 탭으로 변환되어 기기에서 적절한 터치 이벤트를 실행합니다.
  • 컴퓨터의 키 입력은 기기로 전송됩니다.
  • 손가락 모으기 동작을 시뮬레이션하려면 Shift 키를 누른 상태에서 드래그합니다.
  • 스크롤하려면 트랙패드 또는 마우스 휠을 사용하거나 마우스 포인터로 이동합니다.

스크린캐스트에 대한 참고사항:

  • 스크린캐스트는 페이지 콘텐츠만 표시합니다. 스크린캐스트의 투명한 부분이 기기를 나타냅니다. Chrome 주소 표시줄, Android 상태 표시줄 또는 Android 키보드와 같은 외부 IP 주소를 통해 안전하게 보호됩니다.
  • 스크린캐스트는 프레임 속도에 부정적인 영향을 미칩니다. 스크롤 또는 스크롤을 측정하는 동안 스크린캐스트 사용 중지 애니메이션을 사용하여 페이지 성능을 보다 정확하게 파악할 수 있습니다.
  • Android 기기 화면이 잠기면 스크린캐스트의 콘텐츠가 사라집니다. 잠금 해제 Android 기기 화면에서 스크린캐스트를 자동으로 다시 시작합니다.

Android 디버그 브리지 (adb)를 통해 수동으로 디버그

드물지만 원격 디버깅의 대체 방법이 유용할 수 있습니다. 예를 들어 Android용 Chrome의 Chrome DevTools 프로토콜 (CDP)에 직접 연결하고자 할 수 있습니다.

이렇게 하려면 Android 디버그 브리지 (adb)를 사용하면 됩니다.

  1. Android 기기에서 개발자 옵션USB 디버깅을 사용 설정했는지 확인합니다.
  2. Android 기기에서 Chrome을 엽니다.
  3. 다음을 통해 Android 기기를 개발 머신에 연결합니다.

  4. 개발 머신의 명령줄에서 adb devices -l를 실행하고 기기가 목록에 있는지 확인합니다.

  5. 기기의 CDP 소켓을 머신의 로컬 포트(예: 9222)로 전달합니다. 이렇게 하려면 다음 명령어를 실행합니다.

    adb forward tcp:9222 localabstract:chrome_devtools_remote
    
  6. 연결되면 다음을 확인합니다.

    • http://localhost:9222/jsonpage 타겟이 나열됩니다.
    • CDP 문서에 나와 있는 것처럼 http://localhost:9222/json/versionbrowser 대상 엔드포인트를 노출합니다.
    • USB 기기 검색 설정을 선택하지 않았더라도 chrome://inspect/#devices가 채워집니다.

문제 해결 방법은 다음을 참고하세요.