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	Diretório de repositório	Página de demonstração em direto
Esquemas de origem do espelhamento CSS	Utilizado para Atualizar .css ficheiros 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 TODO	Aplicação Simple To Do com JavaScript de baunilha. Utilizado para capturas de ecrã na documentação do Microsoft Edge DevTools e para Abrir DevTools e o browser DevTools para a extensão DevTools para o Visual Studio Code.	/demo-to-do/	As minhas tarefas
Elementos desanexados	Demonstração de chat. Utilizado para Depurar fugas de memória DOM com a ferramenta Elementos Desanexados.	/detached-elements/	Simular tráfego
Vista 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 do Microsoft Edge DevTools
Teste de acessibilidade	Utilizado para funcionalidades de teste de acessibilidade.	/devtools-a11y-testing/	Abrigo para animais
Problema de DevTools: 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.	/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)
Interação do DOM a partir da página de demonstração da Consola	Utilizado para Interagir com o DOM com a Consola.	/devtools-console-dom-interactions/	Demonstração de interações do DOM da ferramenta consola DevTools
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 problemas de contraste
Exemplos de CSS	Utilizado para Começar a ver e alterar o CSS.	/devtools-css-get-started/	Exemplos de CSS
Exemplos do DOM	Utilizado para Começar a ver e alterar o DOM.	/devtools-dom-get-started/	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 a demonstração de erros da consola
Ferramenta inspecionar	Utilizado para Analisar páginas com a ferramenta Inspecionar.	/devtools-inspect/	Inspecionar Demonstração
Depurar JavaScript que adiciona dois números	Utilizado para Começar a depurar JavaScript.	/devtools-js-get-started/	Demonstração: Depurar JavaScript com o Microsoft Edge DevTools
Instantâneo da área dinâmica para dados de memória	Utilizado para gravar instantâneos de área dinâmica para dados com a ferramenta Memória.	/devtools-memory-heap-snapshot/	n/d
Separadores Atividade de Desempenho	Utilizado para ver atividades numa tabela, 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 Introdução à Ferramenta de desempenho.	/devtools-performance-get-started/	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-timeline/	demonstração de Eventos de Rastreio postMessage
CSS :target pseudo-class	Utilizado para o Suporte para forçar o estado CSS de destino.	/devtools-target-pseudo/	CSS : demonstração pseudoclasse de destino
Visualizador de Instantâneos de Área Dinâmica para Dados	Código fonte para a extensão DevTools da Visualizador de Instantâneos da Área Dinâmica para Dados.	/heap-snapshot-visualizer/	n/d
Dados fictícios JSON	Ficheiros JSON simples. Utilizado para Ver JSON formatado.	/json-dummy-data/	Dados fictícios JSON
Inspecionar Atividade de Rede	Utilizado para Inspecionar atividade de rede.	/network-tutorial/	Inspecionar Demonstração de Atividade de Rede
Galeria de fotografias	Utilizado para a verdade sobre o desempenho do seletor CSS.	/photo-gallery/	Galeria de Fotografias
Calendário Lento	Aplicação de demonstração de calendário simples para testar várias funcionalidades de DevTools, como a ferramenta Desempenho e o suporte de mapa de origem.	/slow-calendar/	Calendário Lento
Espaços de trabalho	Utilize para Editar ficheiros com Áreas de Trabalho (separador Sistema de Ficheiros) na ferramenta Origens .	/workspaces/	Demonstração de Áreas de Trabalho de DevTools

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.

Transferir ou clonar o repositório Demos

O repositório Demos é útil para seguir a documentação de várias DevTools.

Transferir o repositório Demos

Para transferir o repositório Demos:

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.

Veja também:

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

Clonar o repositório Demos

A clonagem de um repositório permite atualizar a cópia local quando o repositório é atualizado. A IU do GitHub e várias ferramentas suportam a clonagem. Iremos mostrar a clonagem com o Visual Studio Code, mas pode utilizar muitas outras ferramentas de codificação, como o GitHub Desktop, o Visual Studio ou a shell do git bash.

Para clonar o repositório:

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

2. Se o botão verde Código não for apresentado, clique em Demonstrações no caminhoDemonstrações do Microsoft Edge / no canto superior esquerdo para aceder à página principal do repositório.

3. Clique no botão pendente Código e, em seguida, clique no botão Copiar junto ao URL https://github.com/MicrosoftEdge/Demos.git. Em seguida, pode colar o URL no git bash ou numa caixa de diálogo do Visual Studio Code, por exemplo.

   Em alternativa, 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.

   

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

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

   

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

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

   

8. 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 do Explorador lista muitas demonstrações, incluindo demonstração de tarefas.

Veja também:

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

Abrir uma pasta de demonstração na ferramenta Origens e editar um ficheiro

Para utilizar esta secção, primeiro Transfira ou clone o repositório Demos.

Para editar ficheiros locais na ferramenta Origens , poderá ter de clicar primeiro no botão Permitir para conceder acesso de leitura/escrita. Para tal, siga os passos em Abrir uma pasta no separador Sistema de Ficheiros (Área de Trabalho) na ferramenta Origens abaixo.

Veja também:

• Abordagens comparadas na extensão DevTools do Microsoft Edge para o Visual Studio Code. Resume e compara várias opções para editar ficheiros de página Web.

Abrir uma pasta a partir do separador Sistema de Ficheiros (Área de Trabalho) na ferramenta Origens

Depois de transferir ou clonar o repositório Demos:

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 Sistema de Ficheiros , que está agrupado com o separador Página . Se o separador Sistema de Ficheiros 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 :

   

Para editar os ficheiros, veja os passos de edição na secção seguinte.

Veja também:

• Editar ficheiros com Áreas de Trabalho (separador Sistema de Ficheiros) – para abrir uma pasta local na ferramenta Origens de DevTools no browser.
• Utilizar o separador Sistema de Ficheiros para definir uma Área de Trabalho local na descrição geral da ferramenta Origens.

Abrir um ficheiro HTML local a partir da caixa de diálogo Abrir Ficheiro do browser e editá-lo a partir do separador Página da ferramenta Origens

Para editar ficheiros na ferramenta Origens , antes de seguir 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 a partir do separador Sistema de Ficheiros (Área de Trabalho) na ferramenta Origens acima.

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\username\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 efetuar os passos em Abrir uma pasta a partir do separador Sistema de Ficheiros (Á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 um ficheiro HTML local a partir do Explorador de Ficheiros e editá-lo no browser

1. No Explorador de Ficheiros no Windows ou no Finder no macOS, selecione um ficheiro HTML na cópia local do repositório Demos , como C:\Users\username\Documents\GitHub\Demos\demo-to-do\index.html. O .html ficheiro é aberto e composto no Microsoft Edge.

2. Siga os passos nas secções acima.

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

Depois de transferir ou clonar o repositório Demos:

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

2. No painel Explorador , 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 no Explorador do Visual Studio Code:

   

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

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

Confira também

Abrir e editar ficheiros:

• Editar ficheiros com Áreas de Trabalho (separador Sistema de Ficheiros) – para abrir uma pasta local na ferramenta Origens de DevTools no browser.
• Utilizar o separador Sistema de Ficheiros para definir uma Área de Trabalho local na descrição geral da ferramenta Origens.
• Abordagens comparadas na extensão DevTools do Microsoft Edge para o 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 o Visual Studio Code ou o Visual Studio, incluindo o Microsoft Edge DevTools.

A transferir e clonar:

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

Executar um servidor Web local:

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