Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

Android 기기 원격 디버깅 시작하기

Windows, Mac 또는 Linux 컴퓨터에서 Android 기기의 라이브 콘텐츠를 원격으로 디버그합니다. 이 가이드는 다음을 수행하는 방법을 안내합니다.

  • 원격 디버깅용 Android 기기를 설정하고 개발용 컴퓨터에서 검색합니다.
  • 개발용 컴퓨터에서 Android 기기의 라이브 콘텐츠를 검사 및 디버그합니다.
  • 개발용 컴퓨터에서 Android 기기의 콘텐츠를 DevTools 인스턴스로 스크린캐스트합니다.
원격 디버깅을 이용하면 Android 기기에서 실행 중인 페이지를
            개발용 컴퓨터에서 검사할 수 있습니다.
그림 1. 원격 디버깅을 이용하면 Android 기기에서 실행 중인 페이지를 개발용 컴퓨터에서 검사할 수 있습니다.

1단계: Android 기기 찾기

아래 워크플로는 대부분의 사용자에게 해당됩니다. 문제해결: DevTools가 Android 기기를 검색하지 못합니다를 참조하여 추가적인 도움을 받을 수 있습니다.

  1. Android에서 개발자 옵션 화면을 엽니다. 온디바이스 개발자 옵션 구성을 참조하세요{:.external}.
  2. Enable USB Debugging을 선택합니다.
  3. 개발용 컴퓨터에서 Chrome을 엽니다.
  4. DevTools를 엽니다.
  5. DevTools에서 Main Menu 메인 메뉴를 클릭하고{:.devtools-inline} More tools > Remote devices를 선택합니다.

    Main Menu를 통해 Remote Devices 탭 열기.
    그림 2. Main Menu를 통해 Remote Devices 탭 열기.

  6. DevTools에서 Settings 탭을 엽니다.

  7. Discover USB devices 확인란이 활성화되었는지 확인합니다.

    Discover USB Devices 확인란이
       활성화되었습니다.
    그림 3. Discover USB Devices 확인란이 활성화되었습니다.

  8. Android 기기를 USB 케이블로 개발용 컴퓨터에 직접 연결합니다. 처음으로 연결할 때, 보통 DevTools가 알 수 없는 기기를 검색한 것을 볼 수 있습니다. Android 기기의 모델명 아래에 초록색 점과 Connected라는 텍스트가 보이면 DevTools가 성공적으로 기기와의 연결을 구축한 것입니다. 2단계로 계속.

    Remote Devices 탭이 성공적으로 승인 대기 중인
       알 수 없는 기기를 검색했습니다.
    그림 4. Remote Devices 탭이 성공적으로 승인 대기 중인 알 수 없는 기기를 검색했습니다.

  9. 기기가 Unknown으로 표시되면 Android 기기에서 Allow USB Debugging 권한 프롬프트를 수락합니다.

문제해결: DevTools가 Android 기기를 검색하지 못합니다.

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

  • USB 허브를 사용 중이라면 Android 기기를 개발용 컴퓨터에 직접 연결해 봅니다.
  • Android 기기와 개발용 컴퓨터를 연결하는 USB를 제거했다가 다시 연결해 봅니다. 이때 Android 및 개발용 컴퓨터 화면의 잠금이 해제되어 있어야 합니다.
  • USB 케이블이 작동하는지 확인합니다. Android 기기의 파일을 개발용 컴퓨터에서 검사할 수 있어야 합니다.

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

Android 기기에서 Allow USB Debugging 창이 나타나지 않는다면 다음을 시도해 보세요.

  • DevTools이 개발용 컴퓨터에서 포커스 상태이고 Android 홈화면이 보일 때 USB 케이블의 연결을 해제했다가 다시 연결합니다. 즉, Android나 개발용 컴퓨터 화면이 잠겨 있으면 때때로 알림창이 나타나지 않을 수 있습니다.
  • Android 기기 및 개발용 컴퓨터의 표시 설정을 업데이트하여 절전 모드로 들어가지 않도록 합니다.
  • Android의 USB 모드를 PTP로 설정합니다. Galaxy S4에서 USB 디버깅 승인 대화상자가 나타나지 않습니다를 참조하세요.
  • Android 기기 화면의 개발자 옵션에서 Revoke USB Debugging Authorizations를 선택하여 새로운 상태로 재설정합니다.

