Código de exemplo para DevTools

  • Artigo

Use o repositório Demos para aprender a 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 opcionais.
  • 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 readme, clique no link Demonstração . A página ao vivo é 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 exemplos de DevTools

As demonstrações a seguir demonstram recursos de DevTools.

Nome da demonstração Descrição Diretório de repositório Página de demonstração ao vivo
Guias de origem de espelhamento do CSS Usado para atualizar arquivos .css de dentro da guia Estilos (edição de espelho CSS) para a extensão DevTools para Visual Studio Code. /css-mirroring-sourcemaps-demo/ n/d
Aplicativo TODO Aplicativo Simple To Do com JavaScript de baunilha. Usado para capturas de tela na documentação do Microsoft Edge DevTools e para Abrir DevTools e o navegador DevTools para a extensão DevTools para Visual Studio Code. /demo-to-do/ Minhas tarefas
Elementos desapegados Demonstração semelhante a um chat. Usado para depurar vazamentos de memória DOM com a ferramenta Elementos Desapegados. /desanexar elementos/ Simular tráfego
Exibição 3D Usado para navegar em camadas de página da Web, z-index e DOM usando a ferramenta Modo de Exibição 3D. /devtools-3d/ Demonstração de ferramenta do Microsoft Edge DevTools 3D View
Teste de acessibilidade Usado para recursos de teste de acessibilidade. /devtools-a11y-testing/ Abrigo de animais
Problema de DevTools: animar uma propriedade CSS que requer layout Ilustra o aviso de ferramentas De problemas e elementos quando as propriedades CSS que exigem layout são animadas. /devtools-animated-property-issue/ Demonstração de propriedade CSS animada
Páginas de demonstração do painel de console Usado para visão geral do console, mensagens de log na ferramenta Console e corrigir erros javaScript relatados no Console. /devtools-console/ Páginas de demonstração do painel do Console de DevTools
Interação do DOM da página de demonstração do Console Usado para interagir com o DOM usando o Console. /devtools-console-dom-interactions/ Demonstração de interações do DOM da ferramenta DevTools Console
Correção de bug de contraste Usado para melhorar o contraste no Microsoft Edge DevTools: um estudo de caso de bugfix. /devtools-contrast-bugfix/ Testar todos os selos em DevTools para problemas de contraste
Exemplos de CSS Usado para Introdução à exibição e alteração do CSS. /devtools-css-get-started/ Exemplos de CSS
Exemplos do DOM Usado para Começar a exibir e alterar o DOM. /devtools-dom-get-started/ Exemplos do DOM
Explicar erros e avisos do Console no Copilot no Edge Gera erros no Console que podem ser explicados usando Copilot no Edge. /devtools-explain-error/ Explicando a demonstração de erros do console
Inspecionar ferramenta Usado para analisar páginas usando a ferramenta Inspecionar. /devtools-inspect/ Inspecionar Demonstração
Depurando JavaScript que adiciona dois números Usado para Começar a depurar JavaScript. /devtools-js-get-started/ Demonstração: Depurando JavaScript com o Microsoft Edge DevTools
Instantâneo de heap de memória Usado para registrar instantâneos de heap usando a ferramenta Memória. /devtools-memory-heap-instantâneo/ n/d
Guias de atividade de desempenho Usado para exibir atividades em uma tabela, sobre as guias Bottom-Up, Call Tree e Log de Eventos da ferramenta de desempenho. /devtools-performance-activitytabs/ Demonstração de Guias de Atividade
Animação lenta Usado para Introdução à ferramenta Desempenho. /devtools-performance-get-started/ Animação lenta
eventos de rastreamento postMessage Testa eventos de postMessage rastreamento na ferramenta Desempenho . Usado para exibir mensagens entre janelas, iframes e trabalhos dedicados na referência de recursos de desempenho. /devtools-postmessage-perf-linha do tempo/ demonstração de eventos de rastreamento postMessage
Classe pseudo-destino do CSS :target Usado para suporte forçando o estado :target CSS. /devtools-target-pseudo/ Demonstração de classe pseudo-destino do CSS :target
Visualizador de instantâneo heap Código-fonte para a extensão de Visualizador de Instantâneo do Heap para DevTools. /heap-instantâneo-visualizer/ n/d
Dados fictícios JSON Arquivos JSON simples. Usado para Exibir JSON formatado. /json-dummy-data/ Dados fictícios JSON
Inspecionar atividade de rede Usado para inspecionar a atividade de rede. /network-tutorial/ Inspecionar demonstração de atividade de rede
Galeria Usado para a verdade sobre o desempenho do seletor do CSS. /photo-gallery/ Galeria
Calendário Lento Aplicativo de demonstração de calendário simples para testar vários recursos do DevTools, como a ferramenta Desempenho e o suporte ao mapa de origem. /slow-calendar/ Calendário Lento
Espaços de trabalho Use para Editar arquivos com Workspaces (guia Filesystem), na ferramenta Fontes . /Espaços/ Demonstração de Workspaces de DevTools

Alguns desses exemplos são mostrados abaixo.

Para Fazer demonstração

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

Para Fazer demonstração e DevTools com a ferramenta Fontes selecionada

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 na página da Web renderizada e selecione Inspecionar. O DevTools é aberto ao lado da página da Web de demonstração.

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

Artigos

Estes artigos orientam você usando esta página da Web de demonstraçã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-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 de página da Web 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

Essa 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 DevTools em uma nova janela ou guia.

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

A página da Web de demonstração 'Introdução à Depuração do JavaScript com DevTools'

Artigos

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

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

  • Introdução à depuração do JavaScript – Um passo a passo mais aprofundado do uso da página da Web de demonstração junto com o depurador, demonstrando vários recursos do depurador e definindo 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 detalhado do tutorial 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.

