Instalando a extensão DevTools para Visual Studio Code

Este artigo orienta você pela configuração inicial da extensão DevTools. Depois de instalar o DevTools, você estará pronto para seguir as etapas em Introdução ao uso da extensão DevTools para o Visual Studio Code.

Este artigo ajuda você a:

  • Instale a extensão DevTools.

  • Clone o repositório Demos, que inclui o aplicativo Web demo-to-do .

  • Inicie um servidor Web para que você possa usar URLs de host local na extensão DevTools no Visual Studio Code.

Etapa 1: Instalar o Visual Studio Code

  1. Se ainda não tiver feito isso, em uma janela ou guia separada, vá para Baixar o Visual Studio Code e baixe e instale o Visual Studio Code.

Etapa 2: Instalar o Microsoft Edge

O Microsoft Edge é necessário para a extensão DevTools para o Visual Studio Code.

No Windows, o Microsoft Edge está instalado. No macOS ou no Linux, instale o Microsoft Edge da seguinte maneira:

  1. Vá para a página do Edge em Microsoft.com.

Etapa 3: Instalar a extensão DevTools do Microsoft Edge

Instale a extensão do Microsoft Edge DevTools para Visual Studio Code, da seguinte forma:

  1. Abra o Visual Studio Code.

  2. Na Barra de Atividades à esquerda, clique no botão Extensões (ícone de Extensões). Ou pressione Ctrl+Shift+X no Windows/Linux ou Command+Shift+X no macOS. O painel Marketplace de Extensões é aberto.

  3. Na caixa de texto Pesquisar Extensões no Marketplace , insira Ferramentas do Microsoft Edge para VS Code.

  4. Selecione as Ferramentas do Microsoft Edge para Código VS e clique no botão Instalar :

    Instalando a extensão DevTools do Microsoft Edge para Visual Studio Code

Como alternativa, você pode usar o navegador para baixar a extensão DevTools do Microsoft Edge no site do Visual Studio Marketplace. Acesse Ferramentas de Desenvolvedor do Microsoft Edge para o Visual Studio Code.

Etapa 4: Instalar o Node.js e o Node Gerenciador de Pacotes (npm)

Para obter uma análise em tempo real (em tempo real) do seu código para indicar problemas, como sublinhados ondulados, e para oferecer Correções Rápidas, você deve instalar o Node.js e o Gerenciador de Pacotes do Node (npm).

A extensão DevTools mostra uma sugestão pop-up para instalar o Node.js e o npm. O texto da sugestão é semelhante a: "Instalar Node.js & npm? (sugerido porque você instalou esta extensão)".

  1. Clique no link no pop-up, se ele abrir.

  2. Instale o Node.js e o npm do Node.js> Downloads > LTS (estável de longo prazo) (ou Atual).

    No Windows, um .msi arquivo é baixado, como: node-v18.17.1-x64.msi

  3. No painel Downloads do navegador, clique em Mostrar na pasta e execute o arquivo baixado. O Assistente de Configuração do Node.js é aberto. Clique no botão Avançar e siga as instruções. Você pode usar as opções padrão.

  4. Confirme se o Node.js e o npm estão instalados, da seguinte forma: no Visual Studio Code, selecione View>Terminal. Ou execute o aplicativo git bash.

  5. No prompt de comando, insira npm version. Os números de versão são exibidos para npm e para node, indicando que o Gerenciador de Pacotes do Node e o Node.js estão instalados, para dar suporte à análise de problemas em linha e ao vivo. Por exemplo:

    $ npm version
{
   npm: '10.9.2',
   node: '22.14.0',
   ...
}

Etapa 5: Clonar o repositório Demos

A clonagem do repositório Demos é opcional. O repositório Demos é útil para seguir as várias documentações do DevTools. Se desejar, em vez de clonar o repositório, você pode abrir um diretório de projeto existente, se tiver um.

Como outra alternativa, em vez de clonar todo o diretório, você pode baixar apenas o diretório demo-to-do . Por exemplo, vá para https://download-directory.github.io/ e cole a URL https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do. O .zip arquivo é colocado no diretório de download. Descompacte esses arquivos de origem da página da Web em um local adequado. O tutorial Introdução ao uso da extensão DevTools para Visual Studio Code usa o local de exemplo:

C:\Users\username\Documents\GitHub\Demos\demo-to-do\

