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

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

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

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

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

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

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

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

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

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

2. Установка средств удаленной работы для Microsoft Edge (бета-версия) из Microsoft Store

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

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

1. Если вы еще не сделали этого, на устройстве Windows 10 или более поздней версии, которое вы хотите отладить, установите 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 (бета-версия)

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

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

Запустите средства удаленной работы для Microsoft Edge (бета-версия) и при появлении запроса примите диалоговое окно разрешений в приложении. Теперь вы можете закрыть средства удаленной отладки для Microsoft Edge (бета-версия), и вам не нужно открывать их для будущих сеансов удаленной отладки.

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

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

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

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

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

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

Сведения о клиентском устройстве (отладчике) введите в следующем разделе. Откройте вкладки в 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 странице. Дополнительные сведения о портах по умолчанию, используемых порталом устройств.

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

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

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

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

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

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

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

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

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

Важно!

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

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

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

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

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

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

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

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

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

Известные проблемы

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

• В Windows 10 версии 1903 панель "Файлы cookie" на панели "Приложение" пуста. Команда планирует исправить панель cookie в обновлении службы до Windows 10 версии 1903.

• Средство "Аудит" , инструмент "Трехмерное представление ", раздел Эмулированные устройства в разделе "Параметры" и панель дерева "Специальные возможности " в инструменте "Элементы " в настоящее время не работают должным образом.

• Проводник не запускается из средств разработки в средстве "Источники" или на панели "Безопасность " при удаленной отладке.