Código de exemplo para DevTools

Utilize o repositório Demos para aprender a utilizar o Microsoft Edge para desenvolver páginas Web e aplicações Web. Existem várias formas de ver, transferir e modificar estas páginas Web de demonstração, incluindo:

• DevTools no Microsoft Edge.
• Visual Studio Code, com DevTools opcionais.
• Visual Studio, com DevTools opcionais.

Para ver o código fonte de uma página Web de demonstração composta no DevTools no Microsoft Edge:

1. Numa página Leia-me, clique na ligação Demonstração . A página em direto é aberta no Microsoft Edge.

2. Clique com o botão direito do rato na página Web de demonstração e, em seguida, selecione Inspecionar para abrir DevTools.

Lista de exemplos de DevTools

As demonstrações seguintes demonstram as funcionalidades de DevTools.

Nome da demonstração	Descrição e documentos	Código fonte & Readme	Página de demonstração em direto
Esquemas de origem do espelhamento CSS	Utilizado para Atualizar ficheiros .css a partir do separador Estilos (edição de espelho CSS) para a extensão DevTools para Visual Studio Code.	/css-mirroring-sourcemaps-demo/	n/d
Aplicação To Do	Aplicação Simple To Do com JavaScript de baunilha. Utilizado para vários artigos na documentação do Microsoft Edge DevTools.	/demo-to-do/	Demonstração das minhas tarefas
Elementos DOM desanexados	Demonstração de chat. Utilizado para Depurar fugas de memória DOM (tipo de criação de perfis "Elementos desanexados").	/detached-elements/	Demonstração de elementos DOM desanexados
Ferramenta Exibição 3D	Utilizado para Navegar em camadas de página Web, z-index e DOM com a ferramenta Vista 3D.	/devtools-3d/	Demonstração da ferramenta vista 3D
Testes de acessibilidade	Utilizado para funcionalidades de teste de acessibilidade.	/devtools-a11y-testing/	Demonstração do Abrigo de Animais
Aviso ao animar uma propriedade CSS que requer esquema	Ilustra o aviso das ferramentas Problemas e Elementos quando as propriedades CSS que necessitam de esquema são animadas. Utilizado para Editar temporizações de animação e transição com a referência de funcionalidades do Editor Easing no CSS.	/devtools-animated-property-issue/	Demonstração de propriedade CSS animada
Páginas de demonstração do painel da consola	Utilizado para a Descrição geral da Consola, Registar mensagens na ferramenta Consola e Corrigir erros javaScript comunicados na Consola.	/devtools-console/	DevTools Console panel demo pages (Páginas de demonstração do painel da Consola de DevTools)
Interagir com o DOM usando o console	Utilizado para Interagir com o DOM com a Consola.	/devtools-console-dom-interactions/	Interagir com o DOM com a demonstração da Consola
Correção de erros de contraste	Utilizado para Melhorar o contraste nas DevTools do Microsoft Edge: um caso prático de correção de erros.	/devtools-contrast-bugfix/	Testar todos os distintivos no DevTools para demonstração de problemas de contraste
Demonstração da ferramenta Crash Analyzer	Utilizado para Introduzir um rastreio de pilha na ferramenta Analisador de falhas na ferramenta Analisador de falhas.	/devtools-crash-analyzer/	Readme
Exemplos de CSS	Utilizado para Começar a ver e alterar o CSS.	/devtools-css-get-started/	Demonstração de Exemplos de CSS
Exemplos do DOM	Utilizado para Começar a ver e alterar o DOM.	/devtools-dom-get-started/	Demonstração de Exemplos do DOM
Explicar erros e avisos da Consola no Copilot no Edge	Gera erros na Consola que podem ser explicados com o Copilot no Edge.	/devtools-explain-error/	Explicar erros e avisos da Consola no Copilot na demonstração do Edge
Ferramenta Inspecionar	Utilizado para Analisar páginas com a ferramenta Inspecionar.	/devtools-inspect/	Inspecionar demonstração da ferramenta
Inspecionar Grade CSS	Utilizado para Inspecionar Grelha CSS.	/devtools-grid/	Inspecionar demonstração da Grelha CSS
Depurar JavaScript que adiciona dois números	Utilizado para Começar a depurar JavaScript.	/devtools-js-get-started/	Depuração de JavaScript com demonstração de DevTools do Microsoft Edge
Snapshot de área dinâmica para dados de memória	Utilizado para instantâneos de área dinâmica para dados de registos com a ferramenta de Memória (tipo de criação de perfis "Heap snapshot").	/devtools-memory-heap-snapshot/	n/d
Separadores de Atividade da ferramenta de desempenho	Utilizado para ver atividades numa tabela na referência de Funcionalidades de desempenho, sobre os separadores De Baixo para Cima, Árvore de chamadas e Registo de eventos da ferramenta de desempenho.	/devtools-performance-activitytabs/	Demonstração dos Separadores de Atividade
Animação Lenta	Utilizado para Analisar o desempenho do runtime (tutorial).	/devtools-performance-get-started/	Demonstração de Animação Lenta
Eventos de Rastreio postMessage	Testa eventos postMessage de rastreio na Ferramenta de desempenho . Utilizado para Ver mensagens entre janelas, iframes e funções de trabalho dedicadas na Referência de funcionalidades de desempenho.	/devtools-postmessage-perf-linha do tempo/	demonstração de Eventos de Rastreio postMessage
CSS :target pseudo-class	Utilizado para o Suporte para forçar o estado :target CSS em Novidades no DevTools (Microsoft Edge 89).	/devtools-target-pseudo/	CSS : demonstração pseudoclasse de destino
Explorar o universo	Utilizado para métricas Monitor Core Web Vitals na Ferramenta de desempenho: analisar o desempenho do seu site.	/exploring-the-universe/	Explorar a demonstração do universo
Visualizador de Instantâneos de Área Dinâmica para Dados	Utilizado para a extensão de visualização de Instantâneos de Área Dinâmica para Dados para DevTools em Novidades no DevTools (Microsoft Edge 109).	/heap-snapshot-visualizer/	n/d
Dados fictícios JSON	Ficheiros JSON simples. Utilizado para Ver uma resposta de servidor ou ficheiro JSON com formatação.	/json-dummy-data/	Dados fictícios JSON (Readme)
Inspecionar Atividade de Rede	Utilizado para Inspecionar atividade de rede.	/network-tutorial/	Inspecionar demonstração de Atividade de Rede
Referência de ferramentas de rede	Utilizado para referência de Funcionalidades de rede.	/devtools-network-reference/	Demonstração de referência da ferramenta de rede
Galeria de fotografias	Utilizado para Ver os seus dados personalizados no perfil de desempenho em Personalizar perfil de desempenho com APIs de extensibilidade e A verdade sobre o desempenho do seletor CSS.	/photo-gallery/	Demonstração da Galeria de Fotografias
Calendário Lento	Aplicação de demonstração de calendário simples para testar as funcionalidades de DevTools, como a Ferramenta de desempenho e o suporte do mapa de origem. Utilizado para suporte de mapa de origem adicionado na ferramenta Cobertura em Novidades no DevTools (Microsoft Edge 121).	/slow-calendar/	Demonstração do Calendário Lento
Margie's Travel	Demonstra como otimizar os recursos de uma página Web para que esta seja carregada, apresentada e interativa mais rapidamente. Utilizado para Otimizar a velocidade do site com o Lighthouse.	/travel-site/	Demonstração de Viagem da Margie
Espaços de Trabalho	Utilizado para Editar e guardar ficheiros numa área de trabalho (separador Área de Trabalho da ferramenta Origens).	/workspaces/	Demonstração de Áreas de Trabalho de DevTools
Deteção de inatividade	Utilizado para Emular o estado do detetor inativo em Emular sensores de dispositivo.	/idle-detection/	Demonstração de deteção inativa

