Abrir DevTools e o browser DevTools

Existem várias formas de abrir o separador DevTools e o separador DevTools do Edge: Browser :

Estas abordagens são descritas abaixo. Para obter os passos detalhados que utilizam o repositório Demos, veja Começar a utilizar a extensão DevTools para Visual Studio Code.

Abrir DevTools ao clicar com o botão direito do rato num ficheiro HTML

Esta abordagem abre os separadores DevTools no modo de depuração e é recomendada, a menos que a página Web necessite de ser executada num servidor Web, tal como acontece com determinadas APIs.

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

1. No Visual Studio Code, efetue um dos seguintes procedimentos:

   • Selecione Barra >de AtividadeExplorer () > clique no botão Abrir Pasta.
   • SelecioneAbrir Pasta de Ficheiros>.
   • Selecione Abrir Ficheiro>Recente.

2. Abra uma pasta que contenha ficheiros de origem de aplicações Web.

3. No Visual Studio Code, no Explorer, clique com o botão direito do rato num .html ficheiro, selecione Abrir com o Edge e, em seguida, selecione Abrir Browser com DevTools:

   

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

   

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

   • O separador DevTools do Edge , incluindo o separador Elementos e outros separadores de ferramentas.
   • O separador Edge DevTools: Browser , incluindo a barra de ferramentas Emulação do Dispositivo na parte inferior.
   • A barra de ferramentas de Depuração na parte superior, incluindo botões como Pausa, Passo a Passo, Avançar, Repor e Parar.
   • A Consola de Depuração na parte inferior.
   • A barra lateral Executar e Depurar (tal como selecionar Ver>Execução).

Nesta abordagem, uma instância não está listada na Barra de> AtividadeDestinos das Ferramentas> do Microsoft Edge.

Utilize o Explorer Barra Lateral, da Barra de Atividade, para abrir um .js ficheiro durante a depuração de uma página Web.

O separador Edge DevTools: Browser inclui uma barra de ferramentas de Emulação de Dispositivos. Este separador contém um browser incorporado com funcionalidades de DevTools. Por vezes, este browser é denominado screencast ou browser sem cabeça para DevTools.

Veja também:

• Introdução ao clicar com o botão direito do rato num ficheiro HTML

Abrir DevTools ao clicar no botão Iniciar Instância

Esta abordagem abre os separadores DevTools no modo de não depuração e é útil quando não quer a barra de ferramentas de Depuração.

Estes passos partem do princípio de que, inicialmente, não existe nenhuma pasta aberta no Visual Studio Code e que a pasta que está a abrir não tem um launch.json ficheiro.

1. No Visual Studio Code, efetue um dos seguintes procedimentos:

   • Selecione Barra >de AtividadeExplorer () > clique no botão Abrir Pasta.
   • SelecioneAbrir Pasta de Ficheiros>.
   • Selecione Abrir Ficheiro>Recente.

   Para utilizar todas as funcionalidades de DevTools, incluindo o CSS espelho edição do ficheiro de origem local ao editar o CSS em DevTools, abra uma pasta que contenha ficheiros de origem que correspondam à página Web que pretende apresentar no DevTools.

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

   

   Se existir um botão Iniciar Projeto em vez de um botão Iniciar Instância , isso indica que a pasta contém um launch.json ficheiro. Inspecione o URL especificado no ficheiro e considere clicar em launch.jsonIniciar Projeto, conforme descrito em Abrir DevTools ao clicar no botão Iniciar Projeto. Em alternativa, se quiser explorar como funciona o botão Iniciar Instância , pode eliminar o launch.json ficheiro e gerar um novo launch.json ficheiro mais tarde.

   

   • O separador DevTools do Edge é aberto, inicialmente com 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 separador Edge DevTools: Browser (o browser incorporado) é aberto, mostrando inicialmente a página Êxito .
   • A barra de ferramentas de depuração e a IU de depuração de Visual Studio Code não abre.
   • No painel Ferramentas do Microsoft Edge , a secção Destinos é aberta, listando um destino e o botão Iniciar Instância é removido.

3. No separador DevTools do Edge: Browser, na Barra de endereço, cole um caminho de ficheiro ou um URL que corresponda à pasta aberta no Visual Studio Code.

   Se quiser obter um caminho de ficheiro: na Barra de Atividade> do Visual Studio Code >Explorer () > clique com o botão direito do rato num .htmlCaminho de Cópia do ficheiro>.

   Se quiser colar um URL, os exemplos são:

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

   OS URLs semelhantes são apresentados na linha de comandos quando introduz (por exemplo) npx http-server para executar um servidor Web localmente.

   A página Web que especificou é apresentada no separador Edge DevTools: Browser (o browser incorporado). O separador DevTools do Edge apresenta informações sobre a página Web.

