모바일 장치에서 디버깅

iOS 디버깅을위한 최소 요구 사항

• Mac MacOS에서 실행되는 사파리 버전 6 이상
• 아이폰 또는 아이패드 (아이폰 OS 6 이상)

사파리 원격 디버깅 사용

애플의 iOS 6 업데이트는 iOS 기기의 사파리 응용 프로그램에서 웹 페이지를 디버깅 할 수있는 사파리 원격 디버깅을 도입했다. 시작하려면 아래 단계를 따르십시오.

1. USB 케이블을 통해 iOS 기기를 기기에 연결합니다.
2. 기기에서설정앱을 엽니다. Safari를선택하고 페이지 하단으로 스크롤한 다음고급메뉴를 엽니다. [ 웹 관리자]옵션을 활성화합니다.

   

3. 기기에서Safari앱을 열고 웹 페이지를 탐색합니다.
4. Mac에서는Safari를실행하고환경설정 ( Safari > 환경설정 ) 을 연 다음고급섹션으로 이동합니다. 메뉴모음에서 [현상 표시] 메뉴옵션을 활성화합니다.

   

5. 개발메뉴를 엽니다. iOS 기기가 나열되어 있습니다. 장치 이름 위에 마우스를 놓으면 장치에서 탐색한 사이트의 URL이 표시됩니다.

   

6. URL을 선택하면Web Inspector창이 열리므로 데스크톱에서 모바일 브라우저의 콘텐츠를 미리 보고 검사하고 디버그할 수 있습니다.

   

7. 리소스섹션에서 웹 페이지를 미리 보고 검사할 수 있습니다. Web Inspector의요소 위에 마우스를 놓으면 iOS 기기의 브라우저에서 해당 요소가 강조 표시됩니다.

   

8. 디버거및콘솔섹션을 사용하여 중단 점을 설정하고 데이터를 로깅하여 페이지를 추가로 디버깅 할 수도 있습니다.

안드로이드 디버깅을위한 최소 요구 사항

• 크롬 32 이상 맥 또는 윈도우에서 실행
• 안드로이드 32 이상 용 크롬과 안드로이드 장치

참고: 이 섹션의 단계는 Android 4.3을 실행하는 장치를 사용하여 작성되었습니다.

디바이스에서 디버깅 활성화

디바이스에서 콘텐츠 디버깅을 시작하려면 먼저 디바이스 설정에서 USB 디버깅을 활성화해야 합니다.

1. Android 4.2 이상을 실행 중인 경우 USB 디버깅을 켜려면 먼저 장치의개발자 옵션을활성화해야 합니다. 기기에서설정앱을 열고휴대폰 정보메뉴를 선택합니다. 기기의빌드 번호를찾아 7번 탭합니다.
2. 장치의뒤로버튼을 누르면 설정에 나열된개발자 옵션메뉴가 표시됩니다.

   

3. 개발자 옵션메뉴를 열고 확인란을 선택하여USB 디버깅을활성화하십시오.

   

안드로이드용 크롬을 사용하여 원격 디버깅

이제 기기에서 USB 디버깅이 활성화되었으므로 다음 단계에 따라 Chrome에서 원격 디버깅을 시작하십시오.

1. 컴퓨터에서Chrome을실행하고 을 (를) 찾습니다about:inspect . 장치페이지에서USB 장치 검색옵션을 사용하도록 설정합니다.

   

2. USB 케이블을 통해 기기를 컴퓨터에 연결하십시오. 장치에서 USB 디버깅을 허용할지 묻는 대화 상자가 표시됩니다. 확인을선택하여 컴퓨터가 장치에 연결되도록 허용합니다.

   

3. 기기에서Chrome앱을 열고 웹 페이지를 탐색합니다.
4. 컴퓨터에서Chrome으로돌아갑니다. about:inspect페이지에 연결된 장치가 표시됩니다. 기기 이름 아래에 기기의 Chrome에 열려 있는 모든 페이지 목록이 표시됩니다.

   

5. 웹 페이지 디버깅을 시작하려면 페이지 URL 아래의검사링크를 선택합니다. 그러면 Chrome의개발자 도구가열립니다.

   

6. 요소탭의 왼쪽에서 장치 아이콘을 선택하여 DevTool의 스크린캐스트 기능을 열 수 있습니다. 이렇게 하면 모바일 장치에 표시되는 콘텐츠의 실시간 미리 보기를 열 수 있습니다. 스크린캐스팅을 사용하여 기기와 상호 작용하는 방법에 대한 자세한 내용은Google 설명서를 참조하십시오 .

찰스에 대한 최소 요구 사항

• 찰스는 윈도우, 맥과 리눅스와 호환됩니다
• iOS 및/또는 안드로이드 기기

컴퓨터에 찰스 설정하기

