Código de exemplo para DevTools
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:
Em uma página readme, clique no link Demonstração . A página ao vivo é aberta no Microsoft Edge.
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.
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:
Página renderizada: aplicativo TODO
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.
Abra a página da Web de demonstração com problemas de acessibilidade em uma nova janela ou guia.
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.
Artigos
Estes artigos orientam você usando esta página da Web de demonstração:
Use a ferramenta Inspecionar para detectar problemas de acessibilidade pairando 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 obuttons.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.css
edark-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.
Abra a página da Web de demonstração Introdução à depuração do JavaScript com DevTools em uma nova janela ou guia.
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.
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:
Em uma nova janela ou guia, acesse o repositório MicrosoftEdge/Demos .
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:
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:
- Baixe o repositório WebView2Samples em Configurar seu ambiente de desenvolvimento para WebView2.
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:
Em uma nova janela ou guia, acesse o repositório MicrosoftEdge/Demos .
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.
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.
Em Visual Studio Code, na Barra de Atividades, clique no botão Controle de Origem (
) e clique no botão Clonar Repositório.
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.
Navegue até o caminho desejado, como
C:\Users\username\Documents\GitHub
ouUsers/username/GitHub
, e clique no botão Selecionar Local do Repositório .A mensagem Clonando o repositório git é exibida e você será solicitado a abrir o repositório clonado. Clique no botão Abrir :
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:
- Clonando um repositório – documentos do GitHub.
- Clone o repositório WebView2Samples em Configurar seu ambiente de desenvolvimento para WebView2.
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:
No Microsoft Edge, abra uma nova guia.
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.
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 (
).
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 (
).
Clique em + Adicionar pasta ao workspace. Uma caixa de diálogo de seleção de pasta é aberta.
Selecione uma pasta específica, como demonstração a fazer, ou selecione a pasta raiz Demos :
Acima de DevTools, você recebe a solicitação "DevTools solicita acesso total ao (diretório)". Clique no botão Permitir :
Para editar os arquivos, confira as etapas de edição na próxima seção.
Veja também:
- Editar arquivos com Workspaces (guia Filesystem) – para abrir uma pasta local na ferramenta Fontes do DevTools no navegador.
- Usando a guia Sistema de Arquivos para definir um Workspace local na visão geral da ferramenta Fontes.
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:
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.
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.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.
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 (
).
Em DevTools, à esquerda, selecione a guia Página e selecione o arquivo HTML, como
index.html
ou (índice).Pressione Esc para abrir a Gaveta na parte inferior do DevTools.
Na Gaveta, clique no botão Mais Ferramentas (
) e selecione a ferramenta Alterações .
No meio, painel do editor da ferramenta Fontes , edite o
.html
arquivo. Por exemplo, nademo-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 :
Pressione Ctrl+S (Windows, Linux) ou Command+S (macOS) para salvar a alteração. O asterisco é removido da guia index.html na ferramenta Fontes .
Atualize a página. A alteração é exibida na página da Web renderizada; por exemplo, a palavra modificada é adicionada ao título:
Abrir um arquivo HTML local de Explorador de Arquivos e editá-lo no navegador
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.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:
Em Visual Studio Code, na Barra de Atividades, clique no botão Explorer (
). O painel Explorer é aberto.
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 :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:
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:
- Extensão DevTools do Microsoft Edge para Visual Studio Code - para abrir uma pasta local no Visual Studio Code e usar 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 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:
- Editar arquivos com Workspaces (guia Filesystem) – para abrir uma pasta local na ferramenta Fontes do DevTools no navegador.
- Usando a guia Sistema de Arquivos para definir um Workspace local na visão geral da ferramenta Fontes.
- 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.
- Integração do Microsoft Edge IDE – desenvolvimento de aplicativos de página da Web usando Visual Studio Code ou Visual Studio, incluindo o Microsoft Edge DevTools.
Download e clonagem:
- Etapa 5: Clonar o repositório Demos na instalação da extensão DevTools para Visual Studio Code.
- Clonando um repositório – documentos do GitHub.
Executando um servidor Web local:
- Etapa 6: configurar um servidor localhost na instalação da extensão DevTools para Visual Studio Code.