Depurar aplicativos WebView2 com o Microsoft Edge DevTools

Use as Ferramentas de Desenvolvedor do Microsoft Edge para depurar o conteúdo da Web exibido em controles WebView2, da mesma forma que você pode depurar outra página da Web exibida no Microsoft Edge.

Quando você estiver usando um aplicativo WebView2, há várias maneiras de abrir o DevTools:

• Pressione F12.
• Pressione Ctrl+Shift+I.
• Clique com o botão direito do mouse na página e selecione Inspect.

Um aplicativo também pode usar a OpenDevToolsWindow API para abrir programaticamente uma janela do DevTools. Por exemplo, você pode usar essa abordagem se as teclas de atalho acima e os itens do menu de contexto tiverem sido removidos.

Se nenhuma das abordagens acima estiver disponível, você poderá adicionar --auto-open-devtools-for-tabs argumentos ao navegador por meio de uma variável de ambiente ou chave do Registro. Essa abordagem abrirá uma janela do DevTools quando um WebView2 for criado.

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:

• O WebResourceRequested evento. Confira:

  • Carregamento de conteúdo local manipulando o WebResourceRequested evento em Usando conteúdo local em aplicativos WebView2.
  • Mapas de origem com o evento em Como usar conteúdo WebResourceRequestedlocal em aplicativos WebView2.

• Mapeamento de nome de host virtual. Confira:

  • Carregando conteúdo local usando o mapeamento de nome de host virtual em Usando conteúdo local em aplicativos WebView2.
  • Mapas de origem com mapeamento de nome de host virtual no Usando conteúdo local em aplicativos WebView2.

Confira também

• Visão geral do DevTools.
• Introdução ao WebView2
• Repositório WebView2Samples - um exemplo abrangente dos recursos do WebView2.
• Referência da API WebView2