Alguns destes exemplos são apresentados abaixo.

Demonstração do To Do

Esta página Web de lista de Tarefas simples é utilizada para demonstrar várias funcionalidades de DevTools. Tem um .html ficheiro, um .js ficheiro e .css ficheiros:

• Página composta: Aplicação TODO

• Código fonte: demo-to-do

Página Web de demonstração com problemas de acessibilidade

Esta página Web de demonstração do Abrigo animal é útil para explorar várias funcionalidades de DevTools, incluindo funcionalidades de teste de acessibilidade.

1. Abra a página Web Demonstração com problemas de acessibilidade numa nova janela ou separador.

2. Clique com o botão direito do rato em qualquer parte da página Web composta e, em seguida, selecione Inspecionar. O DevTools é aberto junto à página Web de demonstração.

Artigos

Estes artigos explicam como utilizar esta página Web de demonstração:

• Utilize a ferramenta Inspecionar para detetar problemas de acessibilidade ao pairar o cursor sobre a página Web – um dos vários artigos breves derivados das secções do artigo acima.

• Funcionalidades de teste de acessibilidade – uma lista das funcionalidades de teste de acessibilidade das DevTools, com ligações para vários artigos que utilizam a "página Web de demonstração com problemas de acessibilidade".

Repositório de código fonte

