Comece clicando no botão Iniciar Projeto

Use este tutorial para saber como abrir e fechar o DevTools clicando no botão Iniciar Projeto , para executar o Demo To Do em um servidor Web localhost e armazenar a URL da página da Web no launch.jsonformato .

Usaremos o aplicativo demo-to-do para demonstrar o botão Iniciar Projeto depois de apontar esse botão para uma URL de host local, como http://localhost:8080. O botão Iniciar Projeto inicia o DevTools no modo de depuração. Esta é a principal maneira de abrir DevTools quando sua página da Web requer execução em um servidor Web. Como etapa preliminar, criaremos um launch.json arquivo e editaremos a URL nele para apontar para o localhost que serve o aplicativo de exemplo de demonstração de tarefas .

Você nem sempre precisa usar essa abordagem, porque, em muitos casos, funciona clicar com o botão direito do mouse em um arquivo HTML. No entanto, muitas páginas da Web usam APIs que exigem que a página da Web seja executada em um servidor Web, portanto, aqui estão etapas específicas que você pode seguir.

Etapa 1: Instalar o DevTools e pré-requisitos

Se você ainda não fez isso, siga as etapas em Instalando a extensão DevTools para Visual Studio Code e continue abaixo.

Etapa 2: Iniciar o servidor Web

Esta seção é compatível com o clique no botão Iniciar projeto .

Estas etapas explicam como iniciar o servidor http usando o shell bash git multiplataforma, que faz parte do git. Embora você possa usar o Visual Studio Code >View>Terminal para iniciar o servidor, é melhor iniciar o servidor a partir de um prompt de comando que esteja fora do Visual Studio Code, para que o servidor permaneça em execução mesmo se você fechar e reabrir o Visual Studio Code ou a pasta.

Se ainda não o fez, configure e inicie um servidor Web pela primeira vez, fornecendo o aplicativo de demonstração a partir do repositório Demos. Para fazer isso, consulte Etapa 6: configurar um servidor localhost em Instalando a extensão DevTools para Visual Studio Code.
Abra git, bash ou outro prompt de comando. Por exemplo, no Windows, pressione Iniciar e insira git bash.
cd Na pasta específica que você deseja servir via HTTP, Demos\demo-to-do\:

No git bash, use barras para caminhos de arquivo. Por exemplo:
```
cd C:/Users/username/Documents/GitHub/Demos/demo-to-do
```
Insira o comando npx http-server. Um servidor Web local é iniciado na porta 8080.
```
npx http-server
```
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.

Etapa 3: Configurar launch.json

Esta seção é compatível com o clique no botão Iniciar projeto .

No Visual Studio Code, selecione Arquivo>,Abrir Pasta. Selecione o diretório do projeto que contém index.html o exemplo clonado de demonstração pendente no repositório Demos, como C:\Users\username\Documents\GitHub\Demos\demo-to-do\.

Assim como na pasta demo-to-do repositório, inicialmente não há pasta .vscode e nenhum launch.json arquivo nessa pasta.
Na Barra de Atividades, clique em Ferramentas do Microsoft Edge (). O painel Ferramentas do Microsoft Edge é aberto.
Clique no botão Gerar launch.json :

O novo launch.json arquivo é aberto.

Em vários lugares do launch.json arquivo, em cada uma das "url" linhas, role para a direita e observe o comentário "Forneça a URL do seu projeto":

"url": "c:\\Users\\username\\.vscode\\extensions\\ms-edgedevtools.vscode-edge-devtools-2.1.1\\out\\startpage\\index.html", 
// Provide your project's url to finish configuring

Em um navegador da Web, acesse a http://localhost/ URL em que o arquivo demo-to-do.html está no servidor, como a URL padrão comum, http://localhost:8080.
Copie a URL da barra de endereços.
Em launch.json, em cada cadeia de caracteres de URL, cole a URL da sua cópia clonada do aplicativo demo-to-do , como: http://localhost:8080. Cole o caminho dentro da cadeia de caracteres do caminho entre aspas em uma das "url" cadeias de caracteres. Por exemplo:
```
"url": "http://localhost:8080", // Provide your project's url to finish configuring
```
Copie e cole a linha da URL modificada em outros locais do launch.json arquivo.

Dica: para modificar todas as instâncias ao mesmo tempo, você pode copiar uma cadeia de caracteres de URL atualizada, selecionar uma instância da cadeia de caracteres de URL inicial, pressionar Ctrl+Shift+L para selecionar todas as instâncias e colar a cadeia de caracteres atualizada.
Salve o launch.json arquivo.

Passo 4: Clique no botão Iniciar projeto

No Visual Studio Code, na Barra de Atividades, clique no botão Ferramentas do Microsoft Edge (ícone Ferramentas do ). O painel Ferramentas do Microsoft Edge é aberto, agora contendo um botão Iniciar Projeto , mas não um botão Gerar launch.json arquivo :
Clique no botão Iniciar Projeto .

As guias DevTools do Edge e DevTools do Edge: Navegador são abertas em painéis separados, mostrando o aplicativo Web de demonstração pendente :

Neste ponto, você pode trabalhar com edições CSS ou percorrer o código no depurador. Confira estas seções do tutorial Comece clicando com o botão direito do mouse em um arquivo HTML:

Etapa 5: fechar o DevTools

Para encerrar a depuração e fechar as guias do DevTools do Edge :

Na barra de ferramentas Depurar, clique no botão Parar (Shift+F5):

Ou, no menu Executar , selecione Parar Depuração. Ou feche as duas guias do DevTools. A barra de ferramentas Depurar é fechada.

Veja também:

Fechando o DevTools em Abrindo o DevTools e o navegador DevTools.

Você concluiu o tutorial "Comece clicando no botão Iniciar Projeto". É recomendável que você também faça os outros tutoriais; consulte Introdução ao uso da extensão DevTools para o Visual Studio Code.

Confira também

GitHub:

demo-to-do - o aplicativo Web de demonstração em execução no github.io servidor.
Código-fonte para demonstração de tarefas pendentes
MicrosoftEdge / Demos repo.

Comentários

Esta página foi útil?

Last updated on 2026-08-24