Código de exemplo para DevTools

Use o repositório Demos para saber como usar o Microsoft Edge para desenvolver páginas da Web e aplicativos Web. Há várias maneiras de exibir, baixar e modificar essas páginas da Web de demonstração, incluindo:

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

Para exibir o código-fonte de uma página da Web de demonstração renderizada no DevTools no Microsoft Edge:

1. Em uma página Leiame, clique no link Demonstração . A página ativa é aberta no Microsoft Edge.

2. Clique com o botão direito do mouse na página da Web de demonstração e selecione Inspecionar para abrir o DevTools.

Lista de amostras do DevTools

Confira:

• Microsoft Edge DevTools no Leiame do repositório "MicrosoftEdge / Demos".

Alguns dos exemplos são mostrados abaixo.

Demonstração do To Do

Esta página da Web simples da lista de tarefas pendentes é usada para demonstrar vários recursos do DevTools. Ele tem um .html arquivo, um .js arquivo e .css arquivos:

• Página renderizada: aplicativo TODO

• Código-fonte: demo-to-do

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

Esta página da Web de demonstração do Animal Shelter é útil para explorar vários recursos do DevTools, incluindo recursos de teste de acessibilidade.

1. Abra a página da Web de demonstração com problemas de acessibilidade em uma nova janela ou guia.

2. Clique com o botão direito do mouse em qualquer lugar da página da Web renderizada e selecione Inspecionar. O DevTools é aberto ao lado da página da Web de demonstração.

Artigos

Estes artigos orientam você a usar esta página da Web de demonstração:

• Use a ferramenta Inspecionar para detectar problemas de acessibilidade passando o mouse sobre a página da Web - Um dos vários artigos curtos derivados de seções do artigo acima.

• Recursos de teste de acessibilidade – uma lista de recursos de teste de acessibilidade do DevTools, com links para vários artigos que usam a "página da Web de demonstração com problemas de acessibilidade".

Repositório de código-fonte

Este é o repositório de código-fonte e seu diretório que armazena os arquivos para esta página da Web de demonstração:

• MicrosoftEdge / Demos > devtools-a11y-testing - Contém arquivos incluindo:

  • index.html - A página da Web de demonstração, incluindo seções de página e formulários de entrada que enviam dados para o buttons.js arquivo JavaScript. Para exibir a página da web renderizada, use o link da página de demonstração acima.

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

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

  • Arquivos de imagem que são usados na página da Web de demonstração.

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

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

1. Abra a página da Web de demonstração Introdução à depuração do JavaScript com o DevTools em uma nova janela ou guia.

2. Clique com o botão direito do mouse em qualquer lugar da página da Web renderizada e selecione Inspecionar. O DevTools é aberto ao lado da página da Web de demonstração.

Artigos

Estes artigos ou seções de artigos orientam você a usar esta página da Web de demonstração:

• A abordagem básica para usar um depurador na visão geral da ferramenta Fontes. Esta seção do artigo orienta você brevemente pelas etapas para usar o depurador JavaScript na ferramenta Fontes , para encontrar o bug na página da Web de demonstração. Para corrigir o bug, converta as cadeias de caracteres de entrada em números antes de adicioná-las.

• Introdução à depuração do JavaScript – um passo a passo mais detalhado sobre como usar a página da Web de demonstração junto com o depurador, demonstrar vários recursos 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 seu diretório que armazena os arquivos para esta página da Web de demonstração:

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

  • README.md - Contém links para a página da Web de demonstração renderizada e o artigo tutorial detalhado sobre como usar a página da Web de demonstração.

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

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

Clone o repositório "MicrosoftEdge / Demos" para sua unidade

O repositório Microsoft Edge / Demos é útil para seguir as várias documentações do DevTools. Você pode clonar o repositório, iniciar um servidor Web localhost dentro de uma pasta do repositório clonado e, em seguida, editar os arquivos de demonstração diretamente no DevTools ou em um editor como o VS Code.

É recomendável clonar o repositório em vez de baixar o repositório, para que você possa obter atualizações do repositório e participar totalmente do repositório.

Para clonar o repositório MicrosoftEdge / Demos em sua unidade local:

1. Em um prompt de comando, insira git para marcar se o git está instalado.

2. Se ainda não tiver feito isso, baixe o git e instale-o.

3. Acesse o repositório MicrosoftEdge / Demos em uma nova janela ou guia.

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

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

   Ou, se você tiver o GitHub Desktop instalado, clique em Abrir com GitHub Desktop para clonar o repositório e ignore a etapa do prompt de comando abaixo.

5. Abra um prompt de comando, como git bash.

6. Clone o repositório em sua unidade local, inserindo a cadeia de caracteres da URL que você copiou do repositório do GitHub. Se você usar um prompt de comando:

   # 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 como clonar um repositório, consulte:

• Clonar um repositório – GitHub docs.

Continue com a próxima seção.

Clonar o repositório "MicrosoftEdge / Demos" para sua unidade usando o VS Code

Para clonar o repositório MicrosoftEdge / Demos em sua unidade local:

