Utilizar uma janela do browser externo

Por predefinição, o DevTools abre o separador DevTools do Edge: Browser no Visual Studio Code. A abordagem alternativa é fazer com que as DevTools abram uma janela externa do Microsoft Edge controlada pela automatização.

Janela do browser externo

A janela do browser externo significa que, quando inicia uma instância do browser com a extensão DevTools do Edge, é aberta uma janela completa do Microsoft Edge com IU completa, controlada pela automatização de teste de DevTools:

Quando a janela do browser externo está aberta, o separador DevTools: Browser do Edge não é aberto quando inicia o DevTools:

Se, em seguida, clicar no botão Ativar /Desativar screencast no separador DevTools do Edge , o separador DevTools do Edge: Browser é aberto, apresentando O separador está inativo:

O browser DevTools incorporado

Por predefinição, o DevTools abre o separador DevTools do Edge: Browser no Visual Studio Code, em vez de abrir uma janela externa do browser. O separador DevTools do Edge: Browser inclui uma barra de ferramentas de emulação de dispositivos na parte inferior:

Este separador também é denominado:

• O browser sem cabeça, em Definições.
• O screencast, nas descrições.
• O browser incorporado.
• O browser DevTools.
• O browser DevTools incorporado.

Limitações do browser DevTools incorporado

O Browser Edge DevTools incorporado na extensão Visual Studio Code DevTools fornece uma pré-visualização simples com muitas restrições e não suporta todas as funcionalidades de um browser real. Quando precisar de um browser completo, utilize uma janela do browser externo em vez do browser incorporado. O browser DevTools incorporado é uma instância do browser que é executada sem uma interface de utilizador e a partir da qual as capturas de ecrã estão a ser transmitidas em fluxo. Por conseguinte, nem todas as interações do utilizador são implementadas.

O browser DevTools incorporado tem limitações, incluindo o seguinte:

• A funcionalidade arrastar e largar não é suportada.
• onPasteCapture e onPaste os eventos não são acionadores.
• A propriedade CSS cursor não é respeitada.
• Podem existir problemas de desempenho visual.

Alterar a definição

Para alterar ou marcar a definição para o tipo de janela do browser a utilizar:

1. No Visual Studio Code, selecioneFerramentas do Microsoft Edge na Barra> de Atividade. A Barra Lateral das Ferramentas do Microsoft Edge é aberta.

2. Paire o cursor do rato à direita de Destinos e, em seguida, clique em Mais Ações (...) >Abra Definições.

   

3. Se quiser utilizar o separador DevTools do Edge: Browser no Visual Studio Code, selecione a caixa de verificação Sem cabeça.

   Em alternativa, se quiser utilizar a janela externa do browser controlada pela automatização, desmarque a caixa de verificação Sem cabeça.

4. Feche As DevTools. Veja Closing DevTools in Opening DevTools (Fechar DevTools) em Opening DevTools (Abrir DevTools) e o browser DevTools.

5. Abra o DevTools. Veja Abrir DevTools e o browser DevTools.

Confira também

• Começar a utilizar a extensão DevTools para Visual Studio Code
• Extensão DevTools do Microsoft Edge para Visual Studio Code
• Depurar o Microsoft Edge no Visual Studio Code

Artigos externos:

• Depuração do browser no VS Code