Удаленная отладка устройств Windows

Удаленная отладка динамического содержимого на устройстве Windows 10 или более поздней версии с компьютера с Windows или macOS.

В этом руководстве описаны следующие задачи:

• Настройте устройство Windows для удаленной отладки и подключитесь к нему с компьютера разработки.

• Проверьте и отладите динамическое содержимое на устройстве Windows с компьютера разработки.

• Экранная трансляция содержимого с устройства Windows в экземпляр DevTools на компьютере разработки.

Шаг 1. Настройка узла (отладочного компьютера)

Главный или отладочный компьютер — это устройство Windows 10 или более поздней версии, которое требуется выполнить отладку. Это может быть удаленное устройство, к которому трудно получить физический доступ, или оно может не иметь периферийных устройств клавиатуры и мыши, что затрудняет взаимодействие с microsoft Edge DevTools на этом устройстве.

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

Установка и настройка Microsoft Edge

1. Если он еще не установлен, на устройстве Windows 10 или более поздней версии, которое требуется отладить, установите Microsoft Edge из раздела Получить и узнать Microsoft Edge.

2. Если вы используете предварительно установленную версию Microsoft Edge на хост-компьютере (отладчик), убедитесь, что у вас есть Microsoft Edge (Chromium), а не Microsoft Edge (EdgeHTML). Быстрый способ проверка — загрузить edge://settings/help в браузере и убедиться, что номер версии 75 или выше.

3. Перейдите по адресу edge://flags в Microsoft Edge.

4. В поле Флаги поиска введите Включить удаленную отладку с помощью портала устройств Windows. Установите для этого флага значение Включено. Затем нажмите кнопку Перезапустить , чтобы перезапустить Microsoft Edge.

Установка средств удаленной отладки для Microsoft Edge

1. Установите средства удаленного доступа для Microsoft Edge из Microsoft Store.

   Чтобы настроить главный (отладчик) компьютер, он должен работать Windows 10 версии 1903 или более поздней. Если вы используете Windows 10 или более поздней версии 1809 или более ранней, кнопка Скачать или получить на этой странице удаленных средств для Microsoft Edge может быть отключена. Обновите главный (отладчик) компьютер, чтобы получить удаленные инструменты для Microsoft Edge.

   

2. Запустите удаленные инструменты для Microsoft Edge и при появлении запроса примите диалоговое окно разрешений в приложении.

3. Закройте удаленные инструменты для Microsoft Edge. Вам не нужно открывать его для будущих сеансов удаленной отладки.

Активация режима разработчика и включение портала устройств

1. Активация режима разработчика; См . раздел Включение устройства для разработки.

2. Включение портала устройств; См . статью Обзор портала устройств Windows.

3. Если вы используете сеть Wi-Fi, убедитесь, что сеть помечена как доменная или частная. Чтобы проверить состояние, откройте приложение Безопасность Windows, выберите Брандмауэр & защита сети и проверьте, указана ли ваша сеть в качестве сети домена или частной сети.

4. Если ваша сеть указана как общедоступная, перейдите в раздел Параметры>Сеть & Интернет>Wi-Fi, щелкните свою сеть и переключите кнопку Профиль сети в значение Частное.

5. Откройте приложение "Параметры". В поле Найти параметр введите Developer settings и выберите его. Переключение в режим разработчика. Теперь вы можете включить портал устройств, установив для параметра Включить удаленные диагностика через локальные сетевые подключения значение Включено. Затем при необходимости можно включить проверку подлинности , чтобы клиентское устройство (отладчик) должно предоставить правильные учетные данные для подключения к этому устройству.

6. Если включить удаленные диагностика через локальные сетевые подключения. Ранее он был включен, его необходимо отключить и снова включить, чтобы портал устройств работал с инструментами удаленного доступа для Microsoft Edge (бета-версия).

   Если раздел Для разработчиков не отображается в разделе Параметры, возможно, портал устройств уже включен, поэтому попробуйте перезапустить устройство Windows 10 или более поздней версии.

   

7. Обратите внимание на IP-адрес компьютера и порт подключения, которые отображаются в разделе Подключение с помощью:. IP-адрес на рисунке ниже и 192.168.86.78 порт подключения :50080

   

   Сведения о клиентском устройстве (отладчике) введите в следующем разделе "Шаг 2. Настройка клиента (компьютера отладчика)".

8. Откройте вкладки в Microsoft Edge и прогрессивном веб-приложения (PWA) на хост-компьютере (отладчик), который требуется выполнить отладку с клиентского компьютера (отладчика).

Шаг 2. Настройка клиента (компьютер отладчика)

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

1. Чтобы настроить компьютер клиента (отладчика), установите Microsoft Edge с этой страницы , если вы еще этого не сделали.

2. Если вы используете предварительно установленную версию Microsoft Edge на хост-компьютере (отладчик), убедитесь, что у вас есть Microsoft Edge (Chromium), а не Microsoft Edge (EdgeHTML). Быстрый способ проверка — загрузить edge://settings/help в браузере и убедиться, что номер версии 75 или выше.