1. Acesse o repositório MicrosoftEdge / Demos em uma nova janela ou guia.

2. Clique no botão suspenso Código e, em seguida, clique em Abrir com o Visual Studio , se ele for exibido. Uma lista de itens do Seletor de Manipulador é oferecida, um por instância do Visual Studio instalada. Essa opção será exibida somente se você estiver logado.

   

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

4. 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.

   

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

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

   

7. 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.

Consulte também:

• Clonar um repositório – GitHub docs.
• Clone o repositório WebView2Samples em Configurar seu ambiente de Desenvolvimento para WebView2.

Ferramentas que dão suporte à clonagem de um repositório e operações de confirmação/pull/push do git

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

• comandos do git em um prompt de comando, como o shell "git bash". Esta é a principal forma documentada aqui.

• GitHub Desktop. Integra-se bem com repositórios e solicitações de pull do GitHub e com o VS Code.

• Visual Studio Code. Na Barra de Atividades à esquerda, clique em Controle do Código-Fonte.

• Guia Alterações do Git do Visual Studio > ao lado da guia Gerenciador de Soluções no canto inferior direito.

• A versão "dot key" do VS Code no navegador Edge. Ao Github.com, ao exibir uma ramificação ou uma solicitação de pull (PR), pressione a tecla ponto (.). Na Barra de Atividades à esquerda, clique:

  • Controle do código-fonte
  • GitHub Pull Requests
  • GitHub Pull Request

Baixar o repositório Demos

É recomendável clonar o repositório em vez de baixar o repositório, para que você possa obter atualizações do repositório e participar totalmente do repositório.

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

1. Em uma nova janela ou guia, vá para o repositório MicrosoftEdge/Demonstrações .

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

   O .zip arquivo é colocado no diretório de download. Descompacte esses arquivos de origem da página da Web em um local adequado.

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

1. 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.

Consulte também:

• Baixe o repositório WebView2Samples em Configurar seu ambiente de Desenvolvimento para WebView2.

Abra uma pasta de demonstração na guia Espaço de trabalho na ferramenta Fontes

Para usar esta seção, primeiro siga as etapas em Clonar o repositório "MicrosoftEdge / Demos" para sua unidade, acima.

Consulte também:

• Tutorial do workspace (ferramenta Fontes, guia Workspace)
• Abordagens comparadas no Microsoft Edge Extensão DevTools para Visual Studio Code. Resume e compara várias opções para edição de arquivos de página da Web.

Após a clonagem (ou download) do repositório de demonstrações do Edge:

1. No Microsoft Edge, abra uma nova guia.

2. Clique com o botão direito do mouse na página da Web e selecione Inspecionar. Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS). O DevTools é aberto.

3. No DevTools, na barra de ferramentas principal, selecione a guia Fontes . Se essa guia não estiver visível, clique no botão Mais guias ().

4. Na guia Fontes , à esquerda, selecione a guia Workspace , que está agrupada com a guia Página . Se a guia Espaço de Trabalho não for exibida, clique no botão Mais guias ().

5. Clique em + Adicionar pasta ao workspace. Uma caixa de diálogo de seleção de pasta é aberta.

6. Selecione uma pasta específica, como demo-to-do, ou selecione a pasta raiz Demos :

   

7. Acima do DevTools, você é solicitado: "O DevTools solicita acesso total ao (diretório)". Clique no botão Permitir :

   

Iniciar o servidor localhost

Se você iniciar o servidor localhost a partir de uma pasta de demonstração específica, como \Demos\demo-to-do, e depois acessar localhost:8080 (ou simplesmente abrir o arquivo local, como C:\Users\localAccount\GitHub\Demos\demo-to-do\index.html no Microsoft Edge), a demonstração específica será exibida imediatamente no navegador. Em seguida, você pode adicionar apenas o diretório de demonstração específico, como C:\Users\localAccount\GitHub\Demos\demo-to-do\, à guia Workspace da ferramenta Sources . Em seguida, você terá funcionalidade completa para usar o DevTools como um IDE, para essa demonstração específica.

Iniciando o servidor de dentro de um diretório de demonstração específico:

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

Exemplo de diretório a ser adicionado à guia Espaço de trabalho da ferramenta Fontes : C:\Users\localAccount\GitHub\Demos\demo-to-do

Resultado de ir para localhost:8080:

Iniciando o servidor localhost a partir do diretório Demos

Se você iniciar o servidor localhost de dentro de toda \Demos\ a pasta e, em seguida, acessar localhost:8080o , poderá navegar até cada demonstração de dentro do navegador. Você pode adicionar toda a pasta clonada /Demos/ à guia Workspace da ferramenta Sources . Em seguida, você terá funcionalidade completa para usar o DevTools como um IDE.

Iniciando o servidor de dentro de todo \Demos\ o diretório:

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

Exemplo de diretório a ser adicionado à guia Espaço de trabalho da ferramenta Fontes : C:\Users\localAccount\GitHub\Demos

Resultado de ir para localhost:8080:

