Aplicativo de exemplo WPF com extensão CDP

Este exemplo do WebView2 demonstra como usar a extensão CDP do WebView2 para usar o PROTOCOLO Chrome DevTools (CDP) em um aplicativo WPF.

• Nome da amostra: WV2CDPExtensionWPFSample
• Diretório de repositório: WV2CDPExtensionWPFSample
• Arquivo da solução: WV2CDPExtensionWPFSample.sln

Este exemplo, WV2CDPExtensionWPFSample, é criado com a Extensão CDP do WebView2 (o pacote NuGet Microsoft.Web.WebView2.DevToolsProtocolExtension ). Este exemplo chama métodos do Protocolo Chrome DevTools em um DevToolsProtocolHelper objeto no WebView2.

Este exemplo é criado como um projeto do WPF Visual Studio 2019. Ele usa C# no ambiente WebView2.

O menu Comandos DevTools :

O menu Eventos de DevTools :

Se essa for sua primeira vez usando o WebView2, recomendamos primeiro seguir o tutorial Introdução ao WebView2 em aplicativos WPF . O tutorial orienta a criação de um WebView2 e a adição de algumas funcionalidades básicas do WebView2.

Etapa 1 – Instalar um canal de visualização do Microsoft Edge

Recomendamos a versão mais recente do canal canário.

1. Se um canal de visualização do Microsoft Edge (Beta, Dev ou Canary) ainda não estiver instalado, em uma janela ou guia separada, consulte Instalar um canal de visualização do Microsoft Edge em Configurar seu ambiente de desenvolvimento para WebView2. Siga as etapas nessa seção e, em seguida, retorne a esta página e continue as etapas abaixo.

Etapa 2 – Instalar o Visual Studio com suporte ao .NET

O Microsoft Visual Studio (com suporte ao .NET) é necessário. Não há suporte para o microsoft Visual Studio Code para este exemplo.

1. Se o Visual Studio (versão mínima necessária) com suporte ao .NET ainda não estiver instalado, em uma janela ou guia separada, consulte Instalar o Visual Studio em Configurar seu ambiente de desenvolvimento para WebView2. Siga as etapas nessa seção e, em seguida, retorne a esta página e continue as etapas abaixo.

Etapa 3 – Clonar ou baixar o repositório WebView2Samples

1. Se ainda não tiver sido feito, clone ou baixe o WebView2Sample repositório para sua unidade local. Em uma janela ou guia separada, confira Baixar o repositório WebView2Samples em Configurar seu ambiente de desenvolvimento para WebView2. Siga as etapas nessa seção e, em seguida, retorne a esta página e continue abaixo.

Etapa 4 – Abrir a solução no Visual Studio

1. Em sua unidade local, abra o .sln arquivo no Visual Studio, no diretório:

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

   ou:

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

Se você quiser usar o Visual Studio 2017, no Visual Studio, altere o conjunto de ferramentas de plataforma do projeto nas propriedades de Configuração de Propriedades > do Projeto Conjunto geral > de ferramentas > de plataforma. Para usar o Visual Studio 2017, talvez você também precise instalar um SDK recente do Windows.

Etapa 5 – Instalar cargas de trabalho se solicitado

1. Se solicitado, instale todas as cargas de trabalho do Visual Studio solicitadas. Em uma janela ou guia separada, consulte Instalar cargas de trabalho do Visual Studio em Configurar seu ambiente de desenvolvimento para WebView2. Siga as etapas nessa seção e, em seguida, retorne a esta página e continue abaixo.

   O projeto WV2CDPExtensionWPFSample é aberto no Visual Studio:

   

Etapa 6 – Compilar e executar o projeto com a versão instalada de SDKs

Uma versão do SDK do WebView2 e do WebView2 DevToolsProtocolExtension são incluídas como pacotes NuGet neste projeto. Em uma etapa posterior, você os atualizará usando o Gerenciador de Pacotes NuGet do Visual Studio.

Na parte superior do Visual Studio, defina o destino de build da seguinte maneira:

1. Na lista suspensa Configurações da Solução , selecione Depuração ou Versão.

2. Na lista suspensa Plataformas de Solução , selecione Qualquer CPU.

3. Em Gerenciador de Soluções, clique com o botão direito do mouse no projeto WV2CDPExtensionWPFSample e selecione Compilar.

1. No Visual Studio, selecione Depurar>Iniciar Depuração (F5).

   A janela do aplicativo de exemplo é aberta:

   

2. No Visual Studio, selecione Depurar>Parar Depuração. O Visual Studio fecha o aplicativo.

Etapa 7 – Atualizar o SDK do WebView2

1. Em Gerenciador de Soluções, clique com o botão direito do mouse no projeto (não no nó da solução) e selecione Gerenciar Pacotes NuGet. O NuGet Package Manager é aberto.

2. Clique na guia Instalado ou Atualizações.

3. Selecione ou desmarque a caixa de seleção Incluir pré-lançamento .

   

   A captura de tela acima mostra o Visual Studio 2019, mostrando esse exemplo no contexto da solução webview2APIsSample abrangente, em vez da solução autônoma atual. Nesta captura de tela, o repositório tem uma versão de versão do SDK do WebView2 e versões mais recentes e de pré-lançamento do SDK estão disponíveis.

4. Se uma versão mais recente do SDK do Microsoft.Web.WebView2 estiver listada, clique no botão Atualizar . Um pré-lançamento tem um sufixo "-prerelease", como 1.0.1248-prerelease. Os SDKs de pré-lançamento permitem que você experimente os recursos e APIs do WebView2 mais recentes.

Se você quiser ver detalhes sobre essa etapa, em uma janela ou guia separada, consulte Instalar ou atualizar o SDK do WebView2 em Configurar seu ambiente de desenvolvimento para WebView2. Siga as etapas nessa seção e, em seguida, retorne a esta página e continue abaixo.

Etapa 8 – Atualizar a Extensão de CDP do WebView2

Um pré-requisito para este exemplo é a versão de versão mais recente da Extensão de CDP do WebView2 (Microsoft.Web.WebView2.DevToolsProtocolExtension), que está incluída neste projeto. Esse pacote adiciona suporte à API do Protocolo Chrome DevTools (CDP).

1. Em Gerenciador de Soluções, clique com o botão direito do mouse no projeto e selecione Gerenciar Pacotes NuGet. O NuGet Package Manager é aberto.

2. Clique na guia Instalado ou Atualizações.

3. Desmarque a caixa de seleção Incluir pré-lançamento .

   

4. Se uma versão mais recente do SDK Microsoft.Web.WebView2.DevToolsProtocolExtension estiver listada, clique no botão Atualizar .

Veja também:

• Usar o PROTOCOLO Chrome DevTools (CDP) em aplicativos WebView2

Etapa 9 – Criar e executar o projeto com pacotes atualizados

1. No Visual Studio, selecione Depurar>Iniciar Depuração (F5).

   A janela do aplicativo de exemplo é aberta:

   

2. No Visual Studio, selecione Depurar>Parar Depuração. O Visual Studio fecha o aplicativo.

Etapa 10 – Inspecionar o código

1. No editor de código do Visual Studio, inspecione o código:

   

   O menu Comandos DevTools :

   

   O menu Eventos de DevTools :

   

Confira também

• Referência de API do WebView2
• Introdução ao WebView2 em aplicativos WinUI 2 (UWP)
• Microsoft.Web.WebView2.DevToolsProtocolExtension no NuGet.