Integração com depuração do Visual Studio Code

Para abrir o DevTools no Visual Studio Code no modo de depuração usando a interface do usuário do DevTools, clique com o botão direito do mouse em um .html arquivo ou clique no botão Iniciar Projeto, conforme descrito em Abrindo o DevTools e o navegador DevTools. Você também pode usar a interface do usuário do Visual Studio Code para iniciar o Depurador, como F5, para abrir as guias do DevTools, se definir um arquivo compatível launch.json com o DevTools clicando no botão Gerar launch.json na barra lateral de Ferramentas do Microsoft Edge.

Quando você abre o DevTools no Visual Studio Code no modo de depuração, os seguintes componentes da interface do usuário são abertos:

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

Consulte também Etapa 5: Percorra o código JavaScript no Depurador em Comece clicando com o botão direito do mouse em um arquivo HTML.

Maneiras de iniciar o depurador junto com as guias do DevTools

A maioria dessas abordagens requer um arquivo gerado pelo launch.json DevTools que contenha sua URL.

Recursos da interface do usuário do DevTools para abrir o DevTools no modo de depuração

• Clique com o botão direito em um .html arquivo no ExplorerAbrir>com o Edge. Essa abordagem usa essencialmente um caminho de arquivo em vez de uma URL e não exige que você gere um launch.json arquivo.

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

Recursos de interface do usuário do Visual Studio Code para abrir DevTools no modo de depuração

• Pressione F5.

• Na Barra de Atividades, 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 do Visual Studio Code, comece a digitar a palavra debug após >e selecione Depurar: Abrir Link. Consulte o comando Abrir Link em Depuração do navegador no VS Code.

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

Você pode abrir o Edge DevTools: guia do navegador (o navegador DevTools incorporado) como parte de uma sessão de depuração. A extensão DevTools abre um novo navegador como um navegador inserido no Visual Studio Code. Esta guia Devtools: Navegador pode ser movida para qualquer lugar dentro do editor. Você pode usar essa guia lado a lado com o código-fonte ou dividir os painéis e fazer com que o navegador seja visualizado abaixo do código:

Você pode usar a extensão DevTools com a UI/fluxo de trabalho de depuração usual do Visual Studio Code, da seguinte maneira. Nesta abordagem, para entrar no modo de depuração, não estamos usando a interface do usuário do DevTools; Não estamos clicando com o botão direito em um .html arquivo para selecionar Abrir com o Edge, e não estamos clicando no botão Barra de> Atividades Ferramentas doMicrosoft Edge>Iniciar Projeto.

A depuração JavaScript é interna ao Visual Studio Code; você pode depurar no Chrome, Microsoft Edge ou Node.js sem instalar extensões. Se você depurar usando a opção Microsoft Edge com os recursos de depuração e a interface do usuário do Visual Studio Code, poderá iniciar o DevTools do Microsoft Edge por meio do depurador JavaScript. Se a extensão DevTools não estiver instalada, você será solicitado a instalá-la opcionalmente.

A extensão DevTools fornece funcionalidade adicional, como o navegador DevTools incorporado, que tem uma barra de ferramentas de emulação de dispositivo e fornece maneiras adicionais de entrar no modo de depuração no Visual Studio Code.

Veja também:

• Limitações do navegador DevTools inserido no Usando uma janela externa do navegador.

Iniciar o depurador

Para iniciar o depurador do Visual Studio Code junto com o DevTools, usando a interface do usuário usual que faz parte do Visual Studio Code:

1. Abra uma nova janela do Visual Studio Code. Nenhuma pasta (espaço de trabalho) está aberta e as guias do DevTools não estão abertas.

2. Abra uma pasta (espaço de trabalho). Por exemplo, selecione Arquivo>Aberto Recente>C:\Users\username\Documents\GitHub\Demos\demo-to-do. As guias do DevTools não estão abertas.

3. Abra um .html arquivo.

4. Clique no .html arquivo no editor e execute qualquer uma das seguintes ações de interface do usuário que iniciam o depurador do Visual Studio Code das maneiras usuais:

   • Pressione F5.

   • Na Barra de Atividades, 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 do Visual Studio Code, comece a digitar a palavra debug e selecione Depurar: Abrir Link.

   

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

5. Selecione Aplicativo Web (Edge).

6. Na barra de ferramentas Depurar, clique no botão Inspecionar , que tem uma dica de ferramenta de Abrir o DevTools do navegador:

   

   Na primeira vez que você clica no botão Inspecionar na barra de ferramentas Depurar, a barra lateral Extensões: Marketplace é aberta, contendo as Ferramentas do Microsoft Edge para VS Code:

   

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

