Neste tutorial, você aprenderá a conhecer as Ferramentas de Desenvolvedor do Microsoft Edge, que em muitos aspectos são semelhantes às Ferramentas de Desenvolvedor do Google Chrome. Você descobrirá como abrir e usar essas ferramentas de maneira eficaz, bem como as diferenças entre as duas ferramentas de desenvolvimento de navegadores.
Principais conclusões
As Ferramentas de Desenvolvedor do Edge oferecem uma interface de usuário quase idêntica às Ferramentas de Desenvolvedor do Chrome quando se trata de funções básicas. As diferenças estão principalmente na interface do usuário e em algumas funções adicionais, enquanto as ferramentas principais e atalhos permanecem praticamente iguais.
Guia Passo a Passo
Para abrir as Ferramentas de Desenvolvedor do Edge, você tem várias opções disponíveis. Uma maneira é pressionar F12. Se você estiver trabalhando em um Mac, pode usar a combinação de teclas Command + Option + I. Os usuários do Windows também podem usar a combinação Control + Shift + I. Se deseja abrir as DevTools através do menu de contexto, clique com o botão direito do mouse no cabeçalho da página da web e selecione "Inspecionar".
A interface das Ferramentas de Desenvolvedor do Edge lhe será imediatamente familiar se você já trabalhou com as Ferramentas de Desenvolvedor do Chrome. As guias estão lá, os ícones têm uma aparência um pouco diferente, e você acessa as ferramentas adicionais através de um ícone de "Mais" na barra superior. No Chrome, essas ferramentas adicionais são acessíveis através do menu principal.
Se deseja adicionar uma nova guia nas Ferramentas de Desenvolvedor do Edge, basta clicar no ícone de Mais. Por exemplo, você pode adicionar a ferramenta de animação. Ela será exibida na parte superior da barra de guias, semelhante às DevTools do Chrome.
Existe também uma guia \"Welcome\", semelhante à página "What's New" no Chrome. Você pode ver um resumo das funções das DevTools aqui. Sugiro que dê uma olhada nesta guia para descobrir dicas e truques úteis que ainda não foram abordados no curso.
Outra funcionalidade útil das Ferramentas de Desenvolvedor do Edge é a capacidade de mover a barra de guias para a esquerda, permitindo uma disposição vertical das guias. Os ícones aparecem como dicas de ferramentas, o que economiza espaço e oferece mais espaço para as próprias ferramentas.
As ferramentas de design podem ser modificadas através de várias configurações, semelhante às configurações do Chrome. Você pode personalizar os menus suspensos, a documentação e a barra de atividades para manter seu ambiente de trabalho familiar.
Uma das poucas diferenças é o ícone adicional para o Azure DevOps nas ferramentas do Edge, que não está presente no Chrome. Isso é especialmente útil para desenvolvedores que trabalham no ambiente do Azure.
Ao navegar pelas guias específicas, você notará que a estrutura e as funções em ambas as ferramentas são praticamente idênticas. Você pode usar estilos, layouts calculados e tudo mais que está acostumado a usar no Chrome no Edge também.
No entanto, as atualizações de recursos podem variar ligeiramente. Quando o Chrome adiciona um novo recurso, ele pode estar disponível no Edge um pouco mais tarde, ou vice-versa. Portanto, é recomendável verificar regularmente quais novas funcionalidades estão sendo adicionadas às várias ferramentas.
Isso é basicamente tudo que você precisa saber sobre as Ferramentas de Desenvolvedor do Edge. Se você já está familiarizado com as Ferramentas de Desenvolvedor do Chrome, se ajustar às Ferramentas de Desenvolvedor do Edge será fácil.
Resumo
Neste tutorial, você aprendeu as semelhanças e diferenças entre as Ferramentas de Desenvolvedor do Google Chrome e do Microsoft Edge. Agora você sabe como abrir as ferramentas e quais funções estão disponíveis para trabalhar de forma eficiente em seus projetos da web.