Abrindo um arquivo HTML local no Explorador de Arquivos e editando-o no DevTools

Para editar arquivos na ferramenta Fontes , antes de executar as etapas desta seção, talvez seja necessário clicar no botão Permitir para conceder acesso de leitura/gravação seguindo as etapas em Abrir uma pasta de demonstração na guia Espaço de trabalho na ferramenta Fontes, acima.

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

   O .html arquivo é aberto e renderizado no Microsoft Edge.

   A barra de endereços exibe: Arquivo | C:/Users/localAccount/GitHub/Demos/demo-to-do/index.html

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

2. Clique com o botão direito do mouse na página da Web renderizada e selecione Inspecionar.

   O DevTools é aberto.

3. Selecione a ferramenta Fontes e, em seguida, selecione a guia Página ou a guia Espaço de trabalho .

Consulte também:

• Editar e salvar arquivos em um espaço de trabalho (guia Espaço de Trabalho da ferramenta Fontes) - para abrir uma pasta local na ferramenta Fontes do DevTools no navegador.

Abrindo um arquivo HTML local da caixa de diálogo Abrir arquivo do navegador e editando-o no DevTools

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

1. No Microsoft Edge, abra uma nova guia e pressione Ctrl+O (Windows/Linux) ou Command+O (macOS). Uma caixa de diálogo de seleção de arquivo é aberta.

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

3. Clique com o botão direito do mouse na página da Web e selecione Inspecionar. Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS). O DevTools é aberto.

4. No DevTools, na barra de ferramentas principal, selecione a guia Fontes . Se essa guia não estiver visível, clique no botão Mais guias ().

5. No DevTools, à esquerda, selecione a guia Página e, em seguida, selecione o arquivo HTML, como index.html ou (índice).

6. Pressione Esc para abrir o painel Visualização Rápida na parte inferior do DevTools.

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

8. No meio do painel editor da ferramenta Fontes , edite o .html arquivo. Por exemplo, na demo-to-do/index.html pasta, na linha de <h1> título, altere Minhas tarefas para Minhas tarefas modificadas:

   <h1>📋 My modified tasks</h1>
   

   Se a edição não estiver habilitada, clique no botão Permitir para conceder acesso de leitura/gravação à pasta seguindo as etapas em Abra uma pasta de demonstração na guia Espaço de trabalho na ferramenta Fontes acima.

   A alteração é exibida na ferramenta Alterações no painel Visualização rápida e um asterisco é adicionado ao nome do arquivo na guia index.html na ferramenta Fontes :

   

9. Pressione Ctrl+S (Windows, Linux) ou Command+S (macOS) para salvar a alteração. O asterisco é removido da guia index.html na ferramenta Fontes .

10. Atualize a página. A alteração é exibida na página da Web renderizada; Por exemplo, a palavra modified é adicionada ao título:

    

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

Após a clonagem (ou download) do repositório de demonstrações do Edge:

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

2. No painel do Explorer, 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 :

   

   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:

   

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

Consulte também:

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

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

A maioria dos arquivos Leiame no repositório Demos tem um link que abre o arquivo renderizado .html do servidor GitHub.io. Às vezes, você tem uma URL para um arquivo de código-fonte HTML em GitHub.com, mas, em vez disso, precisa derivar a URL do servidor github.io para exibir o arquivo renderizado, em vez de exibir a listagem de código do .html código-fonte no diretório do GitHub.

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

Suponha que a URL do código-fonte da página da Web em GitHub.com seja:

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

Os principais componentes dessa URL GitHub.com são:

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

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

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

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

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

Portanto, a URL do servidor de GitHub.io resultante para a página da Web de demonstração renderizada é:

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

Essas URLs não diferenciam maiúsculas de minúsculas.

Ao executar um servidor localhost e iniciá-lo em uma pasta de repositório clonada, como C:\Users\localAccount\GitHub\Demos\workspaces, você normalmente vê localhost:8080 na barra de endereços do navegador.

Consulte também

Abrindo e editando arquivos:

• Editar e salvar arquivos em um espaço de trabalho (ferramenta Fontes, guia Espaço de trabalho) - Use o DevTools como um IDE (Ambiente de Desenvolvimento Integrado) no navegador.
• Adicione uma pasta local ao workspace para usar o DevTools para editar arquivos e salvar alterações em disco na visão geral da ferramenta Fontes.
• Abordagens comparadas no Microsoft Edge Extensão DevTools para Visual Studio Code. Resume e compara várias opções para edição de arquivos de página da Web.
• Integração com Microsoft Edge IDE - Desenvolvimento de aplicativo de página da Web usando o Visual Studio Code ou o Visual Studio, incluindo o Microsoft Edge DevTools.

Download e clonagem:

• Etapa 5: clone o repositório Demos em Instalando a extensão DevTools para Visual Studio Code.
• Clonar um repositório – GitHub docs.

Executando um servidor Web local:

• Etapa 6: configurar um servidor localhost em Instalando a extensão DevTools para Visual Studio Code.