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

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

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

• A guia DevTools do Edge .
• A guia DevTools do Edge: Navegador .
• A barra de ferramentas Depuração.
• A Barra Lateral Executar (Depurador), incluindo o painel Relógio .
• O Console de Depuração na parte inferior da janela.

Confira também Etapa 5: passo a passo pelo código JavaScript no Depurador em Introdução clicando com o botão direito do mouse em um arquivo HTML.

Maneiras de iniciar o depurador junto com as guias DevTools

A maioria dessas abordagens exige um arquivo gerado por launch.json DevTools que contém sua URL.

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

• Clique com o botão direito do mouse em um .html arquivo no Explorer>Open 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 Atividades>Ferramentas> do Microsoft Edge clique no botão Iniciar Projeto .

Visual Studio Code recursos da interface do usuário para abrir o DevTools no modo 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 Visual Studio Code, comece a digitar a palavra depuração após >e selecione Depurar: Abrir Link. Consulte Abrir o comando Link na depuração do navegador no VS Code.

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

Você pode abrir a guia DevTools do Edge: Navegador (o navegador DevTools inserido) 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: o navegador pode ser movido 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 ter a visualização do navegador abaixo do código:

Você pode usar a extensão DevTools com o fluxo de trabalho/interface do usuário de depuração de Visual Studio Code usual, da seguinte maneira. Nessa abordagem, para inserir o modo Depuração, não estamos usando a interface do usuário DevTools; Não estamos clicando com o botão direito do mouse em um .html arquivo para selecionar Abrir com o Edge e não estamos clicando no botãoProjeto de Lançamento doMicrosoft Edge Tools da Barra> de Atividades>.

A depuração javaScript é interna para 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 o Visual Studio Code recursos de depuração e interface do usuário, você poderá iniciar o Microsoft Edge DevTools a partir do depurador JavaScript. Se a extensão DevTools não estiver instalada, você será solicitado a instalá-la opcionalmente.

A extensão DevTools oferece funcionalidades adicionais, como o navegador DevTools inserido que tem uma barra de ferramentas de Emulação de Dispositivo e fornece maneiras adicionais de inserir o modo Depuração no Visual Studio Code.

Para iniciar o depurador 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 de Visual Studio Code. Nenhuma pasta (workspace) está aberta e as guias DevTools não estão abertas.

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

3. Abra um .html arquivo.

4. Clique no arquivo no editor e, em .html seguida, faça qualquer uma das seguintes ações de interface do usuário que iniciam o Visual Studio Code depurar as maneiras habituais:

   • 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 Visual Studio Code, comece a digitar a palavra depuração e selecione Depurar: Abrir Link.

   

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

5. Selecione Aplicativo Web (Edge).

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

   

   Na primeira vez que você clicar no botão Inspecionar na barra de ferramentas Depuração, a Barra lateral extensões: Marketplace é aberta, contendo ferramentas do Microsoft Edge para VS Code:

   

7. Clique em Ferramentas do Microsoft Edge paraInstalação de Código > VS.

8. Feche DevTools por DevTools de Fechamento.

9. Abra uma pasta e um .html arquivo.

Continue abaixo.

Gerando um launch.json orientado para DevTools

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

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

   Depois que a extensão DevTools for instalada, quando você abrir um .html arquivo e clicar no botão Inspecionar na barra de ferramentas Depuração, as guias DevTools do Edge serão abertas dentro de Visual Studio Code:

   

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

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

   

   A guia Edge DevTools: Browser é aberta.

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

Para obter etapas e capturas de tela adicionais da interface do usuário, 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 por launch.json DevTools é que você precisa inserir sua URL desejada na cadeia de "url" caracteres em vários lugares.

Abrir automaticamente o navegador e o DevTools ao depurar em Visual Studio Code

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

1. Em 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 sua pasta de projeto com a nova página padrão a ser exibida quando você começar a depurar em Visual Studio Code.

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

   

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

   Na primeira vez que você fizer esse processo, você também deve selecionarFerramentas do Microsoft Edgeda Barra> de Atividades 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 para 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 arquivo launch.json para a extensão DevTools, não um arquivo curto e mais genérico criado por Visual Studio Code. Consulte também Excluir ou recriar launch.json na 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. Salve launch.json.

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

Se você vir a página Sucesso, mas quiser sua própria página da Web em vez disso

Qual página da Web abre está no DevTools é definido por launch.json se esse arquivo existe em seu workspace (sua pasta aberta). Assim, você pode pressionar F5 enquanto seu próprio .html arquivo estiver aberto e ainda ver a página padrão Sucesso nas guias DevTools . As opções nesse caso são:

• Edite launch.json em sua 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 Visual Studio Code depurador, como F5.

• Ou exclua launch.json, em seguida, Barra> de Atividades Explorer> clique com o botão direito do mouse em seu .html arquivo > selecione Abrir com o Edge. Essa abordagem não usa o fluxo de trabalho/interface do usuário Visual Studio Code Depurador, como F5.

Confira também

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

Páginas externas:

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