Para clonar o repositório Demos para usar o exemplo de demonstração pendente deste tutorial:

  1. Vá para o repositório MicrosoftEdge / Demos .

  2. Se o botão Código verde não for mostrado, clique em Demos no caminho Microsoft Edge / Demos no canto superior esquerdo para ir para a página principal do repositório.

  3. Clique no botão Código verde e selecione o botão Copiar . Este artigo pressupõe que você esteja usando os recursos de Controle do Código-Fonte no Visual Studio Code. Ou você pode usar um dos outros métodos fornecidos, se souber que deseja usar essa abordagem:

    • Abrir com o GitHub Desktop
    • Abrir com o Visual Studio
    • Baixar como ZIP

    Clonando o repositório MicrosoftEdge/Demos

  4. No Visual Studio Code, na Barra de Atividades, clique no botão Controle do Código-Fonte (ícone de Controle do Código-Fonte) e, em seguida, clique no botão Clonar Repositório.

  5. Na caixa de texto Fornecer URL do repositório , cole a URL https://github.com/MicrosoftEdge/Demos.git copiada e pressione Enter. Uma caixa de diálogo de seleção de pasta é aberta.

    O botão Clonar Repositório no Visual Studio Code

  6. Navegue até o caminho desejado, como C:\Users\username\Documents\GitHub ou Users/username/GitHub, e clique no botão Selecionar Local do Repositório .

  7. A mensagem Clonando repositório git é exibida, então você é solicitado a abrir o repositório clonado. Clique no botão Abrir :

    Solicitado a abrir o repositório clonado

  8. Se solicitado Você confia..., clique no botão Sim . Ou clique no botão Não e continue com a maior parte deste passo a passo.

    A árvore do Explorer lista muitas demonstrações, incluindo demo-to-do.

  9. No Visual Studio Code, selecione Arquivo>Fechar Pasta.

  10. Na Barra de Atividades, clique no botão Ferramentas do Microsoft Edge (ícone de Ferramentas do Microsoft Edge). O painel Ferramentas do Microsoft Edge é aberto.

  11. No painelDestinos das Ferramentas > do Microsoft Edge, clique no botão Abrir Pasta. A caixa de diálogo Abrir Pasta é aberta. Navegue até a demo-to-do pasta no repositório de demonstração que você clonou, selecione a pasta ou acesse-a e clique no botão Selecionar pasta :

    Selecionando a pasta demo-to-do

    Um exemplo de um local de repositório em que o repositório Demos foi clonado é mostrado acima. A demo-to-do pasta do repositório Demos clonado é aberta no Explorer do Visual Studio Code e ainda não existe nenhum launch.json arquivo:

    Abriu a pasta demo-to-do inicialmente

Etapa 6: configurar um servidor localhost

Se você instalou o Node.js e o npm, conforme descrito acima, npx http-server é uma maneira simples de iniciar um servidor Web local. Você pode pular para as etapas abaixo ou ler essas informações básicas primeiro.

Em muitos casos, você não precisa inserir uma URL ou executar um servidor localhost. Por exemplo, você pode:

  • Abra uma pasta que contenha arquivos de origem de páginas da Web e clique com o botão direito em um .html arquivo.
  • Insira um caminho de arquivo local na barra de endereços, como C:/Users/username/.vscode/extensions/ms-edgedevtools.vscode-edge-devtools-2.1.1/out/startpage/index.html (o padrão, página Êxito).
  • Insira uma URL de servidor remoto na barra de endereços do Edge DevTools: Guia do navegador , como https://microsoftedge.github.io/Demos/demo-to-do/.

Se sua página da Web usa determinadas APIs que exigem que a página da Web seja executada em um servidor Web, para usar o DevTools, você deve iniciar um servidor Web local para teste. Se você não servir seu projeto em um servidor Web, mas apenas em vez disso, usar arquivos locais, ainda poderá usar o DevTools, com capacidade de depuração, clicando com o botão direito do mouse em um arquivo local .html . A funcionalidade do seu aplicativo que requer especificamente que ele esteja em um servidor não funcionará e o DevTools terá utilidade limitada.

Para obter informações sobre http-server, consulte http-server: um servidor HTTP estático simples.

Configurar http-server

  1. No Visual Studio Code, selecione Arquivo>Abrir pasta> Abra o diretório que contém o .html, .css, e .js arquivos de uma página da Web, como C:\Users\username\Documents\GitHub\Demos\demo-to-do\.

    No exemplo de caminho acima:

    • \Documents\GitHub\ é para onde o Demos repositório foi clonado.
    • \Demos\ é o repositório GitHub usado para exemplos na documentação do Desenvolvedor do Microsoft Edge.
    • \demo-to-do\ é um dos diretórios de exemplo no repositório.

  2. No Visual Studio Code, selecione Exibir>Terminal. Ou, para manter o servidor Web em execução independentemente do estado do Visual Studio, abra um prompt de comando fora do Visual Studio Code, como git bash.

  3. cd Na pasta que você deseja servir via HTTP.

    No shell do git bash, use barras, como:

    cd C:/Users/username/Documents/GitHub/Demos/demo-to-do/

    Ou, se você estiver usando um prompt de comando diferente no Windows, use barras invertidas, como:

    cd C:\Users\username\Documents\GitHub\Demos\demo-to-do\

Continue abaixo.

Iniciar o servidor (npx http-server)

Essas etapas iniciam o servidor pela primeira vez.

  1. Digite o comando npx http-server:

    npx http-server

    Um servidor Web local é iniciado na porta 8080.

    Você pode receber uma mensagem como:

    Need to install the following packages:
  http-server@14.1.1
Ok to proceed? (y)

    Ou, se você não obtiver esse arquivo ou diretório, poderá executar: npm install --global http-server e, em seguida, executar: http-server

  2. Insira y.

    O Windows pergunta se deseja permitir que o Nó se comunique na rede:

    Permitindo que o nó se comunique na rede

  3. Marque a caixa de seleção Redes privadas e clique no botão Permitir acesso .

    Informações sobre o URL do servidor e do host local são exibidas, como:

    Starting up http-server, serving ./

Available on:
http://10.0.1.8:8080
http://127.0.0.1:8080
Hit CTRL-C to stop the server

    As URLs exibidas são geralmente equivalentes à URL padrão comum, http://localhost:8080.

    Iniciando o servidor

Em seguida, consulte Introdução ao uso da extensão DevTools para o Visual Studio Code.

Confira também

  • Last updated on