Comece por clicar no botão Iniciar Projeto

Artigo
07/18/2024

Utilize este tutorial para saber como abrir e fechar DevTools ao clicar no botão Iniciar Projeto , executar a Demonstração a Fazer num servidor Web localhost e armazenar o URL da página Web no launch.json.

Vamos utilizar a aplicação de demonstração demo-to-do para demonstrar o botão Iniciar Projeto depois de apontar esse botão para um URL de localhost, como http://localhost:8080. O botão Iniciar Projeto inicia DevTools no modo de depuração. Esta é a principal forma de abrir o DevTools quando a sua página Web requer a execução num servidor Web. Como passo preliminar, vamos criar um launch.json ficheiro e editar o URL no mesmo para apontar para localhost que serve a aplicação de exemplo de demonstração de tarefas.

Nem sempre precisa de utilizar esta abordagem porque, em muitos casos, o clique com o botão direito do rato num ficheiro HTML funciona. No entanto, muitas páginas Web utilizam APIs que exigem que a página Web esteja em execução num servidor Web, pelo que eis alguns passos específicos que pode seguir.

Passo 1: Instalar DevTools e pré-requisitos

Se ainda não o fez, siga os passos em Instalar a extensão DevTools para o Visual Studio Code e, em seguida, continue abaixo.

Passo 2: Iniciar o servidor Web

Esta secção suporta o clique no botão Iniciar Projeto .

Estes passos explicam como iniciar o http-server com a shell do git bash entre plataformas, que faz parte do git. Embora possa utilizar oTerminal de Visualização> do Visual Studio Code > para iniciar o servidor, é melhor iniciar o servidor a partir de uma linha de comandos que esteja fora do Visual Studio Code, para que o servidor permaneça em execução mesmo que feche e reabra o Visual Studio Code ou a pasta.

Se ainda não o fez, configure e inicie um servidor Web pela primeira vez, servindo a aplicação de demonstração a fazer a partir do repositório Demos. Para tal, consulte o Passo 6: Configurar um servidor localhost em Instalar a extensão DevTools para o Visual Studio Code.
Abra o git bash. Por exemplo, no Windows, prima Iniciar e, em seguida, introduza git bash.
cd na pasta específica que pretende servir através de http, Demos\demo-to-do\:

No git bash, utilize barras para caminhos de ficheiro. Por exemplo:
```
cd C:/Users/username/Documents/GitHub/Demos/demo-to-do
```
Introduza o comando npx http-server. Um servidor Web local é iniciado na porta 8080.
```
npx http-server
```
São apresentadas informações sobre o URL do servidor e do localhost, tais 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
```
Os URLs apresentados são normalmente equivalentes ao URL padrão comum, http://localhost:8080.

Passo 3: Configurar launch.json

Esta secção suporta o clique no botão Iniciar Projeto .

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

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

O novo launch.json ficheiro é aberto.

Em vários locais do launch.json ficheiro, em cada uma das "url" linhas, desloque-se para a direita e anote o comentário "Indique o URL do 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

Num browser, aceda ao http://localhost/ URL onde o ficheiro de demonstração demo-to-do.html está no servidor, como o URL padrão comum, http://localhost:8080.
Copie o URL da barra de endereço.
Em launch.json, em cada cadeia de URL, cole o URL da cópia clonada da aplicação demo-to-do , como: http://localhost:8080. Cole o caminho dentro da cadeia de caminho entre as "url" asas numa das cadeias. Por exemplo:
```
"url": "http://localhost:8080", // Provide your project's url to finish configuring
```
Copie e cole a linha do URL modificado para os outros locais do launch.json ficheiro.

Sugestão: para modificar todas as instâncias ao mesmo tempo, pode copiar uma cadeia de URL atualizada e, em seguida, selecionar uma instância da cadeia de URL inicial, premir Ctrl+Shift+L para selecionar todas as instâncias e, em seguida, colar a cadeia atualizada.
Guarde o launch.json ficheiro.

Passo 4: Clique no botão Iniciar Projeto

No Visual Studio Code, na Barra de Atividade, clique no botão Ferramentas do Microsoft Edge (). É aberto o painel Ferramentas do Microsoft Edge , que contém agora um botão Iniciar Projeto , mas não um botão Gerar launch.json ficheiro :
Clique no botão Iniciar Projeto .

O separador DevTools do Edge e o separador Edge DevTools: Browser são abertos em painéis separados, mostrando a aplicação Web demo-to-do :

Neste momento, pode trabalhar com edições CSS ou percorrer o código no depurador. Veja estas secções do tutorial Introdução ao clicar com o botão direito do rato num ficheiro HTML:

Passo 5: Fechar DevTools

Para terminar a depuração e fechar os separadores DevTools do Edge :

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

Em alternativa, no menu Executar , selecione Parar Depuração. Em alternativa, feche os dois separadores DevTools. A barra de ferramentas Depurar é fechada.

Veja também:

Fechar As DevTools na Abertura de DevTools e no browser DevTools.

Concluiu o tutorial "Introdução ao clicar no botão Iniciar Projeto". Recomenda-se que também faça os outros tutoriais; veja Começar a utilizar a extensão DevTools para o Visual Studio Code.

Confira também

GitHub:

demo-to-do - a aplicação Web de demonstração em execução no github.io servidor.
Código fonte para demonstração de tarefas
Repositório MicrosoftEdge/Demos

Partilhar via