Veja também:

• Comece por clicar no botão Iniciar Instância

Abrir DevTools ao clicar no botão Iniciar Projeto

Esta abordagem abre os separadores DevTools no modo de depuração e é recomendada se a página Web precisar de ser executada num servidor Web como em determinadas APIs.

Resumo:

1. Abra uma pasta local que contenha ficheiros de origem de aplicações Web.
2. Clique no botão Gerar launch.json .
3. Adicione um URL de localhost no .json ficheiro.
4. Clique no botão Iniciar Projeto .

Estes passos partem do princípio de que está a executar um servidor Web localhost, conforme descrito no Passo 6: Configurar um servidor localhost em Instalar a extensão DevTools para Visual Studio Code.

Para abrir o DevTools ao clicar no botão Iniciar Projeto , siga os seguintes passos.

Abrir uma pasta local que contenha ficheiros de origem de aplicações Web

1. No Visual Studio Code, efetue um dos seguintes procedimentos:

   • Selecione Barra >de AtividadeExplorer () > clique no botão Abrir Pasta.
   • SelecioneAbrir Pasta de Ficheiros>.
   • Selecione Abrir Ficheiro>Recente.

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

2. Na Barra de Atividade, 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 das Ferramentas do Microsoft Edge contém 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 ficheiro, a Barra Lateral das Ferramentas do Microsoft Edge contém um botão Iniciar Projeto e não um botão Gerar launch.json . Neste caso, poderá querer inspecionar ou alterar a url cadeia no ficheiro 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 ficheiro é aberto.

Continue abaixo.

Adicionar um URL de localhost no ficheiro de .json

1. Em vários locais do launch.json ficheiro, em cada uma das "url" linhas, desloque-se para a direita e anote o comentário "Indique o 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

   Os URLs semelhantes são apresentados na linha de comandos quando inicia um servidor ao introduzir npx http-server.

2. Cole o caminho dentro da cadeia de caminho entre as "url" asas numa das cadeias. Por exemplo:

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

   A cadeia de URL pode ser um caminho de ficheiro local, embora, nesse caso, não precise de um launch.json ficheiro; para iniciar o DevTools, pode simplesmente clicar com o botão direito do rato num .html ficheiro no Explorer de Visual Studio Code.

   (Se mantiver o URL tal como está, a página predefinida Êxito é apresentada e pode colar um URL de localhost ou um caminho de ficheiro na Barra de endereço do separador DevTools do Edge: Browser .)

3. Copie e cole a linha do URL modificado para os outros locais do launch.json ficheiro. Para modificar todas as instâncias ao mesmo tempo, pode copiar uma cadeia de URL atualizada e, em seguida, selecionar uma instância da cadeia de URL inicial, premir Ctrl+Shift+L para selecionar todas as instâncias e, em seguida, colar a cadeia atualizada.

4. Guarde o launch.json ficheiro.

Continue abaixo.

Clique no botão Iniciar Projeto

1. No Visual Studio Code, na Barra de Atividade, clique no botão Ferramentas do Microsoft Edge (). O painel Ferramentas do Microsoft Edge é aberto, agora com o botão Iniciar Projeto (em vez de um botão Iniciar Instância ) e já não contém um botão Gerar launch.json ficheiro :

   

2. Clique no botão Iniciar Projeto .

   O separador DevTools do Edge e o separador DevTools do Edge: Browser são abertos em painéis separados, mostrando o URL da aplicação Web especificado em launch.json:

   

Veja também:

• Comece por clicar no botão Iniciar Projeto

Mapear ficheiros de URL para a pasta aberta

Se o DevTools conseguir correlacionar e estabelecer o mapeamento da área de trabalho entre os ficheiros transferidos do servidor e os ficheiros na pasta que abriu, a DevTools fornece todas as funcionalidades, incluindo cSS espelho edição dos seus ficheiros de origem local quando altera o CSS no DevTools.

Se o DevTools não conseguir mapear os ficheiros no separador DevTools do Edge: Browser para os ficheiros na pasta que abriu no Explorer do Visual Studio Code, pode inspecionar páginas Web e alterá-las, como alterar valores CSS no separador Origens da ferramenta Elementos no separador DevTools do Edge. No entanto, neste caso, não pode utilizar o CSS espelho edição para que o DevTools edite automaticamente os seus ficheiros de origem. As opções são:

• Desmarque a caixa de verificação CSS espelho editar no separador Estilos e continue a experimentar as alterações do CSS.

• Abra uma pasta que contenha ficheiros de origem que correspondam à página Web.

• Conceda confiança a uma pasta ao abri-la no Visual Studio Code.

Por exemplo:

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

2. Abra DevTools, conforme descrito acima.

