Instalando a extensão DevTools para Visual Studio Code

  • Artigo

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

Este artigo ajuda você:

  • Instale a extensão DevTools.

  • Clone o repositório Demos, que inclui o aplicativo Web de demonstração a fazer .

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

Etapa 1: instalar Visual Studio Code

  1. Se ainda não terminar, em uma janela ou guia separada, vá para Baixar Visual Studio Code e baixar e instalar Visual Studio Code.

Etapa 2: Instalar o Microsoft Edge

O Microsoft Edge é necessário para a extensão DevTools para 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 no Microsoft.com.

Etapa 3: instalar a extensão Microsoft Edge DevTools

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

  1. Abra o Visual Studio Code.

  2. Na Barra de Atividades à esquerda, clique no botão Extensões (ícone 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 Extensões de Pesquisa no Marketplace, insiraFerramentas do Microsoft Edge para VS Code.

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

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

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

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

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

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

  1. Clique no link no pop-up, se ele for aberto.

  2. Instale Node.js e npm do Node.js> Downloads > LTS (estável a 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 Instalação Node.js é aberto. Clique no botão Avançar e siga os prompts. Você pode usar as opções padrão.

  4. Confirme se Node.js e npm estão instalados da seguinte maneira: em Visual Studio Code, selecione Exibir>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 e para npmnode, indicando que o Gerenciador de Pacotes do Nó e Node.js estão instalados, para dar suporte à análise de problemas inline e ao vivo. Por exemplo:

    $ npm version
{
   npm: '9.6.7',
   node: '18.17.1',
   ...
}

Veja também:

Etapa 5: Clonar o repositório Demos

Clonar o repositório Demos é opcional. O repositório Demos é útil para seguir a documentação de vários DevTools. Se desejar, em vez de clonar o repositório, poderá 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 de demonstração para fazer . 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 para fazer para este tutorial:

  1. Acesse 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 acessar a página main 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 de Origem 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 ZIP

    Clonando o repositório MicrosoftEdge/Demos

  4. Em Visual Studio Code, na Barra de Atividades, clique no botão Controle de Origem (ícone controle de origem) e clique no botão Clonar Repositório.

  5. Na caixa de texto Fornecer URL do repositório , cole a URL copiada: https://github.com/MicrosoftEdge/Demos.git 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 o repositório git é exibida e você será solicitado a abrir o repositório clonado. Clique no botão Abrir :

    Solicitado a abrir o repositório clonado

  8. Se solicitado , confie..., clique no botão Sim . Ou clique no botão Não e continue com a maioria das partes deste passo a passo.

    A árvore Explorer lista muitas demonstrações, incluindo demonstração a fazer.

  9. Em Visual Studio Code, selecionePasta fechararquivo>.

  10. Na Barra de Atividades, clique no botão Ferramentas do Microsoft Edge (ícone 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 Demo que você clonou, selecione a pasta ou vá para ela e clique no botão Selecionar Pasta :

    Selecionando a pasta demonstração a fazer

    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 de Visual Studio Code e ainda não existe nenhum launch.json arquivo:

    Abriu inicialmente a pasta demonstração a fazer

Etapa 6: Configurar um servidor localhost

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

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

  • Abra uma pasta que contém arquivos de origem da página da Web e clique com o botão direito do mouse 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 (a página padrão, Êxito).
  • Insira uma URL do servidor remoto na barra de endereços da guia Edge DevTools: Navegador , como https://microsoftedge.github.io/Demos/demo-to-do/.

Se sua página da Web usar determinadas APIs que exigem que a página da Web esteja em execução em um servidor Web, para usar o DevTools, você deverá iniciar um servidor Web local para teste. Se você não atender seu projeto em um webserver, mas somente em vez disso, usar arquivos locais, ainda poderá usar 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 exige especificamente que seu aplicativo esteja em um servidor não funcionará, e o DevTools terá utilitário limitado.

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

Configurar o http-server

  1. Em Visual Studio Code, selecione Arquivo>Abrir Pasta> abra o diretório que contém os .htmlarquivos , .csse .js para uma página da Web, como C:\Users\username\Documents\GitHub\Demos\demo-to-do\.

    No caminho de exemplo acima:

    • \Documents\GitHub\ é 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. Em 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 de Visual Studio Code, como git bash.

  3. cd na pasta que você deseja servir por meio de http.

    No shell do git bash, use barras para a frente, como:

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

    Ou, se você estiver usando um prompt de comando diferente no Windows, use backslashes, 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. Insira o comando npx http-server:

    npx http-server

    Um webserver local começa 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 receber esse arquivo ou diretório, poderá executar: npm install --global http-server e, em seguida, executar: http-server

  2. Insira y.

    O Windows solicita se o Nó deve se comunicar na rede:

    Permitindo que o Nó se comunique na rede

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

    Informações sobre o servidor e a URL localhost 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 geralmente são equivalentes à URL padrão comum, http://localhost:8080.

    Iniciando o servidor

Em seguida, consulte Introdução usando a extensão DevTools para Visual Studio Code.

Confira também