Поделиться через

Пример приложения WPF с расширением CDP

  • Статья

В этом примере WebView2 показано, как использовать расширение CDP WebView2 для использования протокола Chrome DevTools (CDP) в приложении WPF.

  • Пример имени: WV2CDPExtensionWPFSample
  • Каталог репозитория: WV2CDPExtensionWPFSample
  • Файл решения: WV2CDPExtensionWPFSample.sln

В этом примере WV2CDPExtensionWPFSample используется расширение CDP WebView2 (пакет NuGet Microsoft.Web.WebView2.DevToolsProtocolExtension ). Этот пример вызывает методы протокола Chrome DevTools для DevToolsProtocolHelper объекта в WebView2.

Этот пример создан как проект WPF Visual Studio 2019. Он использует C# в среде WebView2.

Пример приложения WV2CDPExtensionWPFSample

Меню Команды средства разработки :

Меню Команд средства разработки приложения WV2CDPExtensionWPFSample

Меню DevTools Events (События средств разработки ):

Меню

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

Шаг 1. Установка канала предварительной версии Microsoft Edge

Мы рекомендуем использовать последнюю версию канала Canary.

  1. Если канал предварительной версии Microsoft Edge (бета-версия, разработка или Canary) еще не установлен, в отдельном окне или на вкладке см. статью Установка канала предварительной версии Microsoft Edge в статье Настройка среды разработки для WebView2. Выполните действия, описанные в этом разделе, а затем вернитесь на эту страницу и выполните указанные ниже действия.

Шаг 2. Установка Visual Studio с поддержкой .NET

Требуется Microsoft Visual Studio (с поддержкой .NET). Microsoft Visual Studio Code не поддерживается в этом примере.

  1. Если Visual Studio (минимальная требуемая версия) с поддержкой .NET еще не установлена, в отдельном окне или на вкладке см. статью Установка Visual Studioстатьи Настройка среды разработки для WebView2. Выполните действия, описанные в этом разделе, а затем вернитесь на эту страницу и выполните указанные ниже действия.

Шаг 3. Клонирование или скачивание репозитория WebView2Samples

  1. Если это еще не сделано, клонируйте или скачайте репозиторий WebView2Sample на локальный диск. В отдельном окне или на вкладке см . раздел Скачивание репозитория WebView2Samplesстатьи Настройка среды разработки для WebView2. Выполните действия, описанные в этом разделе, а затем вернитесь на эту страницу и продолжите работу ниже.

Шаг 4. Открытие решения в Visual Studio

  1. На локальном .sln диске откройте файл в Visual Studio в каталоге :

    • <your-repos-directory>/WebView2Samples/SampleApps/WV2CDPExtensionWPFSample/WV2CDPExtensionWPFSample.sln

    или

    • <your-repos-directory>/WebView2Samples-main/SampleApps/WV2CDPExtensionWPFSample/WV2CDPExtensionWPFSample.sln

Если вы хотите использовать Visual Studio 2017, в Visual Studio измените набор инструментов платформы проекта в разделе Свойства > проекта Свойства проекта. Свойства конфигурации общие >> набор инструментов платформы. Чтобы использовать Visual Studio 2017, также может потребоваться установить последний пакет WINDOWS SDK.

Шаг 5. Установка рабочих нагрузок при появлении запроса

  1. При появлении запроса установите все запрошенные рабочие нагрузки Visual Studio. В отдельном окне или вкладке см . статью Установка рабочих нагрузок Visual Studioстатьи Настройка среды разработки для WebView2. Выполните действия, описанные в этом разделе, а затем вернитесь на эту страницу и продолжите работу ниже.

    В Visual Studio откроется проект WV2CDPExtensionWPFSample :

    Пример WV2CDPExtensionWPFSample, открытый в Visual Studio в Обозреватель решений

Шаг 6. Сборка и запуск проекта с установленной версией пакетов SDK

Версия пакета SDK для WebView2 и WebView2 DevToolsProtocolExtension включены в этот проект в качестве пакетов NuGet. На следующем шаге вы обновите их с помощью диспетчера пакетов NuGet в Visual Studio.

В верхней части Visual Studio задайте целевой объект сборки следующим образом:

  1. В раскрывающемся списке Конфигурации решений выберите Отладка или Выпуск.

  2. В раскрывающемся списке Платформы решений выберите Любой ЦП.

  3. В Обозреватель решений щелкните правой кнопкой мыши проект WV2CDPExtensionWPFSample и выберите Сборка.

  1. В Visual Studio выберите Отладка>Начать отладку (F5).

    Откроется окно примера приложения:

    Пример приложения WV2CDPExtensionWPFSample

  2. В Visual Studio выберите Отладка>Остановить отладку. Visual Studio закрывает приложение.

Шаг 7. Обновление пакета SDK для WebView2

  1. В Обозреватель решений щелкните правой кнопкой мыши проект (не узел решения) и выберите Управление пакетами NuGet. Откроется диспетчер пакетов NuGet.

  2. Перейдите на вкладку Установленные или Обновления.

  3. Установите или снимите флажок Включить предварительную версию .

    Обновление пакетов

    На приведенном выше снимке экрана показан Visual Studio 2019, показывающий этот пример в контексте всеобъемлющего решения WebView2APIsSample , а не нынешнего автономного решения. На этом снимке экрана репозиторий содержит версию пакета SDK для WebView2, а также доступны более новые и предварительные версии пакета SDK.

  4. Если указан более новый выпуск пакета SDK для Microsoft.Web.WebView2 , нажмите кнопку Обновить . Предварительная версия имеет суффикс "-prerelease", например 1.0.1248-prerelease. Пакеты SDK для предварительной версии позволяют опробовать последние функции и API WebView2.

Если вы хотите просмотреть подробные сведения об этом шаге, в отдельном окне или на вкладке см. статью Установка или обновление пакета SDK для WebView2статьи Настройка среды разработки для WebView2. Выполните действия, описанные в этом разделе, а затем вернитесь на эту страницу и продолжите работу ниже.

Шаг 8. Обновление расширения CDP WebView2

Предварительным условием для этого примера является последняя версия расширения CDP WebView2 (Microsoft.Web.WebView2.DevToolsProtocolExtension), которое входит в этот проект. Этот пакет добавляет поддержку API chrome DevTools Protocol (CDP).

  1. В Обозреватель решений щелкните проект правой кнопкой мыши и выберите Управление пакетами NuGet. Откроется диспетчер пакетов NuGet.

  2. Перейдите на вкладку Установленные или Обновления.

  3. Снимите флажок Включить предварительную версию .

    Проверка наличия обновлений пакета расширения CDP

  4. Если указана более новая версия пакета SDK microsoft.Web.WebView2.DevToolsProtocolExtension , нажмите кнопку Обновить .

См. также:

Шаг 9. Сборка и запуск проекта с обновленными пакетами

  1. В Visual Studio выберите Отладка>Начать отладку (F5).

    Откроется окно примера приложения:

    Приложение WV2CDPExtensionWPFSample

  2. В Visual Studio выберите Отладка>Остановить отладку. Visual Studio закрывает приложение.

Шаг 10. Проверка кода

  1. В редакторе кода Visual Studio проверьте код:

    Код проекта WV2CDPExtensionWPFSample в Visual Studio

    Меню Команды средства разработки :

    Меню

    Меню DevTools Events (События средств разработки ):

    Меню

См. также