이 섹션이나 Chrome DevTools 기기가 기기를 연결했을 때 검색하지 못합니다에서 언급되지 않은 해결책을 찾았다면Stack Overflow 질문에 답을 추가하거나 webfundamentals 저장소에 이슈를 시작하세요{:.external}!

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

  1. Android 기기에서 Chrome을 엽니다.
  2. 원격 기기 탭에서 Android 기기 모델명과 일치하는 탭을 클릭합니다. 이 페이지 위에 Android 기기 모델명과 일련번호가 표시됩니다. 그 아래에는 기기에서 실행 중인 Chrome 버전이 있고 버전 번호가 괄호에 들어 있을 것입니다. 각각의 열려있는 Chrome 탭에 섹션이 하나씩 할당됩니다. 이 섹션에서 해당 탭과 상호작용할 수 있습니다. WebView를 사용하는 앱이 있다면 해당 앱의 섹션도 보일 것입니다. 그림 5 열린 탭이나 WebViews 없음.

    연결된 원격 기기.
    그림 5. 연결된 원격 기기.

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

  4. 조금 전에 연 URL 옆의 Inspect를 클릭합니다. 새 DevTools 인스턴스가 열립니다. Android 기기의 Chrome 버전에 따라 개발용 컴퓨터에서 열리는 DevTools 버전이 결정됩니다. Android 기기에 매우 오래된 버전의 Chrome이 실행되고 있다면 DevTools 인스턴스가 익숙한 스타일과 매우 다를 수 있습니다.

추가 작업: 새로고침, 포커스 또는 탭 닫기

새로고침, 포커스, 닫기를 하고 싶은 탭의 옆에 있는 More Options 더 많은 옵션를{:.devtools-inline} 클릭합니다.

새로고침, 포커스, 탭 닫기 메뉴.
그림 6. 새로고침, 포커스, 탭닫기 메뉴

요소 검사

DevTools 인스턴스의 Elements 패널로 이동하여 요소 위로 마우스를 가져가고 Android 기기의 표시 영역을 강조표시합니다.

Elements 패널에서 Android 기기 화면의 요소를 탭할 수도 있습니다. DevTools 인스턴스에서 Select Element 요소
선택를{:.devtools-inline} 선택한 다음 Android 기기 화면의 요소를 탭합니다. Select Element는 첫 번째 터치 이후 비활성화되므로 이 기능을 사용할 때마다 다시 활성화해야 합니다.

Android 화면을 개발용 컴퓨터에 스크린캐스트

Toggle Screencast 스크린캐스트 전환를 클릭하여{:.devtools-inline} DevTools 인스턴스에서 Android 기기의 콘텐츠를 표시합니다.

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

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

스크린캐스트 참고 사항:

  • 스크린캐스트는 페이지 콘텐츠만 표시합니다. 스크린캐스트의 투명한 부분은 Chrome 주소 표시줄, Android 상태 표시줄 또는 Android 키보드 등과 같은 기기 인터페이스를 나타냅니다.
  • 스크린캐스트는 프레임 속도에 부정적인 영향을 미칩니다. 페이지 성능을 더욱 정확히 알아내려면 스크롤이나 애니메이션을 측정할 때는 스크린캐스트를 중지하세요.
  • Android 기기 화면이 잠기면 스크린캐스트의 콘텐츠가 사라집니다. Android 화면의 잠금을 해제하면 스크린캐스트가 자동으로 다시 시작됩니다.

의견

Was this page helpful?