Abrindo o DevTools e o navegador DevTools

Há várias maneiras de abrir a guia DevTools e o Edge DevTools: Guia Navegador :

Essas abordagens são descritas abaixo. Para obter etapas detalhadas usando o repositório Demos, consulte Introdução ao uso da extensão DevTools para o Visual Studio Code.

Abra o DevTools clicando com o botão direito do mouse em um arquivo HTML

Essa abordagem abre as guias do DevTools no modo de depuração e é recomendada, a menos que a página da Web exija a execução em um servidor Web, como acontece com determinadas APIs.

Para abrir o DevTools e o navegador incorporado, juntamente com a barra de ferramentas Depurar para um arquivo HTML no disco rígido:

1. No Visual Studio Code, siga um destes procedimentos:

   • Selecione Barra de> Atividades Explorer () > clique no botão Abrir Pasta.
   • Selecione Arquivo>, Abrir Pasta.
   • Selecione Arquivo>Abrir Recente.

2. Abra uma pasta que contenha arquivos de origem do aplicativo Web.

3. No Visual Studio Code, no Explorer, clique com o botão direito em um .html arquivo, selecione Abrir com o Edge e, em seguida, selecione Abrir navegador com o DevTools:

   

   O DevTools é aberto, com o Visual Studio Code no modo de depuração:

   

   Os seguintes componentes são abertos no Visual Studio Code:

   • A guia DevTools do Edge , incluindo a guia Elementos e outras guias de ferramentas.
   • O Edge DevTools: guia Navegador , incluindo a barra de ferramentas Emulação de Dispositivo na parte inferior.
   • A barra de ferramentas Depurar na parte superior, incluindo botões como Pausar, Depurar, Depurar, Redefinir e Parar.
   • O Console de Depuração na parte inferior.
   • A barra lateral Executar e Depurar (o mesmo que selecionar Exibir>Executar).

Nessa abordagem, uma instância não é listada na Barra de> AtividadesDestinos das Ferramentas> do MicrosoftEdge.

Use a Barra Lateral do Explorer, na Barra de Atividades, para abrir um .js arquivo durante a depuração de uma página da Web.

O Edge DevTools: a guia Navegador inclui uma barra de ferramentas Emulação de Dispositivo. Essa guia contém um navegador da Web inserido com recursos do DevTools. Às vezes, esse navegador é chamado de screencast ou navegador headless para DevTools.

Veja também:

• Comece clicando com o botão direito do mouse em um arquivo HTML

Abra o DevTools clicando no botão Iniciar Instância

Essa abordagem abre as guias do DevTools no modo não depurador e é útil quando você não deseja a barra de ferramentas Depurar.

Estas etapas supõem que, inicialmente, nenhuma pasta está aberta no Visual Studio Code e a pasta que você está abrindo não tem um launch.json arquivo.

1. No Visual Studio Code, siga um destes procedimentos:

   • Selecione Barra de> Atividades Explorer () > clique no botão Abrir Pasta.
   • Selecione Arquivo>, Abrir Pasta.
   • Selecione Arquivo>Abrir Recente.

   Para usar todos os recursos do DevTools, incluindo a edição de espelho CSS do arquivo de origem local ao editar CSS no DevTools, abra uma pasta que contenha arquivos de origem que correspondam à página da Web que você deseja exibir no DevTools.

2. Na Barra de Atividades, clique no botão Ferramentas do Microsoft Edge () e, em seguida, clique no botão Iniciar Instância :

   

   Se houver um botão Iniciar Projeto em vez de um botão Iniciar Instância , isso indica que a pasta contém um launch.json arquivo. Inspecione qual launch.json URL está especificada no arquivo e considere clicar em Iniciar Projeto, conforme descrito em Abrindo DevTools clicando no botão Iniciar Projeto. Ou, se você quiser explorar como o botão Launch Instance funciona, poderá excluir o launch.json arquivo e gerar um novo launch.json arquivo posteriormente.

   

   • A guia DevTools do Edge é aberta, inicialmente contendo informações sobre a página Êxito, como C:\Users\username\.vscode\extensions\ms-edgedevtools.vscode-edge-devtools-2.1.1\out\startpage\index.html.
   • O Edge DevTools: a guia Navegador (o navegador inserido) é aberta, mostrando inicialmente a página Êxito .
   • A barra de ferramentas Depurar e a interface do usuário de depuração do Visual Studio Code não abrem.
   • No painel Ferramentas do Microsoft Edge , a seção Destinos é aberta, listando um destino, e o botão Instância de Inicialização é removido.