Este é o repositório de código fonte e o respetivo diretório que armazena os ficheiros desta página Web de demonstração:

• MicrosoftEdge/Demos > devtools-a11y-testing - Contém ficheiros que incluem:

  • index.html - A página Web de demonstração, incluindo secções de página e formulários de entrada que enviam dados para o buttons.js ficheiro JavaScript. Para ver a página Web composta, utilize a ligação da página Web de demonstração acima.

  • buttons.js - Contém o código JavaScript que é utilizado pela página Web de demonstração.

  • styles.css, light-theme.csse dark-theme.css - ficheiros CSS que controlam a apresentação da página Web de demonstração.

  • Ficheiros de imagem que são utilizados na página Web de demonstração.

Página Web de demonstração: Depurar JavaScript com DevTools

Esta página Web de demonstração é útil para explorar a ferramenta Origens , especialmente o depurador JavaScript.

1. Abra a página Web de demonstração Introdução à Depuração de JavaScript com DevTools numa nova janela ou separador.

2. Clique com o botão direito do rato em qualquer parte da página Web composta e, em seguida, selecione Inspecionar. O DevTools é aberto junto à página Web de demonstração.

Artigos

Estes artigos ou secções de artigos explicam como utilizar esta página Web de demonstração:

• A abordagem básica para utilizar um depurador na descrição geral da ferramenta Origens. Esta secção de artigo explica-lhe brevemente os passos para utilizar o depurador JavaScript na ferramenta Origens , para encontrar o erro na página Web de demonstração. Para corrigir o erro, converta as cadeias de entrada em números antes de as adicionar.

• Introdução à depuração de JavaScript – instruções mais aprofundadas sobre como utilizar a página Web de demonstração juntamente com o depurador, demonstrar várias funcionalidades do depurador e definir diferentes tipos de pontos de interrupção.

Repositório de código fonte

Este é o repositório de código fonte e o respetivo diretório que armazena os ficheiros desta página Web de demonstração:

• MicrosoftEdge/Demos > devtools-js-get-started - Contém os ficheiros:

  • README.md - Contém ligações para a página Web de demonstração composta e o artigo de tutorial aprofundado sobre como utilizar a página Web de demonstração.

  • index.html - A página Web com um formulário de entrada que envia dados para o ficheiro JavaScript e que apresenta o resultado do JavaScript.

  • get-started.js - O ficheiro JavaScript utilizado pelo formulário na página Web de demonstração.

Clonar o repositório de Demonstrações do Edge para a unidade

