Доступ к локальным серверам и экземплярам Chrome с переадресацией портов,Доступ к локальным серверам и экземплярам Chrome с переадресацией портов,Доступ к локальным серверам и экземплярам Chrome с переадресацией портов,Доступ к локальным серверам и экземплярам Chrome с переадресацией портов

Кейси Баски
Меггин Кирни
Meggin Kearney
София Емельянова
Sofia Emelianova
GitHub

Вы можете использовать переадресацию портов для:

  • Случай 1 . Отладка вкладки, открытой в другом экземпляре Chrome.
  • Случай 2 . Разместите сайт на веб-сервере машины разработки, а затем получите доступ к содержимому с устройства Android через USB-кабель.

В случае 2 переадресация портов работает через прослушиваемый TCP-порт на вашем устройстве Android, который сопоставляется с TCP-портом на вашей машине разработки. Трафик между портами передается через USB-соединение между вашим Android-устройством и компьютером разработки, поэтому соединение не зависит от конфигурации вашей сети.

Кроме того, если ваш веб-сервер использует личный домен, вы можете настроить свое устройство Android для доступа к содержимому этого домена с помощью пользовательского сопоставления домена .

Настроить переадресацию портов

В зависимости от вашего случая, выполните следующие действия.

Случай 1. Настройка переадресации портов на другой экземпляр Chrome

  1. Запустите другой экземпляр Chrome с параметром --remote-debugging-port= PORT , например:

    MacOS 

    open -a "Google Chrome" --args --remote-debugging-port=PORT

    Окна 

    start chrome --remote-debugging-port=PORT

    Линукс 

    google-chrome --remote-debugging-port=PORT

  2. В экземпляре Chrome вы выполняете отладку с помощью:

    1. Откройте chrome://inspect/#devices .
    2. Убеждаться Флажок. Обнаружение сетевых целей отмечено.
    3. Нажмите Настроить рядом с флажком.

    4. В настройках обнаружения целей введите localhost: PORT и проверьте Флажок. Включите переадресацию портов и нажмите «Готово» .

      Окно настроек целевого обнаружения.

    5. Вернувшись в «Устройства» , вы увидите новую удаленную цель. Нажмите «Проверить» рядом с вкладкой, которую вы хотите отладить.

      Ссылка проверки рядом с вкладкой удаленной цели.

  3. Откроется новое окно DevTools в режиме устройства . В адресной строке вверху вы можете ввести адрес веб-сайта, который хотите отладить.

    DevTools в режиме устройства.

  4. Рядом с адресной строкой вы можете переключать методы ввода.

Вариант 2. Настройте переадресацию портов через USB на устройстве Android.

  1. Настройте удаленную отладку между вашим компьютером разработки и устройством Android. Когда вы закончите, вы должны увидеть свое устройство Android в списке.

    Устройство Android в списке.

  2. Убеждаться Флажок. Обнаружение USB-устройств отмечено.

  3. Нажмите «Переадресация портов» рядом с флажком.

  4. В настройках переадресации портов по умолчанию установлено localhost:8080 . Установите флажок Включить переадресацию портов .

    Настройки переадресации портов. .

  5. Если вы хотите настроить другие порты, выполните следующие действия. В противном случае пропустите эти шаги и нажмите «Готово» .

  6. В текстовом поле «Порт» слева введите номер порта, с которого вы хотите иметь доступ к сайту на вашем устройстве Android. Например, если вы хотите получить доступ к сайту с localhost:5000 вам следует ввести 5000 .

  7. В текстовое поле IP-адрес и порт справа введите IP-адрес или имя хоста, на котором работает ваш сайт на веб-сервере вашего компьютера разработки, а затем номер порта. Например, если ваш сайт работает на localhost:5000 вам следует ввести localhost:5000 .

  8. Нажмите Готово .

Переадресация портов настроена. Вы можете увидеть индикатор состояния переадресации порта вверху, а также рядом с именем устройства.

Статус переадресации портов.

Чтобы просмотреть содержимое, откройте Chrome на своем устройстве Android и перейдите к порту localhost , указанному в поле «Порт устройства» . Например, если вы ввели в поле 5000 , вы перейдете на localhost:5000 .

Сопоставление с пользовательскими локальными доменами

Сопоставление пользовательского домена позволяет просматривать контент на устройстве Android с веб-сервера на вашем компьютере разработки, который использует личный домен.

Например, предположим, что ваш сайт использует стороннюю библиотеку JavaScript, которая работает только с доменом chrome.devtools включенным в список разрешенных. Итак, вы создаете запись в файле hosts на своем компьютере разработки, чтобы сопоставить этот домен с localhost (т. е. 127.0.0.1 chrome.devtools ). После настройки пользовательского сопоставления доменов и переадресации портов вы сможете просматривать сайт на своем устройстве Android по URL-адресу chrome.devtools .

Настройте переадресацию портов на прокси-сервер

Чтобы сопоставить собственный домен, вам необходимо запустить прокси-сервер на вашем компьютере разработки. Примерами прокси-серверов являются Charles , Squid и Fiddler .

Чтобы настроить переадресацию портов на прокси:

  1. Запустите прокси-сервер и запишите порт, который он использует.

  2. Настройте переадресацию портов на свое устройство Android. В поле локального адреса введите localhost: а затем порт, на котором работает ваш прокси-сервер. Например, если он работает на порту 8000 , вам следует ввести localhost:8000 . В поле порта устройства введите номер, который вы хотите, чтобы ваше устройство Android прослушивало, например 3333 .

Настройте параметры прокси на вашем устройстве

Далее вам необходимо настроить ваше Android-устройство для связи с прокси-сервером.

  1. На вашем устройстве Android перейдите в «Настройки» > «Wi-Fi» .

  2. Нажмите и удерживайте имя сети, к которой вы подключены.

  3. Нажмите «Изменить сеть» .

  4. Нажмите «Дополнительные параметры» . Отобразятся настройки прокси.

  5. Коснитесь меню «Прокси» и выберите «Вручную» .

  6. В поле Имя хоста прокси введите localhost .

  7. В поле «Порт прокси» введите номер порта, который вы указали для порта устройства в предыдущем разделе.

  8. Нажмите « Сохранить ».

С этими настройками ваше устройство перенаправляет все свои запросы на прокси-сервер на вашей машине разработки. Прокси-сервер отправляет запросы от имени вашего устройства, поэтому запросы к вашему настроенному локальному домену обрабатываются правильно.

Теперь вы можете получить доступ к пользовательским доменам на своем устройстве Android так же, как на компьютере разработки.

Если ваш веб-сервер использует нестандартный порт, не забудьте указать порт при запросе контента с вашего устройства Android. Например, если ваш веб-сервер использует собственный домен chrome.devtools на порту 7331 , при просмотре сайта с устройства Android вам следует использовать URL-адрес chrome.devtools:7331 .