3. No Edge DevTools: guia do Navegador, na barra de endereços, cole um caminho de arquivo ou uma URL que corresponda à pasta aberta no Visual Studio Code.

   Se você quiser obter um caminho de arquivo: na barra de atividades do> Visual Studio Code >no Explorer (), > clique com o botão direito do mouse em um .html arquivo >Copiar caminho.

   Se você quiser colar uma URL, os exemplos são:

   • http://localhost:8080
   • http://127.0.0.1:8080
   • http://10.0.1.8:8080

   URLs semelhantes são mostradas na linha de comando quando você entra (por exemplo) npx http-server para executar um servidor Web localmente.

   A página da Web especificada é exibida no Edge DevTools: guia Navegador (o navegador inserido). A guia DevTools do Edge exibe informações sobre a página da Web.

Veja também:

• Comece clicando no botão Launch Instance

Abra o DevTools clicando no botão Iniciar Projeto

Essa abordagem abre as guias do DevTools no modo de depuração e é recomendada se a página da Web exigir a execução em um servidor Web, como acontece com determinadas APIs.

Resumo:

1. Abra uma pasta local que contém arquivos de origem do aplicativo Web.
2. Clique no botão Gerar launch.json .
3. Adicione uma URL de host local no .json arquivo.
4. Clique no botão Iniciar Projeto .

Essas etapas pressupõem que você esteja executando um servidor Web localhost, conforme descrito na Etapa 6: Configure um servidor localhost em Instalando a extensão DevTools para Visual Studio Code.

Para abrir o DevTools clicando no botão Iniciar Projeto , execute as etapas a seguir.

Abra uma pasta local que contém arquivos de origem do aplicativo Web

1. No Visual Studio Code, siga um destes procedimentos:

   • Selecione Barra de> Atividades Explorer (> Explorer) clique no botão Abrir Pasta.
   • Selecione Arquivo>, Abrir Pasta.
   • Selecione Arquivo>Abrir Recente.

   Selecione um diretório que contenha os arquivos de origem da página da Web. Por exemplo, C:\Users\username\Documents\GitHub\Demos\demo-to-do\.

2. Na Barra de Atividades, clique em Ferramentas do Microsoft Edge (). O painel Ferramentas do Microsoft Edge é aberto.

   • Se a pasta ainda não contiver um .vscode diretório que contenha um launch.json file, a Barra Lateral de Ferramentas do Microsoft Edge conterá um botão Iniciar Instância e um botão Gerar launch.json .

   • Se a pasta já contiver um .vscode diretório que contém um launch.json arquivo, a Barra Lateral de Ferramentas do Microsoft Edge conterá um botão Iniciar Projeto e não um botão Gerar launch.json . Nesse caso, talvez você queira inspecionar ou alterar a url cadeia de caracteres no arquivo existente launch.json , conforme descrito abaixo.

Continue abaixo.

Clique no botão "Gerar launch.json"

1. Clique no botão Gerar launch.json :

   

   O novo launch.json arquivo é aberto.

Continue abaixo.

Adicionar uma URL de host local no arquivo .json

1. Em vários lugares do launch.json arquivo, em cada uma das "url" linhas, role para a direita e observe o comentário "Forneça a URL do projeto para concluir a configuração":

   "url": "c:\\Users\\username\\.vscode\\extensions\\ms-edgedevtools.vscode-edge-devtools-2.1.1\\out\\startpage\\index.html", 
   // Provide your project's url to finish configuring
   

   Exemplos típicos:

   • http://localhost:8080
   • http://127.0.0.1:8080
   • http://10.0.1.8:8080

   URLs semelhantes são mostradas na linha de comando quando você inicia um servidor digitando npx http-server.

