Доступ к локальным серверам

Размещение сайта на веб-сервере разработчика, а затем доступ к содержимому с устройства Android.

С помощью USB-кабеля и Microsoft Edge DevTools, запустите сайт с компьютера для разработки и просмотрите сайт на устройстве с Android.

Краткий обзор

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

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

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

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

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

  2. В диалоговом окне Проверка устройств в DevTools включите переадресацию порта.

  3. Нажмите кнопку Добавить правило.

    Добавление правила переадресации портов

  4. В поле " порт устройства " слева введите localhost номер порта, с которого вы хотите получить доступ к сайту на устройстве с Android. Например, если вы хотите получить доступ к сайту из localhost:5000 ввода 5000 .

  5. В текстовом поле " локальный адрес " щелкните правой кнопкой мыши IP-адрес или имя узла, на котором расположен сайт, который находится на компьютере разработчика, а затем укажите номер порта. Например, если ваш веб-сайт запущен на localhost:7331 входе localhost:7331 .

  6. Нажмите кнопку Добавить.

Переадресация порта теперь настроена. Просмотрите индикатор состояния для порта на вкладке на вашем устройстве в диалоговом окне Проверка устройств .

Состояние переадресации порта

Чтобы просмотреть содержимое, откройте приложение Microsoft EDGE на устройстве с Android и перейдите к localhost порту, который вы указали в поле " порт устройства ". Например, если вы ввели 5000 поле, перейдите на страницу localhost:5000 .

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

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

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

Настройка пересылки порта на прокси-сервер

Для сопоставления собственного домена необходимо запустить прокси-сервер на компьютере разработчика. Ниже приведены примеры прокси-серверов: Чарльз, Squidи Fiddler.

Чтобы настроить перенаправление порта на прокси-сервер, выполните указанные ниже действия.

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

    Примечание

    Прокси-сервер и веб-сервер должны работать на разных портах.

  2. Настройка пересылки порта на устройство с Android. В поле Local Address (локальный адрес ) введите localhost: за ним порт, на котором работает прокси-сервер. Например, если он запущен на порте 8000 , перейдите на страницу localhost:8000 . В поле порт устройства введите номер, который будет прослушивать ваше устройство с Android, например 3333 .

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

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

  1. На устройстве с Android перейдите в раздел Параметры > Wi-Fi.

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

    Примечание

    Параметры прокси-сервера применяются к каждой сети.

  3. Выберите команду изменить сеть.

  4. Выберите Дополнительные параметры. Отображение параметров прокси-сервера.

  5. Откройте меню прокси и выберите пункт вручную.

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

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

  8. Выберите Сохранить.

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

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

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

Совет

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

Примечание

Части этой страницы представляют собой изменения, основанные на работе, созданной и предоставленной компанией Google и использованными в соответствии с условиями, описанными в лицензии Creative Commons 4,0 международная лицензия.
Исходная страница будет найдена здесь и Kayce Basques \ (технический писатель, Chrome DevTools \ & Lighthouse ) и Meggin Kearney \ (технический редактор ).

Лицензия Creative Commons
Эта работа предоставляется в рамках международной лицензии Creative Commons Attribution 4.0 International License.