F12 vs Showdown Edge do DevTools vs Firefox

O Developer Tools do Microsoft Edge, o novo navegador padrão do Windows 10, tem um design moderno e alguns novos recursos em comparação com seu antecessor, o F12 Dev Tools do Internet Explorer 11.

A questão de saber se as ferramentas de desenvolvimento do Microsoft Edge estão à altura de seus concorrentes populares - as ferramentas de desenvolvimento em outros navegadores modernos, como o Mozilla Firefox e o Google Chrome - surge naturalmente na mente de muitos desenvolvedores..

Neste post, tentamos responder a esta pergunta e descobrir se as Dev Tools Dev de Edge realmente valem a pena usar. Vamos comparar seus recursos com os das Ferramentas do desenvolvedor do Firefox e com as DevTools do Google Chrome.

Abra as ferramentas de desenvolvimento

Pressionar F12 abre as ferramentas do desenvolvedor em todos os três casos: Developer Tools no Firefox, DevTools no Chrome e F12 Dev Tools no Microsoft Edge. Este é o atalho de teclado onde o nome oficial de Edge's F12 Dev Tools vem de.

Quando você abre o Dev Tools do Edge, você pode experimentar ao mesmo tempo uma de suas deficiências mais conhecidas: atualmente é impossível fixar as ferramentas em uma janela existente. Enquanto você pode acompanhar o que está acontecendo na tela do Firefox Developer Tools e do Chrome DevTools fixando a janela de ferramentas de desenvolvimento na parte inferior da tela, você (atualmente) não pode fazer o mesmo com o Edge.

Os desenvolvedores da Microsoft afirmam que vão corrigir esse problema em uma atualização futura.

Inspecione o DOM

o DOM Explorer ferramenta (atalho: CTRL + 1) é a primeira guia do F12 Dev Tools do Microsoft Edge. Seu layout e design geral é bastante semelhante ao Elemento guia do Chrome e o Inspetor guia no Firefox, no entanto, os recursos visualmente diferem.

No Edge, você pode dar uma olhada no documento HTML renderizado, nos estilos CSS relacionados e nos manipuladores de eventos registrados em cada elemento. Você também pode encontrar o pequeno gráfico sobre o modelo de caixa CSS com os valores calculados, já bem conhecidos dos dois navegadores concorrentes.

Você pode experimentar com regras CSS excluindo os atuais e adicionando novos, e você pode ver o seu mudanças resumidas em uma subguia separada chamada “Alterar” (está localizado no lado esquerdo). Este último é um recurso que não é construído no Firefox Developer nem no Chrome DevTools. Pode dar uma rápida recapitulação ao usuário, por isso é uma opção realmente útil.

Existem alguns recursos no Firefox Developer Tools que nem o Edge nem o Google Chrome fornecem atualmente, mas que podem ajudar significativamente a vida de um designer: as ferramentas Font e Animation analyzer.

Na Edge há um selecionador de cores legal embora isso possa compensar um pouco o usuário por isso.

Interaja com JavaScript

o Console A guia (Atalho: CTRL + 2) no Microsoft Edge permite que você interaja com o JavaScript do seu site, assim como no Firefox e no Chrome Dev Tools. Todos os três permitem que você siga erros de JavaScript em tempo real e também pode analisá-los inserindo sua própria entrada.

A ferramenta Console do Edge's F12 Dev Tools tem um bom recurso de preenchimento automático que te ajuda com os comandos, no entanto parece ser menos experiente comparado ao do Firefox e do Chrome Dev Tools.

Beira separa erros, avisos e mensagens o que é uma grande ajuda, embora não seja algo que os outros dois toolkits não tenham.

O Console do Firefox parece ser o mais profissional dentre as três ferramentas de desenvolvimento, como também mostra separadamente outros tipos de problemas: rede, CSS, erros de segurança e mensagens de registro, e permite que você interaja com eles através do Interface do console, não apenas com os erros de JavaScript.

Entenda o que seu código está fazendo

o Depurador ferramenta (Atalho: CTRL + 3) ajuda você a entender o que está acontecendo com o seu código enquanto encontra possíveis bugs. Você pode definir relógios e pontos de interrupção e visualizar pilhas de chamadas.

O painel Watches exibe valores de variáveis, o modo Callstack mostra a cadeia de chamadas de função que levaram ao estado atual e o modo Breakpoints mostra uma lista dos pontos de interrupção definidos.

Edge's F12 Dev Tools permite que você pausar seu código no meio da execução e percorra linha por linha. Você também tem a opção de melhorar a legibilidade de um arquivo JavaScript compilado ou reduzido, e você pode depurar recursos diferentes (JavaScript, extensões, etc.) um por um.

O Firefox e o Chrome DevTools fornecem todas essas funcionalidades, de modo que o Edge não oferece uma experiência de depuração excepcional, mas fornece ao usuário uma ferramenta sólida e confiável que está em par com seus concorrentes..

