Usando uma janela externa do navegador

Por padrão, o DevTools abre o Edge DevTools: guia Navegador no Visual Studio Code. A abordagem alternativa é fazer com que o DevTools abra uma janela externa do Microsoft Edge controlada por automação.

Janela externa do navegador

Uma janela externa do navegador significa que, quando você inicia uma instância do navegador usando a extensão Edge DevTools, uma janela inteira do Microsoft Edge com a interface do usuário completa é aberta, controlada pela automação de teste do DevTools:

Separar a janela do Microsoft Edge

Quando a janela externa do navegador está aberta, a guia Edge DevTools: Navegador não abre quando você inicia o DevTools:

Visual Studio Code quando o navegador externo é iniciado (e sem barra de ferramentas de depuração)

Se você clicar no botão Alternar screencast na guia DevTools do Edge , a guia DevTools do Edge: Navegador será aberta, exibindo A guia está inativa:

Guia inativa

O navegador DevTools inserido

Por padrão, o DevTools abre a guia DevTools do Edge: Browser no Visual Studio Code, em vez de abrir uma janela externa do navegador. O DevTools do Edge: a guia Navegador inclui uma barra de ferramentas de emulação de dispositivo na parte inferior:

Navegador inserido

Essa guia também é chamada de:

  • O navegador sem periféricos, em Configurações.
  • O screencast, nas dicas de ferramentas.
  • O navegador incorporado.
  • O navegador DevTools.
  • O navegador DevTools incorporado.

Limitações do navegador DevTools inserido

O navegador Edge DevTools inserido na extensão DevTools do Visual Studio Code fornece uma visualização simples com muitas restrições e não dá suporte a todos os recursos de um navegador da Web real. Quando você precisar de um navegador completo, use uma janela de navegador externa em vez do navegador inserido. O navegador DevTools inserido é uma instância do navegador que é executada sem uma interface do usuário e a partir da qual as capturas de tela estão sendo transmitidas. Portanto, nem todas as interações do usuário são implementadas.

O navegador DevTools inserido tem limitações, incluindo o seguinte:

  • Não há suporte para arrastar e soltar.
  • onPasteCapture e onPaste os eventos não são disparados.
  • A propriedade CSS cursor não é respeitada.
  • Pode haver problemas de desempenho visual.

Alterando a configuração

Para alterar ou marcar a configuração de qual tipo de janela do navegador usar:

  1. No Visual Studio Code, selecione Ferramentas doMicrosoft Edge daBarra de> Atividades. A Barra Lateral de Ferramentas do Microsoft Edge é aberta.

  2. Passe o mouse à direita de Destinos e clique em Mais ações (...) >Abra Configurações.

    Definir a extensão para usar o navegador inserido

  3. Se você quiser usar o Edge DevTools: guia Navegador no Visual Studio Code, marque a caixa de seleção Sem periféricos.

    Ou, se você quiser usar a janela externa do navegador controlada por automação, desmarque a caixa de seleção Sem periféricos .

  4. Feche o DevTools. Consulte Fechando o DevTools em Abrindo o DevTools e o navegador DevTools.

  5. Abra o DevTools. Consulte Abrindo o DevTools e o navegador DevTools.

Confira também

Artigos externos:

  • Last updated on