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

Confira:

Alguns dos 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:

To Do demo and DevTools with the Sources tool selected

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.

A

Artigos

Estes artigos explicam como utilizar esta página Web de demonstraçã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-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.

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

Clone o repositório "MicrosoftEdge/Demos" 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 ao repositório MicrosoftEdge/Demos 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:

Continue com a secção seguinte.

Clone o repositório "MicrosoftEdge/Demos" para a unidade com o VS Code

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

  1. Aceda ao repositório MicrosoftEdge/Demos 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.

    Clonar o repositório MicrosoftEdge/Demos

  3. No Visual Studio Code, na Barra de Atividade, clique no botão Controlo de Origem (ícone de Controlo 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.

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

  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 :

    Pedido para abrir o repositório clonado

  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:

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:

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

Para utilizar esta secção, comece por seguir os passos em Clonar o repositório "MicrosoftEdge/Demos" para a sua unidade, acima.

Consulte também:

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 (ícone 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 (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 :

    Selecionar o diretório de demonstração de tarefas

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

    DevTools pede acesso para adicionar uma pasta à Área de Trabalho

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:

Servidor iniciado a partir do diretório \Demos\demo-to-do

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:

O servidor foi iniciado a partir do diretório /demos/ em vez de um subdiretório de demonstração específico

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:

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 (o ícone 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 (ícone 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 :

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

  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:

    A página de demonstração a fazer modificada depois de guardar as alterações e atualizar

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 (í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 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 :

    Selecionar a pasta de demonstração de tarefas

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

    Abriu a pasta de demonstração a fazer inicialmente

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:

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:

A transferir e clonar:

Executar um servidor Web local:

  • Last updated on