Integração com a depuração de Visual Studio Code

Para abrir o DevTools no Visual Studio Code no modo de Depuração com a IU de DevTools, clique com o botão direito do rato num .html ficheiro ou clique no botão Iniciar Projeto, conforme descrito em Abrir DevTools e o browser DevTools. Também pode utilizar a IU do Visual Studio Code para iniciar o Depurador, como F5, para abrir também os separadores DevTools, se definir um ficheiro compatível launch.json com DevTools ao clicar no botão Gerar launch.json na Barra Lateral das Ferramentas do Microsoft Edge.

Quando abre o DevTools no Visual Studio Code no modo de Depuração, são abertos os seguintes componentes da IU:

• O separador DevTools do Edge .
• O separador Edge DevTools: Browser .
• A barra de ferramentas Depurar.
• A Barra Lateral Executar (Depurador), incluindo o painel Monitorização .
• A Consola de Depuração na parte inferior da janela.

Veja também Passo 5: percorrer o código JavaScript no Depurador em Introdução ao clicar com o botão direito do rato num ficheiro HTML.

Formas de iniciar o depurador juntamente com os separadores DevTools

A maioria destas abordagens requer um ficheiro gerado por launch.json DevTools que contenha o URL.

Funcionalidades de IU do DevTools para abrir DevTools no modo de Depuração

• Clique com o botão direito do rato num .html ficheiro no Explorer>Abrir com o Edge. Esta abordagem utiliza essencialmente um caminho de ficheiro em vez de um URL e não requer que gere um launch.json ficheiro.

• Barra> de AtividadeFerramentas> do Microsoft Edge clique no botão Iniciar Projeto.

Visual Studio Code funcionalidades da IU para abrir o DevTools no modo de Depuração

• Pressione F5.

• Na Barra de Atividade, clique no ícone Executar e Depurar () e, em seguida, na Barra Lateral Executar e Depurar , clique no botão Executar e Depurar .

• Abra a paleta de comandos Visual Studio Code, comece a escrever a palavra depuração depois >de e, em seguida, selecione Depurar: Abrir Ligação. Consulte o comando Abrir Ligação na depuração do Browser no VS Code.

Abrir o browser como parte de uma sessão de depuração

Pode abrir o separador DevTools do Edge: Browser (o browser DevTools incorporado) como parte de uma sessão de depuração. A extensão DevTools abre um novo browser como um browser incorporado no Visual Studio Code. Este separador Devtools: Browser pode ser movido para qualquer lugar no editor. Pode utilizar este separador lado a lado com o código fonte ou dividir os painéis e ter a pré-visualização do browser abaixo do código:

Pode utilizar a extensão DevTools com o fluxo de trabalho/IU de depuração habitual Visual Studio Code, da seguinte forma. Nesta abordagem, para entrar no modo de Depuração, não estamos a utilizar a IU de DevTools; Não estamos a clicar com o botãodireito do rato num .html ficheiro para selecionar Abrir com o Edge e não estamos a clicar no botãoFerramentas do> Microsoft Edge para >Iniciar Projeto.

A depuração de JavaScript está incorporada no Visual Studio Code; pode depurar no Chrome, Microsoft Edge ou Node.js sem instalar extensões. Se depurar com a opção Microsoft Edge com as funcionalidades de depuração Visual Studio Code e a IU, pode iniciar o Microsoft Edge DevTools a partir do depurador javaScript. Se a extensão DevTools não estiver instalada, é-lhe pedido que a instale opcionalmente.

A extensão DevTools fornece funcionalidades adicionais, como o browser DevTools incorporado, que tem uma barra de ferramentas de Emulação de Dispositivos, e fornece formas adicionais de entrar no modo de Depuração no Visual Studio Code.

Veja também:

• Limitações do browser DevTools incorporado em Utilizar uma janela do browser externo.

Iniciar o depurador

Para iniciar o depurador Visual Studio Code juntamente com o DevTools, utilize a IU habitual que faz parte do Visual Studio Code:

1. Abra uma nova janela de Visual Studio Code. Não existe nenhuma pasta (área de trabalho) aberta e os separadores DevTools não estão abertos.

2. Abra uma pasta (área de trabalho). Por exemplo, selecione Abrir Ficheiro>Recente>C:\Users\username\Documents\GitHub\Demos\demo-to-do. Os separadores DevTools não estão abertos.

3. Abra um .html ficheiro.

4. Clique no .html ficheiro no editor e, em seguida, efetue qualquer uma das seguintes ações de IU que iniciam o Visual Studio Code depurar as formas habituais:

   • Pressione F5.

   • Na Barra de Atividade, clique no ícone Executar e Depurar () e, em seguida, na Barra Lateral Executar e Depurar , clique no botão Executar e Depurar , conforme mostrado abaixo.

   • Abra a paleta de comandos Visual Studio Code, comece a escrever a palavra depuração e, em seguida, selecione Depurar: Abrir Ligação.

   

   As Ferramentas do Microsoft Edge não aparecem na captura de ecrã acima porque, para esta captura de ecrã, o DevTools foi desinstalado.

5. Selecione Aplicação Web (Edge).

6. Na barra de ferramentas Depurar, clique no botão Inspecionar , que tem uma descrição de Open browser DevTools:

   

   Quando clica pela primeira vez no botão Inspecionar na barra de ferramentas Depurar, é aberta a Barra Lateral Extensões: Marketplace , que contém as Ferramentas do Microsoft Edge para VS Code:

   

