모바일 장치에서 디버깅
개요
이 문서에서는 모바일 장치에서 디버깅을 시작하는 방법을 배우고 다음과 같은 솔루션을 다룹니다.
- iOS 디바이스에서 디버깅
- 안드로이드 디바이스에서 디버깅
- 모바일 장치에서 찰스 사용
iOS를 사용한 디버깅
iOS 디버깅을 위한 최소 요구 사항
- Mac MacOS에서 실행되는 사파리 버전 6 이상
- 아이폰 또는 아이패드 (아이폰 OS 6 이상)
사파리 원격 디버깅 사용
애플의 iOS 6 업데이트는 iOS 기기의 사파리 응용 프로그램에서 웹 페이지를 디버깅 할 수있는 사파리 원격 디버깅을 도입했다. 시작하려면 아래 단계를 따르십시오.
- USB 케이블을 통해 iOS 기기를 기기에 연결합니다.
- 기기에서설정앱을 엽니다. Safari를 선택하고 페이지 하단으로 스크롤한 다음고급메뉴를 엽니다. 웹 인스펙터옵션을 활성화합니다.
- 여전히 기기에서 Safari앱을 열고 원하는 웹 페이지를 탐색하세요.
- Mac에서 Safari를 시작하고환경설정 ( Safari > 환경설정 ) 을 연 다음고급섹션으로 이동합니다. 메뉴표시줄 옵션에서 개발 메뉴 표시옵션을 활성화합니다.
- 개발메뉴를 엽니다. iOS 기기가 목록에 표시됩니다. 장치 이름 위에 마우스를 놓으면 장치에서 탐색한 사이트의 URL이 표시됩니다.
- URL을 선택하면 데스크톱에서 모바일 브라우저의 콘텐츠를 미리 보고, 검사하고, 디버깅할 수 있는 Web Inspector창이 열립니다.
- 리소스섹션에서 웹 페이지를 미리 보고 검사할 수 있습니다. Web Inspector에서 요소를 마우스로가리키면 iOS 장치의 브라우저에서 해당 요소가 강조 표시됩니다.
- 디버거및콘솔섹션을 사용하여 중단점 설정, 데이터 로깅 등을 통해 페이지를 추가로 디버깅할 수도 있습니다.
Android로 디버깅
안드로이드 디버깅을위한 최소 요구 사항
- 크롬 32 이상 맥 또는 윈도우에서 실행
- 안드로이드 32 이상 용 크롬과 안드로이드 장치
참고: 이 섹션의 단계는 Android 11을 실행하는 기기를 사용하여 작성되었습니다.
디바이스에서 디버깅 활성화
디바이스에서 콘텐츠 디버깅을 시작하려면 먼저 디바이스 설정에서 USB 디버깅을 활성화해야 합니다.
- Android 4.2 이상을 실행 중인 경우 기기의개발자 옵션 USB 디버깅을 켜기 전에. 기기에서설정앱을 열고 휴대폰정보메뉴를 선택합니다. 기기의빌드 번호를찾아 7번 누릅니다.
- 기기 비밀번호를 입력하세요. 이제 “이제 개발자입니다!”라는 메시지가 표시될 것입니다. .
- Android 11에서 개발자 옵션에 액세스하려면 설정 으로 돌아가서 시스템을 선택하세요.
- 고급을 확장하고 개발자 옵션을 누릅니다.
- USB 디버깅 까지 아래로 스크롤하고 토글을 켭니다.
- 자세한 내용은 Android의 온디바이스 개발자 옵션 구성 문서를 참조하세요.
안드로이드용 크롬을 사용하여 원격 디버깅
이제 기기에서 USB 디버깅이 활성화되었으므로 다음 단계에 따라 Chrome에서 원격 디버깅을 시작하십시오.
- 컴퓨터에서 Chrome을실행하여
chrome://inspect#devices
탐색합니다. - USB 장치 검색 확인란을 선택합니다.
- USB 케이블을 사용하여 기기를 기기에 연결합니다. 장치에서 USB 디버깅을 허용할지 묻는 대화 상자가 표시됩니다. 허용을 선택하여 컴퓨터가 장치에 연결되도록 합니다.
- 기기에서 Chrome앱을 열고 웹 페이지를 탐색합니다.
- 로 돌아가크롬컴퓨터에서.
chrome://inspect#devices
페이지에서 연결된 장치를 볼 수 있을 것입니다. 기기 이름 아래에 기기의 Chrome에 열려 있는 모든 페이지 목록이 표시됩니다. - 웹 페이지 디버깅을 시작하려면 페이지 URL 아래에 있는검사링크를 선택합니다. 그러면 Chrome의개발자 도구가 열립니다 .
- 요소탭의 왼쪽에서 장치 아이콘을 선택하여 DevTool의 스크린캐스트 기능을 열 수 있습니다. 이렇게 하면 모바일 장치에 표시되는 콘텐츠의 실시간 미리 보기를 열 수 있습니다. 스크린캐스팅을 사용하여 기기를 조작하는 방법에 대한 자세한 내용은 Google 설명서를 참조하세요 .
Charles 프록시 설정
Charles는 자신의 컴퓨터에서 실행할 수있는 웹 프록시로서 웹 브라우저를 통해 주고받는 데이터를 기록 할 수 있습니다. 방문하다찰스 웹사이트이 응용 프로그램에 대한 자세한 내용은.
찰스에 대한 최소 요구 사항
- 찰스는 윈도우, 맥과 리눅스와 호환됩니다
- iOS 및/또는 안드로이드 기기
컴퓨터에서 Charles를 실행하려면 아래 단계를 따르십시오.
- 컴퓨터에 Charles를다운로드하여 설치하십시오.
- 컴퓨터에서 Charles를 실행합니다 . 메뉴에서프록시 > 프록시 설정을 선택합니다 . 포트가 할당되었는지 확인합니다(예: 8888).
- 확인을선택하여 변경 내용을 저장하고 대화상자를 닫습니다.
- 메뉴에서프록시 > SSL 프록시 설정을 선택합니다 . SSL 프록시활성화옵션이 선택되어 있는지 확인합니다.
- 위치섹션에서추가버튼을 선택합니다. 위치편집대화상자에서포트필드로 이동하고 443을 입력합니다 . 확인을선택하여 변경 내용을 저장합니다.
- 확인을선택하여 위치편집대화 상자를 닫습니다.
- 확인을선택하여 SSL 프록시 설정대화 상자를 종료합니다.
- 도움말 > SSL 프록시 > 모바일 장치 또는 원격 브라우저에 Charles Root 인증서 설치로 이동합니다 .
- 장치를 설정하는 데 사용할 로컬 서버 IP 및 포트 번호 (8888) 를 식별하는 메시지가 표시됩니다. 인증서를 다운로드하고 설치할 URL도 표시되어야 합니다. 나중에 사용할 수 있도록 컴퓨터에 복사하십시오.
iOS 기기에서 찰스 사용하기
이 섹션에서는 컴퓨터에서 Charles와 함께 작동하도록 iOS 기기를 설정하는 방법을 배웁니다.
- 장치에서 컴퓨터와 동일한 네트워크에 연결되어 있는지 확인합니다. 설정 > Wifi로이동하고 네트워크 이름을 선택하여 고급 옵션을 표시하면 이를 확인할 수 있습니다.
- 하단의 HTTP 섹션에서수동모드를 선택합니다. 그런 다음 이전 단계에서 찰스에서 복사한 서버 IP 및 포트 번호 (8888) 를 추가합니다.
- 장치에서 브라우저를 열고 https://www.charlesproxy.com/getssl 로 이동합니다. Charles Proxy 사용자 지정 루트 인증서프로필을 설치하라는 메시지가 표시되는 장치 설정으로 리디렉션됩니다. 설치버튼을 선택하여 장치에 Charles 인증서를 설치합니다.
- 단계에 따라 Charles 인증서를 설치합니다. 완료되면 완료를 선택합니다.
- 그런 다음 장치가 Charles 인증서를 신뢰하는지 확인할 준비가 되었습니다. 장치에서일반 > 정보 > 인증서 신뢰 설정으로 이동합니다 . 여기에서 찰스 프록시 인증서를 찾아야합니다.
- 찰스 인증서를 사용하도록 설정합니다. 경고 메시지를 확인합니다. Charles로 디버깅하지 않을 때이 인증서를 비활성화 할 수 있습니다.
- 이제 찰스에서 주고받은 모든 데이터를 볼 수 있습니다.
Android 11에서 Charles 사용
이 섹션에서는 컴퓨터에서 Charles와 함께 작동하도록 Android 기기를 설정하는 방법을 배웁니다.
- 기기에서설정 > 네트워크 및 인터넷으로 이동합니다 .
- Wi-Fi 를 탭합니다. 장치에 연결된 네트워크 목록이 표시됩니다.
- 현재 연결되어 있는 무선 네트워크를 선택합니다. 이 네트워크는 컴퓨터에 연결된 네트워크와 일치해야 합니다.
- 연필 아이콘을 탭하여 인터넷 설정을 편집합니다.
- 프록시를 수동 으로 설정합니다.
- Charles의 값을 붙여넣으십시오. 프록시 호스트 이름에서 클립보드에 복사했어야 합니다. 위 단계 . 프록시 포트의경우 를 입력합니다
8888
. - 저장 을 탭합니다.
- 장치에서 브라우저를 열고 https://www.charlesproxy.com/getssl/ 로 이동합니다. 이렇게 하면 Charles SSL 인증서가 장치에 자동으로 다운로드됩니다.
- Android 11에 인증서를 설치하려면 다음 단계를 따르세요.
- 설정 을 엽니다.
- 보안 > 암호화 및 자격 증명 > 인증서설치로 이동합니다 .
- CA 인증서를 선택합니다.
- 경고가 표시됩니다. 그래도 설치를 선택합니다.
- Charles 프록시 SSL 인증서를 선택합니다.
- 인증서 설치를 확인합니다.
- 디바이스의 기본 브라우저에서 웹 사이트로 이동합니다. 당신은 Charles에서 주고받은 모든 데이터를 볼 수 있습니다. 구조 목록을 필터링하는 데 도움이 될 수 있습니다 (이 경우브라이트코브용 필터 ).
- 로컬 시스템이 아닌 Android 장치의 트래픽만 표시되도록 네트워크 트래픽을 필터링하려면:
- Charles 상단 메뉴에서 Proxy 를 선택합니다.
- macOS 프록시 (또는 Windows 프록시 ) 를 선택 해제합니다.
- 선택 사항 : 기기에서 인증서를 지우려면(Android 11 실행):
- 기기에서 설정을 엽니다.
- 보안 > 암호화 및 자격 증명으로 이동합니다 .
- 자격 증명 지우기를 탭합니다.
- 확인 을 탭하여 확인합니다.
Android 7에서 Charles 사용
Android 7(SDK v24)부터는 이 SDK 버전에 새로운 보안 기능이 도입되었기 때문에 더 이상 SSL 네트워크를 직접 볼 수 없습니다. Charles를 통해 네트워크 트래픽을 보려면 SSL 가로채기를 허용하도록 Android 애플리케이션에 명시적으로 지시해야 합니다.
-
애플리케이션에서 AndroidManifest.xml 파일을 엽니다.
-
application
섹션에서networkSecurityConfig
옵션을 추가합니다. -
xml 리소스 폴더에서 다음과 같이
network_security_config.xml
파일을 추가합니다. - 그게 다야 이제 Charles를 통해 들어오는 모든 네트워크 트래픽이 표시되어야 합니다.
리소스
자세한 내용은 다음을 참조하십시오.