Baixar ou clonar o repositório Demos

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

Baixar o repositório Demos

Para baixar o repositório Demos:

  1. Em uma nova janela ou guia, acesse o repositório MicrosoftEdge/Demos .

  2. Clique no botão suspenso Código e 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.

Veja também:

Clonar o repositório Demos

A clonagem de um repositório permite atualizar sua cópia local quando o repositório é atualizado. A interface do usuário do GitHub e várias ferramentas dão suporte à clonagem. Mostraremos a clonagem usando Visual Studio Code, mas você pode usar muitas outras ferramentas de codificação, como GitHub Desktop, Visual Studio ou git bash shell.

Para clonar o repositório:

  1. Em uma nova janela ou guia, acesse o repositório MicrosoftEdge/Demos .

  2. Se o botão código verde não for mostrado, clique em Demos no caminho Microsoft Edge / Demos no canto superior esquerdo para acessar a página main do repositório.

  3. Clique no botão suspenso Código e clique no botão Copiar ao lado da URL https://github.com/MicrosoftEdge/Demos.git. Em seguida, você pode colar a URL em git bash ou uma caixa de diálogo Visual Studio Code, por exemplo.

    Ou clique no botão suspenso Código e clique em Abrir com o Visual Studio se ele aparecer. Uma lista de itens do Seletor do Manipulador é oferecida, uma por instância do Visual Studio instalada. Essa opção será exibida somente se você estiver conectado.

    Clonando o repositório MicrosoftEdge/Demos

  4. Em Visual Studio Code, na Barra de Atividades, clique no botão Controle de Origem (ícone controle de origem) e clique no botão Clonar Repositório.

  5. Na caixa de texto Fornecer URL do repositório , cole a URL copiada: https://github.com/MicrosoftEdge/Demos.git e pressione Enter. Uma caixa de diálogo de seleção de pasta é aberta.

    O botão Clonar Repositório no Visual Studio Code

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

  7. A mensagem Clonando o repositório git é exibida e você será solicitado a abrir o repositório clonado. Clique no botão Abrir :

    Solicitado a abrir o repositório clonado

  8. Se solicitado , confie..., clique no botão Sim . Ou clique no botão Não e continue com a maioria das partes deste passo a passo.

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

Veja também:

Abra uma pasta de demonstração na ferramenta Fontes e edite um arquivo

Para usar esta seção, primeiro Baixe ou clone o repositório Demos.

Para editar arquivos locais na ferramenta Fontes , talvez seja necessário primeiro clicar no botão Permitir para conceder acesso de leitura/gravação. Para fazer isso, siga as etapas em Abrir uma pasta na guia Sistema de Arquivos (Workspace) na ferramenta Fontes abaixo.

Veja também:

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

Abrir uma pasta da guia Sistema de Arquivos (Workspace) na ferramenta Fontes

Depois de baixar ou clonar o repositório Demos:

  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). DevTools é aberto.

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

  4. Na guia Fontes , à esquerda, selecione a guia Sistema de Arquivos , agrupada com a guia Página . Se a guia Sistema de Arquivos não for exibida, clique no botão Mais guias (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 demonstração a fazer, ou selecione a pasta raiz Demos :

    Selecionando o diretório de demonstração a fazer

  7. Acima de DevTools, você recebe a solicitação "DevTools solicita acesso total ao (diretório)". Clique no botão Permitir :

    DevTools solicita acesso para adicionar uma pasta a um workspace na guia Sistema de Arquivos

Para editar os arquivos, confira as etapas de edição na próxima seção.

Veja também:

Abrir um arquivo HTML local da caixa de diálogo Abrir Arquivos do navegador e editá-lo na guia Página da ferramenta Fontes

Para editar arquivos na ferramenta Fontes , antes de fazer as etapas nesta 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 da guia Sistema de Arquivos (Workspace) na ferramenta Fontes acima.

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 na cópia local do repositório Demos , como C:\Users\username\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). DevTools é aberto.

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

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

  6. Pressione Esc para abrir a Gaveta na parte inferior do DevTools.

  7. Na Gaveta, clique no botão Mais Ferramentas (ícone Mais Ferramentas) e selecione a ferramenta Alterações .

  8. No meio, painel do 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 fazendo as etapas em Abrir uma pasta na guia Sistema de Arquivos (Workspace) na ferramenta Fontes acima.

    A alteração é exibida na ferramenta Alterações na Gaveta e um asterisco é adicionado ao nome do arquivo na guia index.html na ferramenta Fontes :

    A página de demonstração a fazer modificada antes de salvar alterações

  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 modificada é adicionada ao título:

    A página de demonstração a fazer modificada após salvar alterações e atualizar

Abrir um arquivo HTML local de Explorador de Arquivos e editá-lo no navegador

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

  2. Siga as etapas nas seções acima.

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

Depois de baixar ou clonar o repositório Demos:

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

  2. No painel 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 Demo que você clonou, selecione a pasta ou vá para ela e clique no botão Selecionar Pasta :

    Selecionando a pasta demonstração a fazer

    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 de Visual Studio Code:

    Abriu inicialmente a pasta demonstração a fazer

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

Veja também:

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

A maioria dos arquivos Readme 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 origem HTML no 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 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]

Em contraste, o padrão de URL de GitHub.io desejado é:

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

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

  • [org] é MicrosoftEdge.
  • [repositório] é Demos.
  • [caminho] é demo-to-do.

Portanto, a URL do servidor 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 são sensíveis a casos.

Confira também

Abrir e editar arquivos:

Download e clonagem:

Executando um servidor Web local: