Вы можете использовать переадресацию портов для:
- Пример 1. Отладка вкладки, открытой в другом экземпляре Chrome.
- Вариант 2. Разместите сайт на веб-сервере на машине разработчика, а затем получите доступ к контенту с устройства Android через USB-кабель.
В варианте 2 переадресация портов работает через прослушиваемый TCP-порт на вашем устройстве Android, который сопоставляется с TCP-портом на вашей машине разработки. Трафик между портами передается через USB-соединение между вашим устройством Android и машиной разработки, поэтому соединение не зависит от конфигурации вашей сети.
Кроме того, если ваш веб-сервер использует собственный домен, вы можете настроить ваше устройство Android для доступа к контенту по этому домену с помощью сопоставления пользовательских доменов .
Настройте переадресацию портов.
В зависимости от вашей ситуации, выполните следующие шаги.
Вариант 1: Настройка переадресации портов на другой экземпляр Chrome.
Запустите, например, еще один экземпляр Chrome с параметром
--remote-debugging-port= PORT: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и установите флажок. Включите переадресацию портов и нажмите «Готово» . 
В разделе «Устройства» вы увидите новый удаленный целевой объект. Нажмите «Проверить» рядом с вкладкой, которую хотите отладить.
- Откройте
В режиме устройства открывается новое окно «Инструменты разработчика». В адресной строке вверху можно ввести адрес веб-сайта, который вы хотите отладить.
Рядом с адресной строкой можно переключать способы ввода.
Вариант 2: Настройка переадресации портов через USB для вашего устройства Android.
Настройте удалённую отладку между вашей машиной разработчика и вашим устройством Android. После завершения вы должны увидеть своё устройство Android в списке.
Убеждаться
Включена опция "Обнаружение USB-устройств" .Нажмите кнопку «Переадресация портов» рядом с флажком.
В настройках переадресации портов по умолчанию установлен
localhost:8080. Установите флажок «Включить переадресацию портов» .
.Если вы хотите настроить другие порты, выполните следующие два шага. В противном случае пропустите эти шаги и нажмите «Готово» .
В поле «Порт» слева введите номер порта, с которого вы хотите получить доступ к сайту на своем устройстве Android. Например, если вы хотите получить доступ к сайту с
localhost:5000вы должны ввести5000.В текстовом поле справа, содержащем IP-адрес и имя хоста, на котором работает ваш сайт на веб-сервере вашей машины разработки, укажите номер порта. Например, если ваш сайт работает по адресу
localhost:5000, введитеlocalhost:5000.Нажмите «Готово» .
Настройка переадресации портов завершена. Вверху, а также рядом с именем устройства, отображается индикатор состояния переадресации портов.
Чтобы просмотреть контент, откройте Chrome на своем устройстве Android и перейдите на порт localhost , указанный в поле « Порт устройства» . Например, если вы ввели 5000 в это поле, то вы перейдете по адресу localhost:5000 .
Сопоставление с пользовательскими локальными доменами
Сопоставление пользовательского домена позволяет просматривать контент на устройстве Android с веб-сервера на вашей машине разработки, использующего пользовательский домен.
Например, предположим, что ваш сайт использует стороннюю библиотеку JavaScript, которая работает только на домене chrome.devtools указанном в списке разрешенных. В этом случае вы создаете запись в файле hosts на своей машине разработчика, чтобы сопоставить этот домен с localhost (т.е. 127.0.0.1 chrome.devtools ). После настройки сопоставления доменов и переадресации портов вы сможете просмотреть сайт на своем устройстве Android по адресу chrome.devtools .
Настройте переадресацию портов на прокси-сервер.
Для подключения пользовательского домена необходимо запустить прокси-сервер на вашей машине для разработки. Примерами прокси-серверов являются Charles , Squid и Fiddler .
Для настройки переадресации портов на прокси-сервер:
Запустите прокси-сервер и запишите используемый им порт.
Настройте переадресацию портов для вашего Android-устройства. В поле «Локальный адрес» введите
localhost:а затем порт, на котором работает ваш прокси-сервер. Например, если он работает на порту8000, то вам нужно ввестиlocalhost:8000. В поле «Порт устройства» введите номер порта, на котором ваше Android-устройство должно прослушивать запросы, например,3333.
Настройте параметры прокси-сервера на вашем устройстве.
Далее вам необходимо настроить ваше устройство Android для связи с прокси-сервером.
- На вашем устройстве Android перейдите в Настройки > Wi-Fi .
Нажмите и удерживайте название сети, к которой вы подключены.
Нажмите «Изменить сеть» .
Нажмите «Дополнительные параметры» . Отобразятся настройки прокси-сервера.
Нажмите на меню «Прокси» и выберите «Вручную» .
В поле «Имя хоста прокси» введите
localhost.В поле «Порт прокси» введите номер порта, который вы указывали для порта устройства в предыдущем разделе.
Нажмите « Сохранить ».
При таких настройках ваше устройство перенаправляет все свои запросы на прокси-сервер на вашей машине разработчика. Прокси-сервер отправляет запросы от имени вашего устройства, поэтому запросы к вашему локальному домену обрабатываются корректно.
Теперь вы можете получать доступ к пользовательским доменам на своем устройстве Android так же, как и на компьютере разработчика.
Если ваш веб-сервер работает на нестандартном порту, не забудьте указать порт при запросе контента с вашего устройства Android. Например, если ваш веб-сервер использует пользовательский домен chrome.devtools на порту 7331 , то при просмотре сайта с вашего устройства Android следует использовать URL-адрес chrome.devtools:7331 .