Dê uma olhada na comunicação entre o navegador e o servidor

o Rede ferramenta (atalho: CTRL + 4) foi completamente redesenhada para Microsoft Edge desde o Internet Explorer 11. Com a ajuda desta ferramenta útil você pode siga a comunicação entre o servidor e o navegador, e inspecionar os pedidos individuais.

Você pode filtrar os resultados por tipo de conteúdo como folhas de estilo, imagens, mídia, fontes, XHR e muitos outros. Você também pode depurar AJAX com a ajuda da ferramenta de rede.

A aba Rede do Edge e do Firefox oferece recursos e interface de usuário bastante semelhantes. Ambos têm um painel da barra lateral de fácil utilização que permite que você dê uma olhada no cabeçalho HTTP do recurso selecionado, corpo HTTP, parâmetros, cookies relacionados e tempos item por item..

A guia Rede do Chrome DevTools não tem um painel como este, mas se você clicar nas solicitações uma a uma, poderá ver as mesmas informações. É uma solução menos intuitiva.

Rastrear páginas lentas

o atuação guia (atalho: CTRL + 5) ajuda você a entender as razões por trás de uma página da web lenta. Com a ferramenta Performance, a Microsoft deu um grande passo à frente combinando as Responsividade e perfilador da interface do usuário ferramentas para criar uma visão de ponta a ponta de todos os seus scripts e visualizar o desempenho.

Esta ferramenta prática fornece relatórios sobre diferentes tipos de uso da CPU, fornece insights sobre a pintura do quadro do seu site e também é possível isolar cenários de usuários diferentes definindo rótulos na linha do tempo.

Durante o processo de teste, descobrimos que a ferramenta Performance no Edge nos forneceu mais informações sobre problemas de velocidade que o Firefox Developer ou o Chrome DevTools. A interface do usuário da guia Desempenho no Edge é bastante bem projetada, ajudando-nos com muitas dicas visuais e é relativamente fácil de usar. Se você quiser saber mais sobre como usá-lo, leia o documento detalhado.

Diagnosticar problemas de memória

o Memória ferramenta (Atalho: CTRL + 6) torna possível encontrar vazamentos de memória que também pode abrandar a sua página web, além disso pode impactar a estabilidade do seu site.

Com a ajuda de um bom gráfico, você pode entender facilmente onde seu uso de memória está crescendo, e você pode fazer instantâneos em pontos específicos que tornam possível analisar o uso da memória. Você também pode comparar dois instantâneos feitos em diferentes pontos do ciclo de vida da página para entender a diferença entre eles.

O Chrome DevTools também tem um bom gerenciador de perfis de memória na aba Profiles, enquanto o Firefox Developer não fornece esse recurso por padrão, mas você pode baixar e instalar complementos como este, se quiser. O criador de perfil de memória do Chrome DevTools é bastante avançado e oferece mais recursos que o Edge, por exemplo, permite que você registrar alocações de objeto JavaScript ao longo do tempo que pode ajudar a isolar vazamentos de memória.

Teste seu site em diferentes tamanhos de tela

o Emulação ferramenta (Atalho: CTRL + 7) permite que você teste seu site sob diferentes circunstâncias. Você pode escolher entre dois perfis de navegador, o Google Desktop e o Windows 10 Mobile e de diversos agentes de usuário, incluindo todas as versões de desktop e móvel do Internet Explorer para o IE6, além de muitos concorrentes, Chrome, Firefox, Safari, etc..

É interessante que você tenha a opção de fazer uma olhe para sua página como um Bing Bot. Você também pode emular um GPS, E definir diferentes resoluções e orientações.

O Firefox Developer Tools não tem uma ferramenta de emulação de dispositivos, mas o Chrome DevTools tem um emulador tão sofisticado que o Edge dificilmente pode competir com ele..

Por exemplo, a tela de emulação do Chrome tem um grade precisa onde a vista emulada é inserida em, e você não só pode escolher entre perfis de navegador e agentes de usuários, mas também de muitos dispositivos, como o versões diferentes do iPhone ou Samsung Galaxy e muitos outros. O emulador do Chrome DevTools também tem um prático Opção de zoom e você pode testar seu site em redes diferentes, como 3G, 4G, DSL, WiFi, etc..

Resumo

No geral, o F12 Dev Tools da Microsoft Edge parece ser surpreendentemente bom. Ele fornece recursos bastante semelhantes aos kits de ferramentas populares de desenvolvimento da Web de outros navegadores modernos. Existem duas áreas onde o F12 Dev Tools do Edge é bastante forte: o interface de usuário isso é realmente intuitivo, fácil de usar e bem projetado, e a ferramentas de diagnóstico de desempenho.

Para esses dois recursos, pode valer a pena considerar alternar ou, pelo menos, testar o Edge. A maior falha é a falta da possibilidade de fixar as ferramentas de desenvolvimento na parte inferior da tela, mas vamos esperar que a Microsoft corrija rapidamente esse problema.