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

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

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

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

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

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

Шаг 1. Настройка узла (отладчика)

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

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

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

  1. Если вы еще не установили отладку на устройстве с Windows 10 или более поздней версии, которое вы хотите отладить, установите Microsoft Edge из раздела «Знакомство с Microsoft Edge».

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

  3. В Microsoft Edge перейдите в edge://flagsраздел .

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

Настройка

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

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

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

    Удаленные средства для Microsoft Edge в Microsoft Store

  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

    Обратите внимание на IP-адрес и порт подключения в параметрах.

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

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

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

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

  1. Чтобы настроить клиентский компьютер (отладчик), установите Microsoft Edge со страницы Знакомство с 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. Нажмите кнопку "Подключить к устройству".

    Страница edge://inspect клиента

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

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

Если вы хотите подключиться к хост-компьютеру (отладчику) с помощью httpshttp:

  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 портал устройств использует 50080 в качестве файла connection port для http. Для https, используется порталом 50043 устройств, следуйте следующему шаблону: https://IP address:50043 на edge://inspect странице.

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

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

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

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

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

См. также:

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

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

На странице edge://inspect в клиенте отображаются вкладки Microsoft Edge и приложения PWA на узле

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

Средства разработчика Microsoft Edge в клиенте Отладка вкладки в Microsoft Edge на узле

См. также:

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

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

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

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

Важно!

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

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

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

Кнопка

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

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

Заметки о скринкастах:

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

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

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

  • Last updated on