2. Cole o caminho dentro da cadeia de caracteres do caminho entre aspas em uma das "url" cadeias de caracteres. Por exemplo:

   "url": "http://localhost:8080", // Provide your project's url to finish configuring
   

   A cadeia de caracteres da URL pode ser um caminho de arquivo local, embora, nesse caso, você não precise de um launch.json arquivo; para iniciar o DevTools, você pode simplesmente clicar com o botão direito do mouse em um .html arquivo no Explorer do Visual Studio Code.

   (Se você mantiver a URL como está, a página padrão de sucesso será exibida e você poderá colar uma URL de host local ou um caminho de arquivo na barra de endereços do Edge DevTools: guia Navegador .)

3. Copie e cole a linha da URL modificada em outros locais do launch.json arquivo. Para modificar todas as instâncias ao mesmo tempo, você pode copiar uma cadeia de caracteres de URL atualizada, selecionar uma instância da cadeia de caracteres de URL inicial, pressionar Ctrl+Shift+L para selecionar todas as instâncias e colar a cadeia de caracteres atualizada.

4. Salve o launch.json arquivo.

Continue abaixo.

Clique no botão Iniciar Projeto

1. No Visual Studio Code, na Barra de Atividades, clique no botão Ferramentas do Microsoft Edge (ícone Ferramentas do ). O painel Ferramentas do Microsoft Edge é aberto, agora contendo um botão Iniciar Projeto (em vez de um botão Iniciar Instância ) e não contém mais um botão Gerar launch.json arquivo :

   

2. Clique no botão Iniciar Projeto .

   As guias DevTools do Edge e DevTools do Edge: Navegador são abertas em painéis separados, mostrando a URL do aplicativo Web especificada em launch.json:

   

Veja também:

• Comece clicando no botão Iniciar Projeto

Mapeando arquivos de URL para a pasta aberta

Se o DevTools for capaz de correlacionar e estabelecer o mapeamento do espaço de trabalho entre os arquivos baixados do servidor e os arquivos na pasta que você abriu, o DevTools fornecerá sua funcionalidade completa, incluindo edição de espelho CSS de seus arquivos de origem locais quando você alterar o CSS no DevTools.

Se o DevTools não conseguir mapear os arquivos no Edge DevTools: guia Navegador para os arquivos na pasta que você abriu no Explorer do Visual Studio Code, você pode inspecionar páginas da Web e alterá-las, como alterar valores CSS na guia Fontes da ferramenta Elementos na guia Edge DevTools. Nesse caso, porém, você não pode usar a edição de espelho CSS para que o DevTools edite automaticamente seus arquivos de origem. As opções são:

• Desmarque a caixa de seleção Edição de espelho CSS na guia Estilos e continue experimentando alterações CSS.

• Abra uma pasta que contenha arquivos de origem correspondentes à página da Web.

• Conceda confiança a uma pasta abrindo-a no Visual Studio Code.

Por exemplo:

1. Abra uma pasta que esteja em sua cópia local do repositório Demos, como C:\Users\username\Documents\GitHub\Demos\demo-to-do\, conforme descrito em Introdução ao uso da extensão DevTools para Visual Studio Code.

2. Abra o DevTools, conforme descrito acima.

3. No Edge DevTools: guia do navegador , na barra de endereços, cole uma URL remota github.io , como https://microsoftedge.github.io/Demos/demo-to-do/.

   Os arquivos nesse endereço realmente residem como arquivos de origem no GitHub em https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do, não em sua unidade.

   Agora você pode alterar os valores CSS na ferramenta Elementos, porque, no Explorer do Visual Studio Code, é aberta uma pasta que contém arquivos de origem que o DevTools é capaz de mapear para os arquivos de recursos baixados que constituem a página da Web:

   

   A imagem acima mostra o uso da guia Estilos com a caixa de seleção de edição de espelho CSS marcada, usada para ampliar o corpo do texto para 24pt. O Edge DevTools: a guia Navegador renderiza a página à medida que você altera o valor. A barra de endereços da guia contém uma URL em vez de um caminho de arquivo. Como a caixa de seleção de edição de espelho CSS está marcada e o arquivo correspondente .css é encontrado em uma pasta local gravável, o arquivo na unidade local é automaticamente editado .css para 24pt;.

Evitando mensagens de erro sobre espelhamento ou mapeamento

