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

Кейс Баскс
Kayce Basques
X GitHub
Меггин Кирни
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 в режиме устройства . In the address bar at the top, you can enter the address of the website you want to debug.

    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 .