Aplicativo de exemplo WPF com extensão CDP

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

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

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

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

O menu Comandos do DevTools :

O menu Eventos do DevTools :

Se esta for a primeira vez que você usa o WebView2, recomendamos primeiro seguir o tutorial Introdução ao WebView2 em aplicativos WPF . O tutorial orienta você na criação de um WebView2 e na adição de algumas funcionalidades básicas do WebView2.

Etapa 1 - Instalar o Visual Studio com suporte do .NET

É necessário o Microsoft Visual Studio (com suporte para .NET). O Microsoft Visual Studio Code não tem suporte para este exemplo.

1. Se o Visual Studio (versão mínima necessária) com suporte a .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 nesta seção e, em seguida, retorne a esta página e continue as etapas abaixo.

Etapa 2 – Clonar ou baixar o repositório WebView2Samples

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

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

1. Na 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 da Plataforma do projeto em Propriedades > do Projeto Propriedades > de configuração Conjunto de Ferramentas Gerais > da Plataforma. Para usar o Visual Studio 2017, talvez você também precise instalar um SDK do Windows recente.

Etapa 4 - Instalar cargas de trabalho, se solicitado

1. Se solicitado, instale 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 nesta seção e, em seguida, retorne a esta página e continue abaixo.

   O projeto WV2CDPExtensionWPFSample é aberto no Visual Studio:

   

Etapa 5 – Compilar e executar o projeto com a versão instalada dos SDKs

Uma versão do SDK do WebView2 e o DevToolsProtocolExtension do WebView2 estão incluídos 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 da compilação, da seguinte maneira:

1. Na lista suspensa Configurações da solução , selecione Depurar ou Liberar.

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

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

1. No Visual Studio, selecione DepurarIniciar 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 6 - Atualizar o SDK do WebView2

1. No 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 Gerenciador de Pacotes NuGet é aberto.

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

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

   

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

4. Se uma versão mais recente do SDK 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 mais recentes do WebView2.

Se você quiser ver detalhes sobre esta 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 nesta seção e, em seguida, retorne a esta página e continue abaixo.

Etapa 7 - Atualizar a extensão CDP do WebView2

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

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

2. Clique na guia Instalados 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 CDP (Chrome DevTools) em aplicativos WebView2

Etapa 8 - Compilar e executar o projeto com pacotes atualizados

1. No Visual Studio, selecione DepurarIniciar 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 9 – Inspecionar o código

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

   

   O menu Comandos do DevTools :

   

   O menu Eventos do DevTools :

   

Confira também

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