Depurar aplicativos WebView2 com o Visual Studio

O Microsoft Visual Studio fornece várias ferramentas de depuração para código Web e nativo em aplicativos WebView2, para depurar código Web e nativo em aplicativos Win32 ou suplementos do Office. Este artigo se concentra na depuração de controles WebView2. Os outros métodos de depuração no Visual Studio também estão disponíveis.

Resumo das etapas de alto nível

Para depurar código JavaScript em um controle WebView2:

  1. Instale o componente de diagnóstico do JavaScript na carga de trabalho de desenvolvimento da área de trabalho Desktop com C++ do Visual Studio ou na carga de trabalho de outra plataforma.

  2. Defina um ponto de interrupção em uma linha de código JavaScript.

  3. Na páginaDepuração de propriedades> do projeto, defina o Tipo de depurador como JavaScript (WebView2) (em vez de Automático ou Nativo).

  4. Inicie o depurador, como de costume. Por exemplo, na barra de menus, selecione Depurar Iniciar Depuração>(F5).

  5. No aplicativo WebView2 em execução, interaja com uma página da Web que executa o código JavaScript. O depurador pausa na linha do código JavaScript que tem o ponto de interrupção.

  6. Use os painéis do depurador no Visual Studio.

Essas etapas são detalhadas abaixo, usando o exemplo principal do Win32/C++ (WebView2APISample).

Requisitos

  • Clone o repositório WebView2Samples se quiser seguir as etapas de exemplo específicas abaixo (usando o exemplo principal do Win32/C++, WebView2APISample). Uma etapa abaixo mostra como fazer isso.

  • Instale o Visual Studio 2022. Você pode usar o Visual Studio 2022 para trabalhar com os aplicativos de exemplo WebView2 e seu próprio aplicativo WebView2. (O Visual Studio 2019 também funciona.) Uma etapa abaixo mostra como fazer isso.

  • Instale e configure as ferramentas de depurador de scripts no Visual Studio. Ou seja, instale a carga de trabalho Desktop Development with C++ do Visual Studio (ou a carga de trabalho equivalente para uma linguagem diferente), incluindo seu componente de diagnóstico JavaScript. Uma etapa abaixo mostra como fazer isso.

  • Crie e execute o exemplo principal do Win32/C++, para que o aplicativo WebView2APISample seja compilado e executado (se você quiser seguir as etapas de exemplo específicas abaixo). Uma etapa abaixo mostra como fazer isso.

  • Para depurar scripts, o aplicativo deve ser iniciado de dentro do Visual Studio.

  • Você não pode anexar um depurador a um processo WebView2 em execução.

Instalar o componente de diagnóstico JavaScript

Use o Visual Studio Installer para instalar a carga de trabalho Desktop Development with C++ do Visual Studio, incluindo seu componente de diagnóstico JavaScript, da seguinte maneira. Ou, se você estiver usando uma carga de trabalho de linguagem diferente de C++, selecione o componente de diagnóstico JavaScript dessa carga de trabalho, semelhante às etapas abaixo.

  1. Se ainda não tiver feito isso, clone o repositório WebView2Samples, conforme descrito em Clonar o repositório WebView2Samples em Configurar seu ambiente de desenvolvimento para WebView2.

  2. Se ainda não tiver feito isso, instale o Visual Studio 2022, conforme descrito em Instalar o Visual Studio em Configurar seu ambiente de desenvolvimento para WebView2.

  3. No Visual Studio 2022, instale a carga de trabalho Desenvolvimento de Área de Trabalho com C++ , da seguinte maneira:

  4. Na barra do Windows Explorer, digite Visual Studio Installer.

  5. Selecione o Visual Studio Installer para abri-lo.

  6. No Visual Studio Installer, na versão instalada, clique no botão Mais e selecione Modificar.

  7. No Visual Studio, em Cargas de trabalho, selecione a carga de trabalho Desenvolvimento da Área de Trabalho com C++ , para que uma marca de seleção seja exibida:

    Tela de modificação de cargas de trabalho do Visual Studio

  8. Selecione Componentes individuais, na parte superior.

  9. Na caixa de pesquisa, insira JavaScript diagnostics.

  10. Marque a caixa de seleção de diagnóstico JavaScript:

    Visual Studio: Modificando valores na guia

  11. Clique no botão Modificar .

Continue com a próxima seção, abaixo.

Selecione o depurador JavaScript (WebView2)

Em seguida, habilite a depuração de script para aplicativos WebView2, da seguinte maneira.

  1. Se ainda não tiver terminado, execute as etapas no aplicativo de exemplo Win32 para que o aplicativo WebView2APISample seja compilado e executado. A solução WebView2Samples deve ser aberta no Visual Studio e o aplicativo de exemplo não deve estar em execução. Ou abra seu próprio projeto de aplicativo WebView2 no Visual Studio.

  2. No Visual Studio, no Gerenciador de Soluções, clique com o botão direito do mouse no projeto WebView2APISample (ou em seu próprio projeto) e selecione Propriedades.

    A caixa de diálogo Páginas de Propriedades é aberta.

  3. À esquerda, expanda Propriedades de Configuração e selecione Depuração.

  4. À direita de Tipo de Depurador, selecione JavaScript (WebView2) e clique no botão OK :

    A propriedade