3. No separador DevTools do Edge: Browser , na Barra de endereço, cole um URL remoto github.io , como https://microsoftedge.github.io/Demos/demo-to-do/.

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

   Agora, pode alterar os valores CSS na ferramenta Elementos porque, no Explorer de Visual Studio Code, está aberta uma pasta que contém ficheiros de origem que o DevTools consegue mapear para os ficheiros de recursos transferidos que constituem a página Web:

   

   A imagem acima mostra a utilização do separador Estilos com a caixa de verificação de edição CSS espelho selecionada, utilizada para aumentar o corpo de texto para 24pt. O separador Edge DevTools: Browser compõe a página à medida que altera o valor. A Barra de endereço do separador contém um URL em vez de um caminho de ficheiro. Uma vez que o CSS espelho caixa de verificação de edição selecionada e o ficheiro correspondente .css ser encontrado numa pasta local gravável, o .css ficheiro na unidade local é editado automaticamente para 24pt;.

Evitar mensagens de erro sobre espelhamento ou mapeamento

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

1. SelecioneFechar Pasta deFicheiros>.

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

3. No separador DevTools do Edge: Browser , na Barra de endereço, cole um URL remoto github.io , como https://microsoftedge.github.io/Demos/demo-to-do/.

   Agora que a pasta que contém os ficheiros de origem está fechada, se tentar alterar os valores CSS na ferramenta Elementos , receberá uma mensagem de erro DevTools. Pode inspecionar páginas Web, mas não editá-las. Pode interagir com a página e vê-la em diferentes dispositivos e estados de composição ao utilizar a barra de ferramentas Emulação do Dispositivo na parte inferior do separador DevTools: Browser do Edge .

   Também pode inspecionar o CSS e o HTML. No entanto, se tentar alterar a página, obtém um erro, como Erro ao espelhar:

   

   Como outra perspetiva sobre esse cenário, eis a Barra Lateral das Ferramentas do Microsoft Edge quando o botão Iniciar Instância foi clicado, quando visualiza um URL e não está aberta uma pasta que contenha ficheiros de origem que correspondam aos recursos da página Web do URL:

   

Neste caso, as opções incluem:

• Desmarque a caixa de verificação CSS espelho editar no separador Estilos e continue a experimentar as alterações de CSS (sem edição automática do CSS nos ficheiros de origem). Isto impede mensagens de erro adicionais sobre o mapeamento para ficheiros de origem para edição de espelho CSS.

• Abra uma pasta que contenha ficheiros de origem que correspondam à página Web para ter a edição automática de CSS em ficheiros de origem.

• Conceda confiança a uma pasta ao abri-la no Visual Studio Code, caso o DevTools esteja a tentar editar um ficheiro de origem, mas Visual Studio Code não tenha concedido confiança à pasta que contém.

Veja também:

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

URLs, caminhos de ficheiro e abrir uma pasta correspondente

Em alguns casos, o comportamento das DevTools é diferente para caminhos de ficheiro do que para URLs.

• Se introduzir um caminho de ficheiro na Barra de endereço do browser DevTools e editar o CSS em DevTools, o browser sabe onde encontrar os ficheiros de origem. Poderá ter de abrir essa pasta para conceder confiança à mesma, para poder utilizar o CSS espelho a edição. Em alternativa, desmarque a caixa de verificação de edição do CSS espelho.

• Se introduzir um URL na Barra de endereço do browser DevTools, o browser sabe onde encontrar a cópia transferida dos ficheiros de origem, se estiver apenas a inspecionar páginas Web e a experimentar o CSS. Se quiser utilizar o CSS espelho a edição (para que as DevTools editem CSS em ficheiros de origem), a caixa de verificação de edição do CSS espelho tem de estar selecionada e tem de abrir uma pasta no Visual Studio Code que contenha ficheiros de origem que correspondam à página Web.

Fechar DevTools

Feche instâncias de DevTools com qualquer uma das seguintes abordagens:

• Se 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:

  

  Os separadores Edge DevTools e Edge DevTools: Browser fecham.

• Se o separador DevTools do Edge estiver aberto, clique em Fechar (x) no separador.

• Se o separador DevTools do Edge: Browser estiver aberto, clique em Fechar (x) no separador.

• Selecione Barra de> AtividadeFerramentas do Microsoft Edge. Se a secção Destinos listar quaisquer destinos, paire o cursor sobre o lado direito da instância de destino e, em seguida, clique em Fechar instância (x):

  

  Em seguida, é apresentado o botão Iniciar Instância ou Iniciar Projeto .

• SelecioneFechar Pasta deFicheiros>.

• Feche a janela Visual Studio Code.

• Se um browser externo controlado pela automatização tiver sido aberto pela extensão DevTools, feche a janela do browser externo.

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
• Limitações do browser DevTools incorporado em Utilizar uma janela do browser externo.