Adicionar IU personalizada a DevTools com extensões

Além das ferramentas disponíveis no Microsoft Edge DevTools, pode adicionar novas ferramentas ao instalar extensões do Microsoft Edge ou criar as suas próprias extensões para os seus casos de utilização específicos. Uma extensão do Microsoft Edge expande frequentemente a interface de utilizador do Microsoft Edge com novos botões e painéis, mas também pode expandir as DevTools no Microsoft Edge ao adicionar um novo separador de ferramentas na Barra de Atividade.

Localizar uma extensão que expande as DevTools

A categoria Ferramentas de desenvolvedor em Suplementos do Microsoft Edge contém extensões que normalmente expandem as DevTools.

Não é possível saber se uma extensão expande a Barra de Atividade de DevTools, sem a executar ou ver o código fonte, mas a categoria Ferramentas de desenvolvedor nos Suplementos do Microsoft Edge é um bom local para procurar.

Instalar uma extensão no DevTools

Para instalar uma extensão do Microsoft Edge que expande o DevTools:

1. Aceda a Suplementos do Microsoft Edge, como a categoria Ferramentas de desenvolvedor, e aceda à extensão que pretende instalar.

   Por exemplo, aceda à extensão React Ferramentas de Programação, que é o exemplo utilizado para os passos abaixo:

   

2. Clique no botão Obter . É aberta uma caixa de diálogo de instalação, Adicionar <o nome> da extensão ao Microsoft Edge?

3. Clique no botão Adicionar extensão . Uma caixa de diálogo indica que a extensão foi instalada e o botão Extensões () lista agora a extensão.

4. Abra um novo separador ou janela e, em seguida, aceda a uma página que contenha conteúdo relevante para a extensão DevTools. Por exemplo, utilize a página de exemplo TodoMVC React ou aceda a uma página dinâmica do repositório de Demonstrações do Microsoft Edge, como demonstração de tarefas.

5. Abra As DevTools, como premir F12. No caso desta extensão React, são abertos dois novos separadores na Barra de Atividade: Componentes e Gerador de Perfis:

   

6. Se os novos separadores não forem apresentados na Barra de Atividade, torne as DevTools mais largas ou clique no botão Mais ferramentas () e, em seguida, selecione a ferramenta:

   

Criar uma extensão DevTools

Pode criar a sua própria extensão DevTools para adicionar novos separadores na Barra de Atividade de DevTools e interagir com a página inspecionada.

Veja Criar uma extensão DevTools.