Compartilhar via

Depurar aplicações WebView2 com o Microsoft Edge DevTools

  • Artigo

Utilize as Ferramentas de Programação do Microsoft Edge para depurar conteúdos Web apresentados nos controlos WebView2, da mesma forma que pode depurar outra página Web apresentada no Microsoft Edge.

Depuração de DevTools num controlo WebView2

Quando estiver a utilizar uma aplicação WebView2, existem várias formas de abrir o DevTools:

  • Prima F12.
  • Prima Ctrl+Shift+I.
  • Clique com o botão direito do rato na página e, em seguida, selecione Inspect.

Uma aplicação também pode utilizar a OpenDevToolsWindow API para abrir programaticamente uma janela DevTools. Por exemplo, pode utilizar esta 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, pode adicionar --auto-open-devtools-for-tabs aos argumentos do browser através de uma variável de ambiente ou chave de registo. Esta abordagem abrirá uma janela DevTools quando for criado um WebView2.

Mapas de origem com o mapeamento de nomes de WebResourceRequested anfitrião virtual ou evento

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

  • JavaScript transpiado, como TypeScript ou JavaScript minimizado.
  • CSS compilado, como SASS ou SCSS.

O WebView2 não carrega mapas de origem referenciados por conteúdo que foi carregado através de qualquer uma das abordagens:

Confira também