O repositório Microsoft Edge/Demos é útil para seguir a documentação de várias DevTools. Pode clonar o repositório, iniciar um servidor Web localhost numa pasta do repositório clonado e, em seguida, editar os ficheiros de demonstração diretamente nas DevTools ou num editor como o VS Code.

A clonagem do repositório é recomendada para transferir o repositório, para que possa solicitar atualizações do repositório e participar totalmente no repositório.

Para clonar o repositório MicrosoftEdge/Demos para a unidade local:

1. Numa linha de comandos, introduza git para marcar se o git está instalado.

2. Se ainda não tiver terminado, transfira o git e instale-o.

3. Aceda a MicrosoftEdge/Demonstrações numa nova janela ou separador.

4. Clique no botão pendente Código e, em seguida, clique no botão Copiar URL para a área de transferência .

   O URL é copiado para a área de transferência: https://github.com/MicrosoftEdge/Demos.git

   Em alternativa, se tiver o GitHub Desktop instalado, clique em Abrir com o GitHub Desktop para clonar o repositório e ignore o passo da linha de comandos abaixo.

5. Abra uma linha de comandos, como o git bash.

6. Clone o repositório para a unidade local, introduzindo a cadeia de URL que copiou do repositório do GitHub. Se utilizar uma linha de comandos:

   # example location where the repo directory will be added:
   cd ~/GitHub
   cd c:/users/localAccount/GitHub/  # alt format
   git clone https://github.com/MicrosoftEdge/Demos.git
   

Para obter detalhes sobre a clonagem de um repositório, consulte:

• Clonar um repositório – documentos do GitHub.

Continue com a secção seguinte.

Clonar o repositório de Demonstrações do Edge para a unidade com o VS Code

Para clonar o repositório MicrosoftEdge/Demos para a unidade local:

1. Aceda a MicrosoftEdge/Demonstrações numa nova janela ou separador.

2. Clique no botão pendente Código e, em seguida, clique em Abrir com o Visual Studio , se for apresentado. É oferecida uma lista de itens do Seletor do Processador , uma por instância do Visual Studio instalada. Esta opção só é apresentada se tiver sessão iniciada.

   

3. No Visual Studio Code, na Barra de Atividade, clique no botão Controlo de Origem ( de Código Fonte) e, em seguida, clique no botão Clonar Repositório.

4. Na caixa de texto Fornecer URL do repositório , cole o URL copiado: https://github.com/MicrosoftEdge/Demos.git e, em seguida, prima Enter. É aberta uma caixa de diálogo de seleção de pastas.

   

5. Navegue para o caminho pretendido, como C:\Users\localAccount\Documents\GitHub ou Users/username/GitHube, em seguida, clique no botão Selecionar Localização do Repositório .

6. É apresentada a mensagem A clonar o repositório git e, em seguida, ser-lhe-á pedido para abrir o repositório clonado. Clique no botão Abrir :

   

7. Se lhe for pedido Confiar..., clique no botão Sim . Em alternativa, clique no botão Não e continue com a maioria destas instruções.

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

Consulte também:

• Clonar um repositório – documentos do GitHub.
• Clone o repositório WebView2Samples em Configurar o ambiente Dev para WebView2.

Ferramentas que suportam a clonagem de um repositório e operações de consolidação/solicitação/push do git

A clonagem de um repositório permite atualizar a cópia local quando o repositório é atualizado. Muitas ferramentas suportam a clonagem e a sincronização com um repositório do GitHub, como:

• comandos git numa linha de comandos, como a shell "git bash". Esta é a principal forma documentada aqui.

• GitHub Desktop. Integra-se bem com repositórios e pedidos Pull do GitHub e com o VS Code.

• Visual Studio Code. Na Barra de Atividade à esquerda, clique em Controlo de Código Fonte.

• Separador Alterações do Git do Visual Studio > junto ao separador Gerenciador de Soluções no canto inferior direito.

