Windows, Mac 또는 Linux 컴퓨터에서 Android 기기의 라이브 콘텐츠를 원격으로 디버그합니다. 이 튜토리얼에서는 다음을 수행하는 방법을 알아봅니다.
- 원격 디버깅용 Android 기기를 설정하고 개발용 컴퓨터에서 검색합니다.
- 개발 컴퓨터에서 Android 기기의 라이브 콘텐츠를 검사 및 디버그합니다.
- Android 기기의 콘텐츠를 개발 컴퓨터의 DevTools 인스턴스로 스크린캐스트합니다.
1단계: Android 기기 찾기
아래 워크플로는 대부분의 사용자에게 해당됩니다. 자세한 내용은 문제 해결: DevTools가 Android 기기를 감지하지 못함을 참고하세요.
- Android에서 개발자 옵션 화면을 엽니다. 온디바이스 개발자 옵션 구성을 참고하세요.
- USB 디버깅 사용 설정을 선택합니다.
- 개발용 컴퓨터에서 Chrome을 엽니다.
chrome://inspect#devices페이지로 이동합니다.
USB 기기 검색이 사용 설정되어 있는지 확인합니다.
USB 케이블을 사용하여 Android 기기를 개발 머신에 직접 연결합니다.
기기를 처음 연결하는 경우 기기가 '오프라인'으로 표시되고 인증 대기 중으로 표시됩니다.
이 경우 기기 화면에 표시되는 디버깅 세션 메시지를 수락합니다.
Android 기기의 모델명이 표시되면 DevTools가 기기와의 연결을 성공적으로 설정한 것입니다.
2단계로 진행합니다.
문제 해결: DevTools가 Android 기기를 감지하지 못함
하드웨어가 올바르게 설정되었는지 확인합니다.
- USB 허브를 사용 중이라면 Android 기기를 개발용 컴퓨터에 직접 연결해 봅니다.
- Android 기기와 개발용 컴퓨터를 연결하는 USB를 제거했다가 다시 연결해 봅니다. 이때 Android 및 개발용 컴퓨터 화면의 잠금이 해제되어 있어야 합니다.
- USB 케이블이 작동하는지 확인합니다. Android 기기의 파일을 개발용 컴퓨터에서 검사할 수 있어야 합니다.
소프트웨어가 올바르게 설정되었는지 확인합니다.
- 개발용 컴퓨터가 Windows를 구동 중이라면 Android 기기용 USB 드라이버를 수동으로 설치해 보세요. OEM USB 드라이버 설치를 참고하세요.
- 일부 Windows와 Android 기기 (특히 삼성)의 조합에는 추가 설정이 필요합니다. Chrome DevTools 기기가 연결된 기기를 검색하지 못합니다를 참고하세요.
Android 기기에서 USB 디버깅 허용 메시지가 표시되지 않으면 다음을 시도해 보세요.
- DevTools가 개발 머신에서 포커스 상태이고 Android 홈 화면이 표시된 상태에서 USB 케이블의 연결을 해제했다가 다시 연결합니다. 즉, Android 또는 개발용 컴퓨터 화면이 잠겨 있으면 때때로 알림창이 표시되지 않을 수 있습니다.
- Android 기기 및 개발용 컴퓨터의 디스플레이 설정을 업데이트하여 절전 모드로 전환되지 않도록 합니다.
- Android의 USB 모드를 PTP로 설정합니다. Galaxy S4에서 USB 디버깅 승인 대화상자가 표시되지 않음을 참고하세요.
- Android 기기의 개발자 옵션 화면에서 Revoke USB Debugging Authorizations를 선택하여 새로운 상태로 재설정합니다.
이 섹션이나 Chrome DevTools 기기가 기기를 연결했을 때 기기를 감지하지 못합니다에서 언급되지 않은 해결책을 찾았다면 해당 Stack Overflow 질문에 답변을 추가하거나 developer.chrome.com 저장소에서 문제를 여세요.
2단계: 개발용 컴퓨터에서 Android 기기의 콘텐츠 디버깅
- Android 기기에서 Chrome을 엽니다.
개발 머신의
chrome://inspect/#devices에 Android 기기의 모델 이름과 일련번호가 표시됩니다. 그 아래에는 기기에서 실행 중인 Chrome 버전이 있고 버전 번호가 괄호에 들어 있을 것입니다.
Open tab with url(URL로 탭 열기) 텍스트 상자에 URL을 입력한 다음 Open(열기)을 클릭합니다. Android 기기의 새 탭에서 페이지가 열립니다.
각 원격 Chrome 탭에는
chrome://inspect/#devices에 자체 섹션이 할당됩니다. 이 섹션에서 해당 탭과 상호작용할 수 있습니다. WebView를 사용하는 앱이 있다면 해당 앱의 섹션도 보일 것입니다. 이 예시에서는 탭이 하나만 열려 있습니다.방금 연 URL 옆에 있는 검사를 클릭합니다. 새 DevTools 인스턴스가 열립니다.
Android 기기에서 실행되는 Chrome 버전에 따라 개발용 컴퓨터에서 열리는 DevTools 버전이 결정됩니다. 따라서 Android 기기에 매우 오래된 버전의 Chrome이 실행되고 있다면 DevTools 인스턴스가 익숙한 스타일과 매우 다를 수 있습니다.
추가 작업: 탭 일시중지, 포커스, 새로고침 또는 닫기
URL 아래에는 탭을 일시중지, 포커스, 새로고침 또는 닫을 수 있는 메뉴가 있습니다.
요소 검사
DevTools 인스턴스의 Elements 패널로 이동하여 요소 위로 마우스를 가져가고 Android 기기의 뷰포트를 강조표시합니다.
Android 기기 화면에서 요소를 탭하여 Elements 패널에서 선택할 수도 있습니다.
DevTools 인스턴스에서 Select Element 
를 클릭한 다음 Android 기기 화면에서 요소를 탭합니다. Select Element는 첫 번째 터치 후 비활성화되므로 이 기능을 사용할 때마다 다시 사용 설정해야 합니다.
Android 화면을 개발용 컴퓨터에 스크린캐스트
Toggle Screencast
를 클릭하여 DevTools 인스턴스에서 Android 기기의 콘텐츠를 표시합니다.
다음과 같은 다양한 방법으로 스크린캐스트와 상호작용할 수 있습니다.
- 클릭은 탭으로 변환되어 기기에 적절한 터치 이벤트를 발생시킵니다.
- 컴퓨터의 키 입력은 기기로 전송됩니다.
- 손가락 모으기 동작을 시뮬레이션하려면 Shift 키를 누른 상태로 드래그합니다.
- 스크롤하려면 트랙패드 또는 마우스 휠을 사용하거나 마우스 포인터로 이동합니다.
스크린캐스트 참고 사항:
- 스크린캐스트는 페이지 콘텐츠만 표시합니다. 스크린캐스트의 투명한 부분은 Chrome 주소 표시줄, Android 상태 표시줄 또는 Android 키보드와 같은 기기 인터페이스를 나타냅니다.
- 스크린캐스트는 프레임 속도에 부정적인 영향을 미칩니다. 페이지 성능을 더욱 정확하게 알아내려면 스크롤이나 애니메이션을 측정할 때는 스크린캐스트를 중지하세요.
- Android 기기 화면이 잠기면 스크린캐스트의 콘텐츠가 사라집니다. Android 기기 화면의 잠금을 해제하면 스크린캐스트가 자동으로 다시 시작됩니다.
Android 디버그 브리지 (adb)를 통해 수동으로 디버그
드물지만 원격 디버깅의 대체 방법이 유용할 수 있습니다. 예를 들어 Android용 Chrome의 Chrome DevTools 프로토콜 (CDP)에 직접 연결할 수 있습니다.
이렇게 하려면 Android 디버그 브리지 (adb)를 사용하면 됩니다.
- Android 기기에서 개발자 옵션 및 USB 디버깅을 사용 설정해야 합니다.
- Android 기기에서 Chrome을 엽니다.
다음을 통해 Android 기기를 개발 머신에 연결합니다.
- USB 케이블 (직선형)
- 또는 adb Wi-Fi 연결을 사용합니다.
개발 머신의 명령줄에서
adb devices -l를 실행하고 기기가 목록에 있는지 확인합니다.기기의 CDP 소켓을 머신의 로컬 포트(예:
9222)로 전달합니다. 이렇게 하려면 다음 명령어를 실행합니다.adb forward tcp:9222 localabstract:chrome_devtools_remote연결이 완료되면 다음을 확인하세요.
http://localhost:9222/json에는page타겟이 표시됩니다.http://localhost:9222/json/version는 CDP 문서에 표시된 대로browser대상 엔드포인트를 노출합니다.- USB 기기 검색 설정을 선택하지 않아도
chrome://inspect/#devices가 채워집니다.
문제 해결은 다음을 참고하세요.
adb문서원하는 경우 이전 가이드를 참고하세요.