3. Перейдите на страницу edge://inspect в Microsoft Edge. По умолчанию вы должны находиться в разделе Устройства .

4. В разделе Подключение к удаленному устройству Windows введите IP-адрес и порт подключения хост-компьютера (отладчика) в текстовом поле по следующему шаблону: http://IP address:connection port.

5. Щелкните Подключиться к устройству.

   

6. Если вы настроили проверку подлинности для хост-компьютера (отладчика), вам будет предложено ввести имя пользователя и пароль для клиентского компьютера (отладчика) для успешного подключения.

Использование https вместо http

Если вы хотите подключиться к узлу (отладчику) компьютера, используя https вместо http:

1. Перейдите по адресу http://IP address:50080/config/rootcertificate в Microsoft Edge на компьютере клиента (отладчика). При этом автоматически скачивается сертификат безопасности с именем rootcertificate.cer.

2. Выберите .rootcertificate.cer Откроется средство диспетчера сертификатов Windows.

3. Щелкните Установить сертификат..., убедитесь, что текущий пользователь включен, а затем нажмите кнопку Далее.

4. Щелкните Поместить все сертификаты в следующее хранилище и нажмите кнопку Обзор....

5. Выберите хранилище доверенных корневых центров сертификации и нажмите кнопку ОК.

6. Последовательно нажмите кнопки Далее и Готово.

7. При появлении запроса убедитесь, что вы хотите установить этот сертификат в хранилище доверенных корневых центров сертификации .

8. Теперь при подключении к главному (отладчику) компьютеру с клиентского компьютера (отладчика) с помощью edge://inspect страницы необходимо использовать другое connection port значение. По умолчанию для настольных компьютеров Windows портал устройств использует в 50080connection port качестве для http. Для httpsна портале устройств используется 50043 следующий шаблон: https://IP address:50043 на edge://inspect странице.

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

Порты по умолчанию

Порт по умолчанию для http — , 50080 а порт по умолчанию для https — 50043, но это не всегда так, так как порты на портале устройств для классических утверждений в эфемерном диапазоне (>50 000), чтобы предотвратить конфликт с существующими утверждениями портов на устройстве.

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

Сведения о параметрах порта см. в статье Портал устройств Windows для настольных компьютеров.

См. также:

• Конфигурация на основе реестра напортале устройств Windows для настольных компьютеров.

Шаг 3. Отладка содержимого на узле из клиента

Если компьютер клиента (отладчика) успешно подключается к главному компьютеру (отладчик), на edge://inspect странице клиента теперь отображается список вкладок в Microsoft Edge и все открытые PWA на узле.

Определите содержимое, которое требуется отладить, и нажмите кнопку Проверить. Microsoft Edge DevTools откроется на новой вкладке и экранная передача содержимого с хост-компьютера (отладчика) на клиентский компьютер (отладчик). Теперь вы можете использовать все возможности Microsoft Edge DevTools на клиенте для содержимого, выполняемого на узле.

См. также:

• Документация по Microsoft Edge DevTools

Проверка элементов

Например, попробуйте проверить элемент . Перейдите к инструменту Элементы экземпляра DevTools на клиенте и наведите указатель мыши на элемент, чтобы выделить его в окне просмотра ведущего устройства.

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

Выбор элемента отключается после первого касания, поэтому его необходимо снова включать каждый раз, когда вы хотите использовать эту функцию.

Важно!

Область Прослушиватели событий в инструменте Элементы пуста в Windows 10 версии 1903. Это известная проблема, и команда планирует исправить область прослушивателей событий в сервисном обновлении до Windows 10 версии 1903.

Шаг 4. Экранная передача экрана на клиентское устройство

По умолчанию в экземпляре DevTools на клиенте включена передача с экрана, что позволяет просматривать содержимое на главном устройстве в экземпляре DevTools на клиентском устройстве. Щелкните Переключить экранную трансляцию , чтобы включить или отключить эту функцию.

Вы можете взаимодействовать с экранной трансляцией несколькими способами:

• Щелчки претворяются в касания, запуская правильные события касания на устройстве.
• Нажатия клавиш на компьютере отправляются на устройство.
• Чтобы имитировать жест сжатия, удерживайте нажатой клавишу SHIFT во время перетаскивания.
• Чтобы прокрутить страницу, используйте трекпад или колесико мыши или наведите указатель мыши.

Примечания о скринкастах:

• Экранные трансляции отображают только содержимое страницы. Прозрачные части экранной трансляции представляют интерфейсы устройств, такие как адресная строка Microsoft Edge, панель задач Windows 10 или более поздней версии, а также клавиатура Windows 10 или более поздней версии.

• Экранные трансляции негативно влияют на частоту кадров. Отключите трансляцию с экрана при измерении прокрутки или анимации, чтобы получить более точное представление о производительности страницы.

• Если экран хост-устройства блокируется, содержимое экранной трансляции исчезнет. Разблокируйте экран хост-устройства, чтобы автоматически возобновить трансляцию.