7. Clique em Ferramentas do Microsoft Edge para Instalação do VS Code>.

8. Feche As DevTools por DevTools de Fecho.

9. Abra uma pasta e um .html ficheiro.

Continue abaixo.

Gerar uma launch.json orientada para DevTools

Partindo do princípio de que a pasta aberta não contém uma .vscode pasta que já contenha um launch.json ficheiro:

1. Selecione Barra >de AtividadeFerramentas> do Microsoft Edge clique no botão Gerar launch.json e, em seguida, prima F5. Em alternativa, consulte Abrir DevTools e o browser DevTools.

   Após a instalação da extensão DevTools, quando abre um .html ficheiro e, em seguida, clica no botão Inspecionar na barra de ferramentas de Depuração, os separadores DevTools do Edge são abertos dentro de Visual Studio Code:

   

   Na captura de ecrã acima, existe um launch.json ficheiro no Explorer na .vscode pasta e uma cadeia desse ficheiro, Launch Edge Headless e attach DevTools, na parte inferior da janela, porque o DevTools foi aberto por uma funcionalidade de Visual Studio Code como F5, que utilizou o ficheiro gerado launch.json pelo DevTools.

2. Se necessário, no canto superior esquerdo do separador DevTools do Edge , clique no botão Alternar screencast :

   

   É aberto o separador DevTools: Browser do Edge .

   Na captura de ecrã acima, não existe nenhum launch.json ficheiro no Explorer na .vscode pasta e nenhuma cadeia, como Iniciar o Edge Sem Cabeça, e anexar DevTools na parte inferior da janela, porque o DevTools foi aberto ao clicar com o botão direito do .html rato no ficheiro no Explorer.

Para obter passos e capturas de ecrã adicionais da IU, veja Onde as cadeias de nome aparecem na IU. Na maioria dos casos, a única coisa que precisa de saber sobre o conteúdo do ficheiro gerado por launch.json DevTools é que tem de introduzir o "url" URL pretendido na cadeia em vários locais.

Abrir automaticamente o browser e as DevTools ao depurar no Visual Studio Code

Para depurar o projeto, poderá querer alterar a página predefinida que é aberta no Microsoft Edge no Visual Studio Code. Para alterar a página predefinida para o site do projeto:

1. Em Visual Studio Code, selecione Ficheiro>Nova Janela. Repare que não existe nenhuma pasta aberta.

2. Na Barra de Atividade, selecione Ferramentas do Microsoft Edge.

3. No painel Ferramentas do Microsoft Edge: Destinos , clique na ligação abrir uma pasta .

4. Selecione a pasta do projeto com a nova página predefinida a apresentar quando começar a depurar no Visual Studio Code.

   Quando abrir uma pasta pela primeira vez, tem de confirmar que confia nos autores dos ficheiros nesta pasta:

   

5. Opcionalmente, selecione a caixa de verificação Confiar nos autores de todos os ficheiros na pasta principal e, em seguida, clique no botão Sim, confio nos autores :

   Da primeira vez que fizer este processo, também tem de selecionar novamenteFerramentas do Microsoft Edge na Barra> de Atividade.

   O painel Ferramentas do Microsoft Edge: Destinos apresenta agora dois botões: Iniciar Instância e Gerar launch.json:

   

Gerar uma launch.json orientada para DevTools

1. Selecione Gerar launch.json para criar um launch.json no seu projeto. Este tem de ser um ficheiro mais longo criado pela DevTools, conforme mostrado no ficheiro launch.json da extensão DevTools e não um ficheiro curto e mais genérico criado por Visual Studio Code. Veja também Eliminar ou recriar launch.json em Resolução de problemas da extensão DevTools.

2. Em launch.json, adicione o URL do projeto. Se deixar o URL vazio, a página predefinida é apresentada.

3. Guarde launch.json.

Quando optar por depurar o projeto no Visual Studio Code, quer utilize as funcionalidades de IU do DevTools ou as funcionalidades habituais Visual Studio Code da IU, este inicia automaticamente o browser e abre as Ferramentas de Programador, mostrando o URL que especificou no ficheirolaunch.json.

Se vir a página Êxito, mas quiser a sua própria página Web

A página Web que é aberta está em DevTools é definida se launch.json esse ficheiro existir na área de trabalho (a pasta aberta). Assim, pode premir F5 enquanto o seu próprio .html ficheiro estiver aberto e, no entanto, ver a página predefinida Êxito nos separadores DevTools . Nesse caso, as opções são:

• Edite launch.json na pasta aberta para apontar para um URL (normalmente) ou possivelmente um caminho de ficheiro. Em seguida, pode utilizar o fluxo de trabalho/IU do depurador de Visual Studio Code, como F5.

• Em alternativa, elimine launch.json, em seguida, Barra de Atividade> Explorer clique com o> botão direito do rato no seu .html ficheiro>, selecione Abrir com o Edge. Esta abordagem não utiliza o fluxo de trabalho/IU do depurador de Visual Studio Code, como F5.

Confira também

• O ficheiro launch.json da extensão DevTools
• Depurar o Microsoft Edge no Visual Studio Code
• Extensão DevTools do Microsoft Edge para Visual Studio Code
• O depurador Visual Studio Code integra-se agora com a extensão DevTools em Novidades no DevTools (Microsoft Edge 93).

Páginas externas:

• Inicie as configurações no artigo Depuração para Visual Studio Code.
• Depuração do browser no VS Code