• A versão "dot key" do VS Code no browser Edge. No Github.com, ao visualizar um ramo ou um pedido Pull (PR), prima a tecla ponto (.). Na Barra de Atividade à esquerda, clique em:

  • Controlo de Origem
  • Pedidos Pull do GitHub
  • Pedido Pull do GitHub

Transferir o repositório Demos

A clonagem do repositório é recomendada para transferir o repositório, para que possa solicitar atualizações do repositório e participar totalmente no repositório.

Se quiser apenas transferir o repositório Demos em vez de cloná-lo:

1. Numa nova janela ou separador, aceda ao repositório MicrosoftEdge/Demos .

2. Clique no botão pendente Código e, em seguida, clique em Transferir ZIP.

   O .zip ficheiro é colocado no diretório de transferências. Deszipe estes ficheiros de origem da página Web numa localização adequada.

Para transferir um único diretório do repositório Demos:

1. Aceda a https://download-directory.github.io/ e, em seguida, cole o URL https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do.

   O .zip ficheiro é colocado no diretório de transferências. Deszipe estes ficheiros de origem da página Web numa localização adequada.

Consulte também:

• Transfira o repositório WebView2Samples em Configurar o ambiente Dev para WebView2.

Abrir uma pasta de demonstração a partir do separador Área de Trabalho na ferramenta Origens

Para utilizar esta secção, comece por clonar o repositório de Demonstrações do Edge para a sua unidade, acima.

Consulte também:

• Tutorial da área de trabalho (separador Área de Trabalho da ferramenta Origens)
• Abordagens comparadas na extensão DevTools do Microsoft Edge para Visual Studio Code. Resume e compara várias opções para editar ficheiros de página Web.

Depois de clonar (ou transferir) o repositório de Demonstrações do Edge:

1. No Microsoft Edge, abra um novo separador.

2. Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar. Em alternativa, prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS). O DevTools é aberto.

3. Em DevTools, na barra de ferramentas principal, selecione o separador Origens . Se esse separador não estiver visível, clique no botão Mais separadores ().

4. No separador Origens , à esquerda, selecione o separador Área de Trabalho , que está agrupado com o separador Página . Se o separador Área de Trabalho não for apresentado, clique no botão Mais separadores ().

5. Clique em + Adicionar pasta à área de trabalho. É aberta uma caixa de diálogo de seleção de pastas.

6. Selecione uma pasta específica, como demo-to-do, ou selecione a pasta raiz Demonstrações :

   

