Exemplo: Ferramenta DevTools personalizada

O exemplo de "Ferramenta personalizada do DevTools" é uma extensão do Microsoft Edge que adiciona uma ferramenta personalizada no Microsoft Edge DevTools, que tem sua própria guia na Barra de Atividades.

Introdução

A Ferramenta DevTools Personalizada adiciona uma guia e um painel de ferramentas personalizadas no DevTools no Microsoft Edge:

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

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

A página da Web em inspeção e a ferramenta DevTools Personalizada enviam mensagens entre si.

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

Etapa 1: Baixar o exemplo

Se ainda não tiver terminado, baixe o branch "main" do repositório Demos ou clone (ou bifurque e clone) o repositório. Baixar o repositório é mais simples e é descrito abaixo.

Baixe o branch "main" do repositório Demos, da seguinte maneira:

1. No Microsoft Edge, vá para o repositório MicrosoftEdge/Demos .

2. Clique na seta para baixo no botão Código e selecione Baixar ZIP.

3. No Microsoft Edge, a caixa de diálogo Downloads mostra Demos-main.zip. "-main" é adicionado, o que significa um snapshot estático do branch "main" do repositório.

4. Passe o mouse à direita e Demos-main.zipclique no botão Mostrar na pasta .

   O Explorador de Arquivos é aberto, exibindo a pasta Downloads.

5. Clique com o botão direito do mouse Demos-main.zipe selecione Extrair tudo.

   A caixa de diálogo Extrair Pastas Compactadas (Zipadas) é aberta.

6. Clique no botão Extrair .

   A caixa de diálogo % concluída é aberta e concluída.

7. Mova a Demos-main pasta para um local de repositório GitHub, como C:\Users\localAccount\GitHub.

Etapa 2: Instale a extensão para adicionar a ferramenta no DevTools

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

2. Selecione Configurações e mais (), passe o mouse sobre Extensões e selecione Gerenciar extensões.

   A guia Extensões e a página são abertas (edge://extensions).

3. Ative a alternância do modo Desenvolvedor .

4. Clique Carregar descompactado.

   A caixa de diálogo Selecionar o diretório de extensão é aberta.

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

   O card da Ferramenta Personalizada DevTools é exibido:

   

Etapa 3: Selecionar a ferramenta personalizada no DevTools

1. No Microsoft Edge, vá para uma página da Web, como o aplicativo To Do, em uma nova janela ou guia.

   A ferramenta DevTools Personalizada requer uma página da Web, não uma guia vazia.

2. Clique com o botão direito do mouse na página da Web e selecione Inspecionar.

   O DevTools é aberto.

3. Na Barra de Atividades do DevTools, clique na guia da ferramenta Personalizada ().

   A guia e o painel de ferramentas personalizadas são exibidos:

   

   Se a guia da ferramenta Personalizada () não estiver visível, siga um destes procedimentos:

   • Clique no botão Mais ferramentas () e selecione Ícone Personalizado.

   • Torne o DevTools mais amplo e clique na guia da ferramenta Personalizado ( personalizado).

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

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

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

   • Uma área de exibição de coordenadas , para enviar uma mensagem da página da Web inspecionada para o Console do DevTools e as ferramentas personalizadas .

Etapa 4: Exibir informações de memória usando uma chamada de API de extensão

• Na ferramenta Personalizado , ao lado de Capacidade de memória disponível, observe a atualização uma vez por segundo do valor:

  

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

1. Na ferramenta Personalizado , clique no botão Dizer Olá .

   Uma caixa de diálogo JavaScript alert é aberta, exibindo a mensagem: "Olá da extensão DevTools!"

   

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

2. Clique no botão OK .

   A caixa de diálogo é fechada.

Etapa 6: Enviar mensagem da página inspecionada para o DevTools

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

   Na ferramenta Personalizado , ao lado de Coordenadas, as coordenadas são exibidas e atualizadas enquanto você clica ao redor:

   

2. No DevTools, na Barra de Atividades, selecione a ferramenta Console (ícone do ).

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

   As coordenadas clicadas são exibidas no Console:

   

Etapa 7: Modificar a ferramenta personalizada

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

2. Abra o Visual Studio Code.

3. Clique no menu Arquivo e em Abrir Pasta.

   A caixa de diálogo Abrir Pasta é aberta.

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

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

5. Clique em panel.html.

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

   

6. Adicionar "Meu" ao <h2> título; alterar de:

   <h2>Custom DevTools Tool</h2>
   

   para:

   <h2>My Custom DevTools Tool</h2>
   

7. Salvar panel.html.

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

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

9. Adicionar "My" ao name; alterar de:

   "name": "Custom DevTools Tool",
   

   para:

   "name": "My Custom DevTools Tool",
   

10. Salvar manifest.json.

Etapa 8: Recarregar a ferramenta personalizada modificada

1. No Microsoft Edge, selecione Configurações e mais (), passe o mouse sobre Extensões e selecione Gerenciar extensões.

   A guia Extensões e a página são abertas (edge://extensions).

2. No card Ferramenta DevTools Personalizada, clique no link Recarregar.

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

   

Etapa 9: usar a ferramenta personalizada modificada

1. Vá para uma página da Web, como o aplicativo To Do, em uma nova janela ou guia.

   A ferramenta DevTools Personalizada requer uma página da Web, não uma guia vazia.

2. Clique com o botão direito do mouse na página da Web e selecione Inspecionar.

   O DevTools é aberto.

3. Na Barra de Atividades do DevTools, clique na guia da ferramenta Personalizada ().

   A ferramenta Personalizado é exibida, com a palavra Meu adicionada ao título no painel:

   

   Se o título ainda disser Ferramenta de DevTools Personalizada em vez de Minha Ferramenta de DevTools Personalizada, feche e reabra o DevTools.

   Se a guia da ferramenta Personalizada () não estiver visível, siga um destes procedimentos:

   • Clique no botão Mais ferramentas () e selecione Ícone Personalizado.

   • Torne o DevTools mais amplo e clique na guia da ferramenta Personalizado ( personalizado).

Este é o fim das etapas para usar e modificar o exemplo de extensão do DevTools.

Solução de problemas

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

• Torne o DevTools amplo, para mostrar muitas ferramentas na Barra de Atividades.

• Feche e reabra o DevTools.

• Atualize ou atualize a página inspecionada.

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

• Se nenhum ícone for fornecido em tal extensão, a guia quando não selecionada será estreita e cinza, no lado direito da Barra de Atividades. Clique na guia cinza estreita.

• Vá para uma página da Web, não para uma guia vazia. O código no exemplo de "Ferramenta personalizada de DevTools" requer uma página da Web.

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

A guia Personalizado não tem um comando Remover da Barra de Atividades no menu de clique com o botão direito do mouse.

Confira também