Em seguida, tente alterar o CSS sem uma pasta correspondente aberta:

1. Selecione Arquivo>, Fechar Pasta.

2. Inicie o DevTools clicando no botão Iniciar Instância , conforme descrito acima.

3. No Edge DevTools: guia do navegador , na barra de endereços, cole uma URL remota github.io , como https://microsoftedge.github.io/Demos/demo-to-do/.

   Agora que a pasta que contém os arquivos de origem está fechada, se você tentar alterar os valores CSS na ferramenta Elementos , receberá uma mensagem de erro do DevTools. Você pode inspecionar páginas da Web, mas não editá-las. Você pode interagir com a página e vê-la em diferentes dispositivos e estados de renderização usando a barra de ferramentas Emulação de Dispositivo na parte inferior do Edge DevTools: guia Navegador .

   Você também pode inspecionar o CSS e o HTML. Mas se você tentar alterar a página, receberá um erro, como Erro durante o espelhamento:

   

   Como outra perspectiva sobre esse cenário, aqui está a Barra Lateral de Ferramentas do Microsoft Edge quando o botão Iniciar Instância foi clicado, ao exibir uma URL e uma pasta que contém arquivos de origem que correspondem aos recursos da página da Web da URL não está aberta:

   

As opções neste caso incluem:

• Desmarque a caixa de seleção Edição de espelho CSS na guia Estilos e continue experimentando alterações CSS (sem edição automática de CSS nos arquivos de origem). Isso evita mais mensagens de erro sobre o mapeamento para arquivos de origem para edição de espelho CSS.

• Abra uma pasta que contenha arquivos de código-fonte que correspondam à página da Web para ter a edição automática de CSS nos arquivos de código-fonte.

• Conceda confiança a uma pasta abrindo-a no Visual Studio Code, caso o DevTools esteja tentando editar um arquivo de origem, mas o Visual Studio Code não concedeu confiança à pasta recipiente.

Veja também:

• Solução de problemas da extensão DevTools

URLs, caminhos de arquivo e abertura de uma pasta correspondente

Em alguns casos, o comportamento do DevTools é diferente para caminhos de arquivo e para URLs.

• Se você inserir um caminho de arquivo na barra de endereços do navegador DevTools e editar o CSS no DevTools, o navegador saberá onde encontrar os arquivos de origem. Talvez seja necessário abrir essa pasta para conceder confiança a ela, para poder usar a edição de espelho CSS. Ou desmarque a caixa de seleção de edição de espelho CSS.

• Se você inserir uma URL na barra de endereços do navegador DevTools, o navegador saberá onde encontrar a cópia baixada dos arquivos de origem, se você estiver apenas inspecionando páginas da Web e experimentando o CSS. Se você quiser usar a edição de espelho CSS (para que o DevTools edite CSS em arquivos de origem), a caixa de seleção de edição de espelho CSS deverá ser marcada e você deverá abrir uma pasta no Visual Studio Code contendo arquivos de origem que correspondam à página da Web.

Fechando o DevTools

Feche instâncias do DevTools usando qualquer uma das seguintes abordagens:

• Se o Visual Studio Code estiver no modo de Depuração, clique no botão Parar na barra de ferramentas Depurar ou selecione Executar>Parar Depuração:

  

  As guias DevTools do Edge e DevTools do Edge: o navegador são fechadas.

• Se a guia DevTools do Edge estiver aberta, clique em Fechar (x) na guia.

• Se a guia DevTools do Edge: Navegador estiver aberta, clique em Fechar (x) na guia.

• Selecione Barra de> AtividadesFerramentas do Microsoft Edge. Se a seção Destinos listar destinos, passe o mouse sobre o lado direito da instância de destino e clique em Fechar instância (x):

  

  O botão Executar instância ou Iniciar projeto é exibido.

• Selecione Arquivo>, Fechar Pasta.

• Feche a janela do Visual Studio Code.

• Se um navegador externo controlado por automação foi aberto pela extensão DevTools, feche a janela externa do navegador.

Confira também

• Introdução ao uso da extensão DevTools para o Visual Studio Code
• Extensão do DevTools do Microsoft Edge para o Visual Studio Code
• Limitações do navegador DevTools inserido no Usando uma janela externa do navegador.