8. Fechar DevTools por Fechando DevTools.

9. Abra uma pasta e um .html arquivo.

Continue abaixo.

Gerando um launch.json orientado a DevTools

Supondo que a pasta aberta não contenha uma .vscode pasta que já contenha um launch.json arquivo:

1. Selecione a Barra de> Atividades Ferramentas > doMicrosoft Edge, clique no botão Gerar launch.json e pressione F5. Ou consulte Abrindo o DevTools e o navegador DevTools.

   Após a instalação da extensão DevTools, quando você abre um .html arquivo e clica no botão Inspecionar na barra de ferramentas Depurar, as guias do DevTools do Edge são abertas dentro do Visual Studio Code:

   

   Na captura de tela acima, há um launch.json arquivo no Explorer na .vscode pasta e uma cadeia de caracteres desse arquivo, Iniciar o Edge Headless e anexar DevTools, na parte inferior da janela, porque o DevTools foi aberto por um recurso do Visual Studio Code, como o F5, que usou o arquivo gerado pelo launch.json DevTools.

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

   

   O Edge DevTools: a guia Navegador é aberta.

   Na captura de tela acima, não há nenhum launch.json arquivo no Explorer na .vscode pasta e nenhuma cadeia de caracteres, como Launch Edge Headless e attach DevTools na parte inferior da janela, porque o DevTools foi aberto clicando com o botão direito do .html mouse no arquivo no Explorer.

Para obter etapas adicionais da interface do usuário e capturas de tela, consulte Onde as cadeias de caracteres de nome aparecem na interface do usuário. Na maioria dos casos, a única coisa que você precisa saber sobre o conteúdo do arquivo gerado pelo launch.json DevTools é inserir a "url" URL desejada na string em vários lugares.

Abrindo automaticamente o navegador e o DevTools ao depurar no Visual Studio Code

Para depurar seu projeto, talvez você queira alterar a página padrão que é aberta no Microsoft Edge no Visual Studio Code. Para alterar a página padrão do site do projeto:

1. No Visual Studio Code, selecione Arquivo>Nova Janela. Observe que nenhuma pasta está aberta.

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

3. No painel Ferramentas do Microsoft Edge: Destinos , clique no link abrir uma pasta .

4. Selecione a pasta do projeto com a nova página padrão a ser exibida quando você iniciar a depuração no Visual Studio Code.

   Na primeira vez que abrir uma pasta, você deverá confirmar que confia nos autores dos arquivos nesta pasta:

   

5. Opcionalmente, marque a caixa de seleção Confiar nos autores de todos os arquivos na pasta pai e clique no botão Sim, confio nos autores :

   Na primeira vez que fizer esse processo, você também deverá selecionar Barra> de AtividadesFerramentas do Microsoft Edge novamente.

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

   

Gerando um launch.json orientado a DevTools

1. Selecione Gerar launch.json para criar um launch.json em seu projeto. Este deve ser um arquivo mais longo criado pelo DevTools, conforme mostrado no O arquivo launch.json da extensão DevTools, não um arquivo curto e mais genérico criado pelo Visual Studio Code. Consulte também Excluir ou recriar launch.json em Solução de problemas da extensão DevTools.

2. Em launch.json, adicione a URL do seu projeto. Se você deixar a URL vazia, a página padrão será exibida.

3. Salvar launch.json.

Quando você opta por depurar seu projeto no Visual Studio Code, independentemente de você usar os recursos da interface do usuário do DevTools ou os recursos usuais da interface do usuário do Visual Studio Code, ele iniciará automaticamente o navegador e abrirá as Ferramentas de Desenvolvedor, mostrando a URL especificada no launch.json arquivo.

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

A página da Web que é aberta no DevTools é definida se launch.json esse arquivo existir no seu espaço de trabalho (a pasta aberta). Assim, você pode pressionar F5 enquanto seu próprio .html arquivo está aberto e ainda ver a página padrão de Sucesso nas guias do DevTools . Nesse caso, as opções são:

• Edite launch.json na pasta aberta para apontar para uma URL (normalmente) ou, possivelmente, um caminho de arquivo. Em seguida, você pode usar o fluxo de trabalho/interface do usuário do depurador do Visual Studio Code, como o F5.

• Ou exclua, depois launch.jsonBarra> de atividades Explorer> clique com o botão direito do mouse no .html arquivo > e selecione Abrir com o Edge. Essa abordagem não usa o fluxo de trabalho/a interface do usuário do Depurador do Visual Studio Code, como o F5.

Confira também

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

Páginas externas:

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