Depurar seu aplicativo WebView2

Depois de fazer a configuração acima, depure seu aplicativo WebView2, da seguinte maneira.

  1. Para definir um ponto de interrupção no código-fonte, passe o mouse à esquerda do número da linha e clique para definir um ponto de interrupção. Por exemplo, abra WebView2Samples\SampleApps\WebView2APISample\assets\ScenarioJavaScriptDebugIndex.jse defina um ponto de interrupção na linha 2: console.log("onAddClick+");, no corpo da onAddClick função:

    Executando o depurador local do Windows no Visual Studio

    Ao definir um ponto de interrupção, você deve abrir o arquivo que está exatamente no mesmo caminho associado ao controle WebView2, porque o adaptador de depuração JS/TS não executa o mapeamento do caminho de origem.

    O ponto de interrupção será disparado quando esta seção do código for executada. Esse ponto de interrupção é disparado ao clicar no botão Adicionar um novo item no aplicativo de exemplo, em uma etapa posterior abaixo.

  2. Selecione o tamanho de bits da plataforma, como x64.

  3. Para executar o depurador, siga um destes procedimentos:

    • Na barra de menus, selecione Depurar Iniciar Depuração>(F5).
    • No Gerenciador de Soluções, clique com o botão direito do mouse no projeto >Depurar Iniciar>Nova Instância ou Entrar em Nova Instância.
    • Clique no botão verde Reproduzir à esquerda do Depurador Local do Windows.

    O aplicativo WebView2APISample (ou seu próprio aplicativo) é executado e aberto, e o depurador se conecta ao primeiro processo WebView2 criado. NaDepuração dePropriedades> do projeto, o Depurador Local do Windows foi definido como JavaScript (WebView2).

  4. No Visual Studio, clique na guia Saída , no canto inferior direito.

    A guia contém apenas a seguinte mensagem, que menciona o depurador JS: "Logs detalhados são gravados em: C:\Users\myUsername\AppData\Local\Temp\visualstudio-js-debugger.txt".

  5. Na janela do aplicativo WebView2APISample , selecione ArquivolocalJavaScript de depuração de script de>cenário>.

    O arquivo WebView2APISample/Debug/x64/assets/ScenarioJavaScriptDebugIndex.html é renderizado:

    Arquivo HTML renderizado

  6. No Visual Studio, examine o painel Saída . A seguinte saída foi adicionada:

    This is the very first line of code that executes.
Second
Third
inside
onAddClick+
onAddClick-
onAddClick+
onAddClick-
End

  7. Na página da Web do aplicativo, clique no botão pop-up Adicionar um novo item .

    O ponto de interrupção na onAddClick função é atingido e o aplicativo é pausado no depurador.

  8. Alterne para a janela do Visual Studio e examine os painéis do depurador.

  9. Clique na guia Saída para exibir a saída do aplicativo:

    Guia Saída no Visual Studio 2022 mostrando a saída do depurador

    A saída do aplicativo mostra "Esta é a primeira linha de código que é executada", devido à linha console.log("This is the very first line of code that executes."); no arquivo WebView2Samples\SampleApps\WebView2APISample\assets\ScenarioJavaScriptDebugIndex.html.

Mapas de origem com o mapeamento de nome de WebResourceRequested evento ou host virtual

Os mapas de origem são necessários para depurar o código-fonte do conteúdo compilado, incluindo:

  • JavaScript transpilado, como TypeScript ou JavaScript minificado.
  • CSS compilado, como SASS ou SCSS.

O WebView2 não carrega mapas de origem referenciados pelo conteúdo que foi carregado usando qualquer uma das abordagens:

Solução de problemas

Abra o DevTools usando uma abordagem diferente de F12

Ao depurar seu aplicativo no Visual Studio com o depurador nativo anexado, ao exibir seu aplicativo em execução, pressionar F12 pode iniciar o depurador nativo em vez de iniciar as Ferramentas de Desenvolvedor.

Para abrir o DevTools, pressione Ctrl+Shift+I. Ou clique com o botão direito do mouse na página no aplicativo em execução e selecione Inspect.

Mapeamento de caminho de origem virtual sem suporte no Visual Studio 2019

Se você usar o método WebView2 SetVirtualHostNameToFolderMapping , o depurador no Visual Studio 2019 não entenderá o mapeamento do caminho de origem virtual, portanto, os pontos de interrupção não funcionarão corretamente.

Ao definir um ponto de interrupção, você deve abrir o arquivo que está exatamente no mesmo caminho associado ao controle WebView2, porque o adaptador de depuração JS/TS não executa o mapeamento do caminho de origem.

O mapeamento do caminho de origem virtual tem suporte no depurador no Visual Studio Code.

Confira também

  • Last updated on