Exemplo: ferramenta DevTools Personalizada

A "ferramenta DevTools Personalizada" de exemplo é uma extensão do Microsoft Edge que adiciona uma ferramenta Personalizada no Microsoft Edge DevTools, que tem o seu próprio separador na Barra de Atividade.

Introdução

A Ferramenta de DevTools Personalizada adiciona um separador e painel de ferramentas Personalizadas em DevTools no Microsoft Edge:

A ferramenta Personalizada apresenta informações de memória e envia mensagens entre a página Web inspecionada e o painel em DevTools.

A ferramenta DevTools Personalizada chama a API DevTools para apresentar informações de memória.

A página Web sob inspeção e a ferramenta DevTools Personalizadas enviam mensagens entre si.

Utilize este artigo para transferir, instalar e executar o exemplo. Para saber mais sobre o código neste exemplo, consulte Adicionar uma ferramenta personalizada no Microsoft Edge DevTools.

Passo 1: Transferir o exemplo

Se ainda não tiver terminado, transfira o ramo "principal" do repositório Demos ou clone (ou fork e clone) o repositório. A transferência do repositório é mais simples e é descrita abaixo.

Transfira o ramo "main" do repositório Demos da seguinte forma:

1. No Microsoft Edge, aceda ao repositório MicrosoftEdge/Demos .

2. Clique na seta para baixo no botão Código e, em seguida, selecione Transferir ZIP.

3. No Microsoft Edge, a caixa de diálogo Transferências mostra Demos-main.zip. "-main" é adicionado, o que significa uma snapshot estática do ramo "principal" do repositório.

4. Paire o cursor do rato à direita de Demos-main.zipe, em seguida, clique no botão Mostrar na pasta .

   Explorador de Arquivos é aberta, apresentando a pasta Transferências.

5. Clique com o botão direito do rato e, em Demos-main.zipseguida, selecione Extrair tudo.

   É aberta a caixa de diálogo Extrair Pastas Comprimidas (Zipadas ).

6. Clique no botão Extrair .

   A caixa de diálogo % concluída é aberta e, em seguida, termina.

7. Mova a Demos-main pasta para uma localização de repositórios do GitHub, como C:\Users\localAccount\GitHub.

Passo 2: instalar a extensão para adicionar a ferramenta no DevTools

1. No Microsoft Edge, abra uma nova janela ou separador.