7. Acima de DevTools, é-lhe pedido "DevTools requests full access to (directory)" (Pedidos de DevTools para (diretório)". Clique no botão Permitir :

   

Iniciar o servidor localhost

Se iniciar o servidor localhost a partir de uma pasta de demonstração específica, como \Demos\demo-to-do, e, em seguida, aceder ( localhost:8080 ou simplesmente abrir o ficheiro local, como C:\Users\localAccount\GitHub\Demos\demo-to-do\index.html no Microsoft Edge), a demonstração específica é imediatamente apresentada no browser. Em seguida, pode adicionar apenas o diretório de demonstração específico, como C:\Users\localAccount\GitHub\Demos\demo-to-do\, ao separador Área de Trabalho da ferramenta Origens . Em seguida, tem todas as funcionalidades para utilizar o DevTools como um IDE, para essa demonstração específica.

Iniciar o servidor a partir de um diretório de demonstração específico:

$ cd ~/GitHub/Demos/demo-to-do
$ npx http-server

Diretório de exemplo a adicionar ao separador Área de Trabalho da ferramenta Origens : C:\Users\localAccount\GitHub\Demos\demo-to-do

Resultado de ir para localhost:8080:

Iniciar o servidor localhost a partir do diretório Demos

Se iniciar o servidor localhost a partir de toda \Demos\ a pasta e, em seguida, aceder a localhost:8080, pode navegar para cada demonstração a partir do browser. Pode adicionar toda a pasta clonada /Demos/ ao separador Área de Trabalho da ferramenta Origens . Em seguida, tem todas as funcionalidades para utilizar o DevTools como um IDE.

Iniciar o servidor a partir de todo \Demos\ o diretório:

$ cd ~/GitHub/Demos
$ cd "C:\Users\localAccount\GitHub\Demos"  # alt syntax
$ npx http-server

Diretório de exemplo a adicionar ao separador Área de Trabalho da ferramenta Origens : C:\Users\localAccount\GitHub\Demos

Resultado de ir para localhost:8080:

Abrir um ficheiro HTML local a partir de Explorador de Arquivos e editá-lo no DevTools

Para editar ficheiros na ferramenta Origens , antes de efetuar os passos nesta secção, poderá ter de clicar no botão Permitir para conceder acesso de leitura/escrita ao seguir os passos em Abrir uma pasta de demonstração a partir do separador Área de Trabalho na ferramenta Origens, acima.

1. No Explorador de Arquivos no Windows ou Finder no macOS, selecione um ficheiro HTML na cópia local do repositório Demos, como C:\Users\localAccount\Documents\GitHub\Demos\demo-to-do\index.html.

   O .html ficheiro é aberto e composto no Microsoft Edge.

   A Barra de endereço é apresentada: Ficheiro | C:/Users/localAccount/GitHub/Demos/demo-to-do/index.html

   Selecionar o URL na Barra de endereço mostra o formato de URL: file:///C:/Users/localAccount/GitHub/Demos/demo-to-do/index.html

2. Clique com o botão direito do rato na página Web composta e, em seguida, selecione Inspecionar.

   O DevTools é aberto.

3. Selecione a ferramenta Origens e, em seguida, selecione o separador Página ou o separador Área de Trabalho .

Consulte também:

• Editar e guardar ficheiros numa área de trabalho (separador Área de Trabalho da ferramenta Origens) para abrir uma pasta local na ferramenta Origens do DevTools no browser.

Abrir um ficheiro HTML local a partir da caixa de diálogo Abrir Ficheiro do browser e editá-lo no DevTools

Para abrir um .html ficheiro e editá-lo:

1. No Microsoft Edge, abra um novo separador e, em seguida, prima Ctrl+O (Windows/Linux) ou Comando+O (macOS). É aberta uma caixa de diálogo de seleção de ficheiros.

2. Selecione um ficheiro HTML na cópia local do repositório Demos , como C:\Users\localAccount\Documents\GitHub\Demos\demo-to-do\index.html. O .html ficheiro é aberto e composto no Microsoft Edge.

3. Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar. Em alternativa, prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS). O DevTools é aberto.

4. Em DevTools, na barra de ferramentas principal, selecione o separador Origens . Se esse separador não estiver visível, clique no botão Mais separadores ().

5. Em DevTools, à esquerda, selecione o separador Página e, em seguida, selecione o ficheiro HTML, como index.html ou (índice).

6. Prima Esc para abrir o painel Vista Rápida na parte inferior de DevTools.

7. Na barra de ferramentas Vista Rápida , clique no botão Mais Ferramentas () e, em seguida, selecione a ferramenta Alterações .

8. No meio, o painel editor da ferramenta Origens , edite o .html ficheiro. Por exemplo, na demo-to-do/index.html pasta, na linha de <h1> cabeçalho, altere As minhas tarefas para As minhas tarefas modificadas:

   <h1>📋 My modified tasks</h1>
   

   Se a edição não estiver ativada, clique no botão Permitir para conceder acesso de leitura/escrita à pasta ao seguir os passos em Abrir uma pasta de demonstração a partir do separador Área de Trabalho na ferramenta Origens acima.

   A alteração é apresentada na ferramenta Alterações no painel Vista Rápida e é adicionado um asterisco ao nome do ficheiro no separador index.html na ferramenta Origens :

   