컴퓨터에서 Charles를 실행하려면 아래 단계를 따르십시오.

1. 컴퓨터에 Charles를다운로드하여설치하십시오.
2. 컴퓨터에서찰스를실행합니다. 메뉴에서프록시 > 프록시 설정을선택합니다. 포트가 할당되어 있고 (예: 8888) 투명한 HTTP 프록시 사용옵션이 선택되어 있는지 확인합니다.

   

3. 확인을선택하여 변경 사항을 저장하고 대화상자를 닫습니다.
4. 메뉴에서프록시 > SSL 프록시 설정을선택합니다. SSL 프록싱 사용옵션이 선택되어 있는지 확인합니다.

   

5. 위치섹션에서추가단추를 선택합니다. 위치 편집대화상자에서포트필드로 이동하여443을입력합니다. 확인을선택하여 이 변경 사항을 저장합니다.

   

6. 확인을선택하여위치 편집대화상자를 닫습니다.

   

7. [ 확인 ] 을 선택하여 [ SSL 프록시 설정 ] 대화 상자를 종료합니다.
8. 모바일 장치 또는 원격 브라우저에서 > SSL 프록시 > 설치 Charles 루트 인증서 도움말으로 이동합니다.

   

9. 장치를 설정하는 데 사용할 로컬 서버 IP 및 포트 번호 (8888) 를 식별하는 메시지가 표시됩니다. 인증서를 다운로드하고 설치할 URL도 표시되어야 합니다. 나중에 사용할 수 있도록 컴퓨터에 복사하십시오.

   

기기에서 찰스 설정하기

이 섹션에서는 컴퓨터에서 찰스와 함께 작동하도록 iOS 및/또는 안드로이드 장치를 설정하는 방법을 배우게됩니다.

iOS 기기 설정하기

1. 장치에서 컴퓨터와 동일한 네트워크에 연결되어 있는지 확인합니다. >Wifi 설정으로이동하고 네트워크 이름을 선택하여 고급 옵션을 표시하여이를 확인할 수 있습니다.

   

2. 하단의 HTTP 섹션에서수동모드를 선택합니다. 그런 다음 이전 단계에서 찰스에서 복사한 서버 IP 및 포트 번호 (8888) 를 추가합니다.

   

3. 장치에서 브라우저를 열고http://www.charlesproxy.com/getssl로 이동합니다. 장치 설정으로 리디렉션되며 여기서Charles Proxy 사용자 정의 루트 인증서프로필을 설치하라는 메시지가 표시됩니다. 설치단추를 선택하여 장치에 Charles 인증서를 설치합니다.

   

4. 단계에 따라 Charles 인증서를 설치합니다. 완료되면 완료를 선택합니다.

   

5. 그런 다음 장치가 Charles 인증서를 신뢰하는지 확인할 준비가 되었습니다. 장치에서> 인증서 신뢰 설정 일반 > 정보로이동합니다. 여기에서 찰스 프록시 인증서를 찾아야합니다.

   

6. 찰스 인증서를 사용하도록 설정합니다. 경고 메시지를 확인합니다. Charles로 디버깅하지 않을 때이 인증서를 비활성화 할 수 있습니다.

   

7. 이제 찰스에서 주고받은 모든 데이터를 볼 수 있습니다.

   

안드로이드 기기 설정하기

1. 장치에서 브라우저를 열고//chls.pro/ssl로이동합니다.
2. 인증서 이름대화 상자가 표시됩니다. 인증서의 이름을 지정하고사용 대상필드를Wi-Fi로설정합니다. 확인을선택하여 인증서를 설치합니다.

   

3. 그런 다음설정 > Wi-Fi메뉴를 엽니 다. 장치에 연결한 네트워크 목록이 표시됩니다. 현재 연결되어 있는 무선 네트워크를 선택합니다. 이 네트워크는 컴퓨터에 연결된 네트워크와 일치해야 합니다.
4. 이렇게 하면 편집, 보기 또는 잊기의 세 가지 옵션이 있는 작은 대화 상자가 열립니다. 편집을선택합니다.
5. 이 대화 상자에서 아래쪽으로 스크롤하여고급 옵션 표시필드를 활성화합니다. 그러면 프록시 및 IP 설정이 표시됩니다.

   

6. 프록시 설정필드를수동으로변경합니다.
7. 프록시 호스트 이름필드에 컴퓨터의 IP 주소를 입력하고프록시 포트필드를 Charles에 설정된 포트와 일치시킵니다 (기본적으로 포트는 8888로 설정되어 있음). 저장을 선택합니다 .

   

8. 디바이스의 기본 브라우저에서 웹 사이트로 이동합니다. 당신은 Charles에서 주고받은 모든 데이터를 볼 수 있습니다.