포트 전달을 사용하여 다음을 수행할 수 있습니다.
- 케이스 1. 다른 Chrome 인스턴스에서 열린 탭을 디버그합니다.
- 케이스 2. 개발 머신 웹 서버에서 사이트를 호스팅한 다음 USB 케이블을 통해 Android 기기에서 콘텐츠에 액세스합니다.
케이스 2에서 포트 전달은 Android 기기에서 개발 머신의 TCP 포트에 매핑되는 수신 대기 TCP 포트를 통해 작동합니다. 포트 간 트래픽은 Android 기기와 개발 머신 사이의 USB 연결을 통해 이동하므로 연결은 네트워크 구성에 의존하지 않습니다.
또한 웹 서버에서 맞춤 도메인을 사용하는 경우 맞춤 도메인 매핑을 사용하여 해당 도메인의 콘텐츠에 액세스하도록 Android 기기를 설정할 수 있습니다.
포트 전달 설정
케이스에 따라 다음 단계를 따릅니다.
사례 1: 다른 Chrome 인스턴스로 포트 전달 설정
--remote-debugging-port=PORT매개변수를 사용하여 다른 Chrome 인스턴스를 실행합니다. 예를 들면 다음과 같습니다.MacOS
open -a "Google Chrome" --args --remote-debugging-port=PORTWindows
start chrome --remote-debugging-port=PORTLinux
google-chrome --remote-debugging-port=PORT디버깅하는 Chrome 인스턴스에서 다음을 사용합니다.
chrome://inspect/#devices를 엽니다.
네트워크 타겟 탐색이 선택되어 있는지 확인합니다.- 체크박스 옆에 있는 구성을 클릭합니다.
대상 검색 설정에서
localhost:PORT을 입력하고 포트 전달 사용 설정을 선택한 다음 완료를 클릭합니다.
기기로 돌아가면 새로운 원격 대상이 표시됩니다. 디버그하려는 탭 옆에 있는 inspect를 클릭합니다.
기기 모드에서 새 DevTools 창이 열립니다. 상단의 주소 표시줄에 디버깅할 웹사이트의 주소를 입력할 수 있습니다.
주소 표시줄 옆에서 입력 방법을 전환할 수 있습니다.
사례 2: USB를 통해 Android 기기에 포트 포워딩 설정
개발 머신과 Android 기기 간에 원격 디버깅을 설정합니다. 완료하면 목록에 Android 기기가 표시됩니다.
- Discover USB devices가 선택되어 있는지 확인합니다.
체크박스 옆에 있는 포트 전달을 클릭합니다.
포트 전달 설정에서는
localhost:8080가 기본적으로 설정됩니다. 포트 전달 사용 설정을 선택합니다.
.다른 포트를 설정하려면 다음 단계를 따르세요. 그렇지 않으면 단계를 건너뛰고 완료를 클릭합니다.
왼쪽의 포트 텍스트 필드에 Android 기기에서 사이트에 액세스할 포트 번호를 입력합니다. 예를 들어
localhost:5000에서 사이트에 액세스하려면5000를 입력합니다.오른쪽의 IP 주소 및 포트 텍스트 필드에 개발 머신의 웹 서버에서 사이트가 실행 중인 IP 주소 또는 호스트 이름, 포트 번호를 차례로 입력합니다. 예를 들어 사이트가
localhost:5000에서 실행 중인 경우localhost:5000를 입력합니다.완료를 클릭합니다.
이제 포트 전달이 설정되었습니다. 기기 이름 외에도 상단에서 포트 전달의 상태 표시기를 볼 수 있습니다.
콘텐츠를 보려면 Android 기기에서 Chrome을 열고 기기 포트 필드에 지정한 localhost 포트로 이동합니다. 예를 들어 필드에 5000를 입력하면 localhost:5000로 이동합니다.
커스텀 로컬 도메인에 매핑
커스텀 도메인 매핑을 사용하면 커스텀 도메인을 사용하는 개발 머신의 웹 서버에서 Android 기기의 콘텐츠를 볼 수 있습니다.
예를 들어 사이트에서 허용 목록에 포함된 도메인 chrome.devtools에서만 작동하는 서드 파티 자바스크립트 라이브러리를 사용한다고 가정해 보겠습니다. 따라서 개발 머신에서 hosts 파일에 항목을 만들어 이 도메인을 localhost (예: 127.0.0.1 chrome.devtools)에 매핑합니다. 커스텀 도메인 매핑 및 포트 전달을 설정하면 Android 기기에서 URL chrome.devtools을 통해 사이트를 볼 수 있습니다.
프록시 서버로 포트 전달 설정
커스텀 도메인을 매핑하려면 개발 머신에서 프록시 서버를 실행해야 합니다. 프록시 서버의 예로는 Charles, Squid, Fiddler가 있습니다.
프록시에 포트 전달을 설정하려면 다음 단계를 따르세요.
프록시 서버를 실행하고 사용 중인 포트를 확인합니다.
Android 기기로 포트 전달을 설정합니다. 로컬 주소 필드에
localhost:와 프록시 서버가 실행 중인 포트를 차례로 입력합니다. 예를 들어 포트8000에서 실행 중이면localhost:8000을 입력합니다. 기기 포트 필드에 Android 기기가 리슨할 번호(예:3333)를 입력합니다.
기기에서 프록시 설정 구성
그런 다음 프록시 서버와 통신하도록 Android 기기를 구성해야 합니다.
- Android 기기에서 설정 > Wi-Fi로 이동합니다.
연결된 네트워크의 이름을 길게 누릅니다.
네트워크 수정을 탭합니다.
고급 옵션을 탭합니다. 프록시 설정이 표시됩니다.
프록시 메뉴를 탭하고 수동을 선택합니다.
프록시 호스트 이름 필드에
localhost를 입력합니다.프록시 포트 필드에 이전 섹션에서 기기 포트로 입력한 포트 번호를 입력합니다.
저장을 탭합니다.
이렇게 설정하면 기기가 모든 요청을 개발 머신의 프록시로 전달합니다. 프록시는 기기를 대신하여 요청하므로 맞춤설정된 로컬 도메인에 대한 요청이 올바르게 처리됩니다.
이제 개발 머신에서와 마찬가지로 Android 기기에서 커스텀 도메인에 액세스할 수 있습니다.
웹 서버가 비표준 포트로 실행되는 경우 Android 기기에서 콘텐츠를 요청할 때 포트를 지정해야 합니다. 예를 들어 웹 서버가 포트 7331에서 커스텀 도메인 chrome.devtools을 사용하는 경우 Android 기기에서 사이트를 볼 때는 chrome.devtools:7331 URL을 사용해야 합니다.