Удаленная отладка классических приложений WebView2 WinUI 2 (UWP)

Чтобы использовать средства разработки Microsoft Edge для отладки приложения WebView2 WinUI 2 (UWP), используйте удаленную отладку. Удаленная отладка необходима для приложений WebView2 WinUI 2 (UWP), так как в настоящее время встроенные средства разработки не могут быть запущены в приложении WebView2 WinUI 2 (UWP) с подписью магазина.

Удаленное подключение средств разработки к классическому приложению WinUI 2 (UWP) WebView2

Удаленно подключите Средства разработки Microsoft Edge к классическому приложению WinUI 2 (UWP) WebView2 следующим образом:

1. В Microsoft Edge перейдите по адресу edge://inspect. Откроется страница Проверка с помощью средств разработчика Edge :

   

2. Включить Developer Mode: откройте Параметры Windows, выберите Конфиденциальность & безопасность>для разработчиков, а затем включите переключатель Режим разработчика .

3. На той же странице Параметры включите переключатель Портал устройств :

   

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

4. Если вы получили такое сообщение, обновите операционную систему (ОС) до последней версии, а затем включите переключатель Портал устройств .

5. При появлении запроса на установку пакета режима разработчика Windows нажмите кнопку Да:

   

   После завершения установки обратите внимание на URL-адрес, который будет использоваться для подключения удаленной отладки. Чтобы найти этот URL-адрес, разверните раскрывающийся список Портал устройств . В этом случае будет использоваться http://localhost:50080URL-адрес портала устройства:

   

6. Установите удаленные инструменты для Microsoft Edge из Microsoft Store.

7. В Microsoft Edge перейдите по URL-адресу портала устройств, который вы записали ранее. Убедитесь, что страница Подтверждение параметров безопасности загружена (на вкладке Портал устройств Windows ):

   

8. Если выполняется отладка только локальных приложений, можно нажать кнопку Продолжить с незащищенным подключением .

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

9. Убедитесь, что вы перенаправлены на страницу Диспетчер приложений: портал устройств Windows :

   

10. Перейдите по адресу http://<Device Portal URL>/msedge и убедитесь, что средства удаленной работы для Microsoft Edge работают. Страница загружает пустой список: [], если не запущено приложение, которое можно отлаживать с помощью удаленных средств.

11. Настройте приложение WebView2 WinUI 2 (UWP) для удаленной отладки:

    Чтобы включить удаленную отладку, в проекте должна быть задана переменная среды. Эту переменную необходимо задать перед созданием экземпляра CoreWebView2 , а также перед заданием WebView2.Source свойства или вызовом WebView2.EnsureCoreWebView2Async метода .

    Задайте следующую переменную:

    "WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS", "--enable-features=msEdgeDevToolsWdpRemoteDebugging"
    

    Например, если вы используете пример приложения UWP WebView2, можно задать переменную среды, добавив следующую строку в Browser.xaml.cs файл:

    Environment.SetEnvironmentVariable("WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS", "--enable-features=msEdgeDevToolsWdpRemoteDebugging");
    

    Строка нумеруется 33 на этом снимке экрана в конструкторе Browser() под элементом #endif , который заключает в оболочку существующую SetEnvironmentVariable инструкцию:

    

12. Запустите приложение.

13. Перейдите в http://<Device Portal URL>/msedge, например http://localhost:50080/msedge, и убедитесь, что экземпляр WebView2 отображается в списке:

    

14. Перейдите по адресу edge://inspect. В текстовом поле Подключиться к удаленному устройству Windows введите http://<Device Portal URL>, например http://localhost:50080, и нажмите кнопку Подключиться к устройству.

15. Убедитесь, что вы успешно можете подключиться, чтобы отлаживаемый элемент управления WebView2 с именем Edge был указан под именем компьютера:

    

16. В нижней части элемента управления Edge WebView2 щелкните ссылку проверка . Microsoft Edge DevTools откроется для элемента управления WebView2:

    

Теперь вы можете использовать Средства разработки Microsoft Edge для проверки и отладки элемента управления WebView2.

См. также

• Удаленная отладка приложений WebView2 WinUI 2 (UWP)