2. Selecione Definições e muito mais (), paire o cursor sobre Extensões e, em seguida, selecione Gerir extensões.

   O separador Extensões e a página são abertos (edge://extensions).

3. Ative o botão de alternar Modo de programador .

4. Clique Carregar desembalado.

   É aberta a caixa de diálogo Selecionar o diretório de extensão .

5. Navegue para a /Demos-main/devtools-extension pasta, como C:\Users\localAccount\GitHub\Demos-main\devtools-extension\, e, em seguida, clique no botão Selecionar Pasta .

   É apresentada a card da Ferramenta DevTools Personalizada:

   

Passo 3: selecionar a ferramenta Personalizada em DevTools

1. No Microsoft Edge, aceda a uma página Web, como a aplicação To Do, numa nova janela ou separador.

   A ferramenta Custom DevTools requer uma página Web, não um separador vazio.

2. Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar.

   O DevTools é aberto.

3. Na Barra de Atividade de DevTools, clique no separador da ferramenta Personalizar ().

   O separador e painel Ferramenta personalizada são apresentados:

   

   Se o separador da ferramenta Personalizar () não estiver visível, efetue um dos seguintes procedimentos:

   • Clique no botão Mais ferramentas () e, em seguida, selecione personalizado Personalizar.

   • Torne as DevTools mais largas e, em seguida, clique no separador da ferramenta Personalizada ().

   A página DevTools personalizada tem várias secções:

   • Informações de apresentação da memória.

   • Um botão para enviar uma mensagem de DevTools para a página Web inspecionada, para que a página apresente uma caixa de diálogo JavaScript alert .

   • Uma área de apresentação coordenadas , para enviar uma mensagem da página Web inspecionada para a Consola de DevTools e ferramentas personalizadas .

Passo 4: Ver informações de memória com uma chamada à API de extensão

• Na ferramenta Personalizada , junto a Capacidade de Memória Disponível, observe a atualização uma vez por segundo do valor:

  

Passo 5: Enviar mensagem do DevTools para a página inspecionada

1. Na ferramenta Personalizada , clique no botão Diga Olá .

   É aberta uma caixa de diálogo JavaScript alert a apresentar a mensagem: "Olá, da extensão DevTools!"

   

   O DevTools envia uma mensagem para a página Web inspecionada, fazendo com que o JavaScript apresente um alerta.

2. Clique no botão OK .

   A caixa de diálogo é fechada.

Passo 6: Enviar mensagem da página inspecionada para DevTools

1. Na página Web inspecionada, clique em vários pontos.

   Na ferramenta Personalizada , junto a Coordenadas, as coordenadas são apresentadas e atualizadas enquanto clica:

   

2. Em DevTools, na Barra de Atividade, selecione a ferramenta Consola ().

3. Na página Web inspecionada, clique em vários pontos.

   As coordenadas clicadas são apresentadas na Consola:

   

Passo 7: Modificar a ferramenta Personalizada

1. Se ainda não o tiver feito, instale Visual Studio Code.

2. Abra o Visual Studio Code.

3. Clique no menu Ficheiro e, em seguida, clique em Abrir Pasta.

   A caixa de diálogo Abrir Pasta é aberta.

4. Navegue para a /Demos-main/devtools-extension/ pasta, como C:\Users\localAccount\GitHub\Demos-main\devtools-extension\, e, em seguida, clique no botão Selecionar Pasta .

   No painel Explorer, a /devtools-extension/ pasta é apresentada.

5. Clique em panel.html.

   panel.html está aberto para edição:

   

6. Adicione "My" ao <h2> cabeçalho; altere de:

   <h2>Custom DevTools Tool</h2>
   

   para:

   <h2>My Custom DevTools Tool</h2>
   

7. Guarde panel.html.

8. No painel Explorer, clique em manifest.json.

   manifest.json está aberto para edição.

9. Adicione "My" ao name; altere de:

   "name": "Custom DevTools Tool",
   

   para:

   "name": "My Custom DevTools Tool",
   

10. Guarde manifest.json.

Passo 8: Recarregar a ferramenta Personalizada modificada

1. No Microsoft Edge, selecione Definições e muito mais (), paire o cursor sobre Extensões e, em seguida, selecione Gerir extensões.

   O separador Extensões e a página são abertos (edge://extensions).

2. No card Da Ferramenta DevTools Personalizada, clique na ligação Recarregar.

   A card agora mostra A Minha Ferramenta DevTools Personalizada como o nome da extensão:

   

Passo 9: Utilizar a ferramenta Personalizada modificada

1. Aceda a uma página Web, como a aplicação To Do, numa nova janela ou separador.

   A ferramenta Custom DevTools requer uma página Web, não um separador vazio.

2. Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar.

   O DevTools é aberto.

3. Na Barra de Atividade de DevTools, clique no separador da ferramenta Personalizar ().

   A ferramenta Personalizada é apresentada, com a palavra O meu adicionado ao cabeçalho no painel:

   

   Se o título ainda indicar Ferramenta DevTools Personalizada em vez da Ferramenta As Minhas DevTools Personalizadas, feche e reabra as DevTools.

   Se o separador da ferramenta Personalizar () não estiver visível, efetue um dos seguintes procedimentos:

   • Clique no botão Mais ferramentas () e, em seguida, selecione personalizado Personalizar.

   • Torne as DevTools mais largas e, em seguida, clique no separador da ferramenta Personalizada ().

Este é o fim dos passos para utilizar e modificar o exemplo de Extensão DevTools.

Solução de problemas

Se o separador Personalizado não estiver visível no DevTools ou estiver desatualizado e não mostrar as alterações de código mais recentes:

• Torne as DevTools amplas para mostrar muitas ferramentas na Barra de Atividade.

• Feche e reabra as DevTools.

• Atualize ou atualize a página inspecionada.

• No Microsoft Edge, na página Extensões , clique em Recarregar para a extensão.

• Se não for fornecido nenhum ícone nessa extensão, o separador quando não estiver selecionado é estreito e cinzento, no lado direito da Barra de Atividade. Clique no separador cinzento estreito.

• Aceda a uma página Web, não a um separador vazio. O código na "ferramenta DevTools Personalizada" de exemplo requer uma página Web.

Quando a Barra de Atividade é estreita, a ferramenta Devtools Personalizadas é adicionada ao menu Mais ferramentas na Barra de Atividade.

O separador Personalizado não tem um comando Remover da Barra de Atividade no menu de contexto.

Confira também