9. Prima Ctrl+S (Windows, Linux) ou Comando+S (macOS) para guardar a alteração. O asterisco é removido do separadorindex.html na ferramenta Origens .

10. Atualize a página. A alteração é apresentada na página Web composta; por exemplo, a palavra modificada é adicionada ao título:

    

Abrir uma pasta de demonstração no Visual Studio Code

Depois de clonar (ou transferir) o repositório de Demonstrações do Edge:

1. Em Visual Studio Code, na Barra de Atividade, clique no botão Explorer (). O painel Explorer é aberto.

2. No painel Explorer, clique no botão Abrir Pasta. A caixa de diálogo Abrir Pasta é aberta. Navegue para a demo-to-do pasta no repositório Demo que clonou, selecione a pasta ou aceda à mesma e, em seguida, clique no botão Selecionar Pasta :

   

   É apresentado acima um exemplo de uma localização de repositório onde o repositório Demos foi clonado. A demo-to-do pasta do repositório Demos clonado é aberta na Explorer de Visual Studio Code:

   

Em alternativa, pode abrir a pasta raiz do repositório Demos para explorar todas as pastas de demonstração no painel Explorer.

Consulte também:

• Extensão DevTools do Microsoft Edge para Visual Studio Code - para abrir uma pasta local no Visual Studio Code e utilizar DevTools no Visual Studio Code.

Padrões de URL para páginas Web de demonstração compostas e código fonte

A maioria dos ficheiros Readme no repositório Demos tem uma ligação que abre o ficheiro composto .html a partir do servidor GitHub.io. Por vezes, tem um URL para um ficheiro de origem HTML no GitHub.com, mas, em vez disso, tem de derivar o URL do servidor github.io para apresentar o ficheiro composto, em vez de apresentar a listagem de código do .html código fonte no diretório do GitHub.

Para converter do URL do diretório de código fonte em GitHub.com para o URL de uma página Web de demonstração composta em GitHub.io, o padrão é o seguinte.

Suponha que o URL do código fonte da página Web em GitHub.com é:

• https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do/

Os principais componentes desse URL de GitHub.com são:

• https://github.com/[org]/[repo]/tree/main/[path]

Por outro lado, o padrão de URL de GitHub.io pretendido é:

• https://[org].github.io/[repo]/[path]

Para preencher esse padrão de URL GitHub.io, neste exemplo:

• [org] é MicrosoftEdge.
• [repo] é Demos.
• [caminho] é demo-to-do.

Por conseguinte, o URL de servidor GitHub.io resultante para a página Web de demonstração composta é:

• https://MicrosoftEdge.github.io/Demos/demo-to-do/

Estes URLs não são sensíveis a maiúsculas e minúsculas.

Quando executa um servidor localhost e o inicia numa pasta de repositório clonado, como C:\Users\localAccount\GitHub\Demos\workspaces, normalmente vê localhost:8080 na Barra de Endereços do browser.

Consulte também

Abrir e editar ficheiros:

• Editar e guardar ficheiros numa área de trabalho (separador Área de Trabalho da ferramenta Origens) – utilize o DevTools como um Ambiente de Desenvolvimento Integrado (IDE) no browser.
• Adicione uma pasta local à área de trabalho para utilizar o DevTools para editar ficheiros e guardar as alterações ao disco na descrição geral da ferramenta Origens.
• Abordagens comparadas na extensão DevTools do Microsoft Edge para Visual Studio Code. Resume e compara várias opções para editar ficheiros de página Web.
• Integração do IDE do Microsoft Edge – desenvolvimento de aplicações de página Web com Visual Studio Code ou Visual Studio, incluindo DevTools do Microsoft Edge.

A transferir e clonar:

• Passo 5: Clone o repositório Demos em Instalar a extensão DevTools para Visual Studio Code.
• Clonar um repositório – documentos do GitHub.

Executar um servidor Web local:

• Passo 6: configurar um servidor localhost na instalação da extensão DevTools para Visual Studio Code.