Aprenda a usar a ferramenta do desenvolvedor do browser

A Microsoft disponibiliza, através do site dev.modern.ie, ferramentas para realizar testes no nosso site.

Uma dessas ferramentas é o Site scan que permite fazer um levantamento de problemas no site por não estarem aderentes às boas práticas e padrões da Web Moderna. Você pode conferir mais detalhes sobre esse recurso nesse link.

As ferramentas disponibilizadas pela Microsoft no site dev.modern.ie são:

  • Virtual Machines: Permite selecionar máquinas virtuais Windows que contém o Internet Explorer das versões 6 à 11. Você consegue baixar essas máquinas virtuais e usá-las tanto no Windows como no sistema operacional do Mac e no Linux.
  • Remote IE: É disponibilizado acesso remoto a uma máquina virtual do Microsoft Azure onde podemos acessar a última versão do Internet Explorer. Disponível para Mac OS X, iOS, Android e Windows.
  • Site Scan: Já abordado aqui, permite fazer análise estática do site e identificar possíveis problemas.
  • Browser screenshots: Permite obter um screenshot do site em diferentes browsers de vários sistemas operacionais.
  • F12 Dev Tools: Ferramenta com recursos que permitem visualizar informações do site como o código, detalhes de scripts e console com mensagens de aviso/erro, comunicação entre browser e servidor web, entre outros.

Recentemente abordamos em um outro artigo o uso do BrowserStack para testar nosso site em diferentes browsers.

Nesse artigo iremos descrever mais detalhadamente sobre a ferramenta do desenvolvedor.

Ferramenta do Desenvolvedor

Todos os browsers dispõem de uma ferramenta de desenvolvimento que permite visualizar detalhes da página além da comunicação entre o browser e o servidor Web. Para acessar essa ferramenta basta abrir um site no browser e então pressionar a tecla F12 quando o browser estiver em ativo e em foco.

aprendausarferramentadesenvolvedor_f12tools

No caso do Internet Explorer 11, a ferramenta do desenvolvedor disponibiliza vários recursos que ajudam o desenvolvedor a analisar seu site e detectar possíveis problemas no uso da memória ou até de responsividade. A seguir iremos abordar cada recurso disponibilizado pela ferramenta do desenvolvedor do IE11.

Explorador DOM (aba DOM Explorer)

O Document Object Model (DOM) no Javascript mapeia a página Web em objetos. E o explorador permite visualizar o conteúdo HTML da página e também selecionar trechos de código para identificá-los no site ou vice-versa. Além disso, é possível visualizar, para um determinado elemento selecionado na página ou código, o CSS aplicado, os eventos Javascript associados além de informações de Layout:

aprendausarferramentadesenvolvedor_f12tools2

Na imagem acima é possível visualizar em destaque o conteúdo HTML que exibe a mensagem “Comming Soon” e, ao lado, os estilos CSS nele aplicados.

Linha de Comando (aba Console)

Permite executar comandos Javascript e também verificar possíveis problemas notificados pelo browser ao abrir a página. No exemplo a seguir, executamos os seguintes comandos Javascript:

document.compatMode
document.getElementById("hidden-message").innerHTML = "Em Breve!"

aprendausarferramentadesenvolvedor_f12tools3

Depurador (aba Debugger)

É possível através do debugger adicionar breakpoints (pontos de parada) no Javascript para que você execute o código linha a linha.

Ao selecionar a aba Debugger, você verá os arquivos que contém Javascript. Nele, encontrar a linha onde deseja interromper a execução (ponto de parada) e então executar o site para que o browser interrompa a execução do Javascript naquela linha.

aprendausarferramentadesenvolvedor_cssanimationdebug

Exemplo de ponto de parada definido no curso de modo de renderização.

Rede (aba Network)

Permite avaliar comunicação entre browser e servidor Web. É especialmente útil para identificar gargalos no site que podem prejudicar o tempo de carregamento do mesmo no browser do usuário.

Ali você consegue verificar todas as requisições feitas e respostas obtidas. Para as respostas é possível identificar também aquelas que falharam.

No caso do Internet Explorer, para verificar, basta selecionar a aba Network, habilitar o monitoramento (botão Habilitação Monitoramento de Rede) e então abrir no browser a página que desejar.

aprendausarferramentadesenvolvedor_network

Responsividade (aba UI Responsiveness)

A partir da análise de rede, podemos detectar possíveis gargalos no acesso ao nosso site. O próximo passo é identificar quais são as causas desta lentidão. Para isso, o IE disponibiliza a ferramenta que permite avaliar a responsividade da interface.

Ao abrir a aba UI Responsiveness, você verá que há um link que ao ser clicado iniciará a análise de responsividade do seu site (acessível também pela tecla Ctrl+E). Seguem os passos para usar esse recurso:

  1. Acessar a página que deseja testar.
  2. Abrir a ferramenta do desenvolvedor.
  3. Acessar a aba UI Responsiveness.
  4. Clicar no link para iniciar a análise.
  5. Usar os recursos do site normalmente, inclusive a navegação entre páginas.
  6. Quando terminar, clicar novamente no link para interromper a análise.
  7. Será fornecido o resultado indicando tempo de carga, execução de Javascript, tempo com desenhos gráficos e estilos e também decodificação de imagens.

aprendausarferramentadesenvolvedor_f12toolsuiresponsiveness

Memória (aba Memory)

Um outro quesito importante a ser analisado nos testes é a memória. Para isso, a ferramenta do desenvolvedor disponibiliza também a aba Memory. E da mesma forma que as abas anteriores, é necessário habilitar o monitoramento para então obter a leitura.

Ao abrir a aba Memory, habilitar o monitoramento (botão Habilitação Monitoramento de Rede). É possível também obter snapshots durante os testes. Seguem os passos para usar esse recurso:

  1. Acessar a página que deseja testar.
  2. Abrir a ferramenta do desenvolvedor.
  3. Acessar a aba Memory.
  4. Clicar no botão para habilitar o monitoramento de memória.
  5. Usar os recursos do site normalmente, inclusive a navegação entre páginas.
  6. Quando terminar, clicar no botão para interromper o monitoramento de memória.
  7. Será fornecido o resultado indicando informações de execução dos scripts do site.

Nesse caso será mostrado um gráfico indicando o uso de memória pelo browser:

aprendausarferramentadesenvolvedor_memory

Emuladores (aba Emulation)

Além de todos os recursos já elencados aqui sobre a ferramenta do desenvolvedor do Internet Explorer, temos ainda a aba de emulação que permite testar a visualização do site em diferentes versões de IE através da definição do Document Mode.

Nessa aba conseguimos tanto visualizar o Document Mode padrão do nosso site (o modo padrão é aquele que foi identificado pelo IE) como também definir outro Document Mode para analisar como nosso site se comporta em outra versão do IE. É muito útil para testar nosso site em versões anteriores do IE quando não temos essas versões disponíveis em software.

Nessa aba conseguimos também emular:

  • O perfil do Browser entre Desktop, Corporativo (enterprise) e Windows Phone.
  • A string do user agent. Especialmente útil para identificar problemas no site relacionados com definição de conteúdo baseado no user agent.
  • Orientação e Resolução da tela.
  • Geolocalização para testar nosso site em diferentes localidades.

aprendausarferramentadesenvolvedor_emulation

Conclusão

Enfim, a ferramenta do desenvolvedor disponibiliza ainda mais recursos para o criar e aprimorar seu site, identificar possíveis problemas e encontrar soluções buscando prover páginas que estejam aderentes a Web Moderna.

Quer obter mais dicas e sugestões? Comente aqui ou faça uma pergunta no Stack Overflow em Português com a tag “microsoft-edge”. E continue nos acompanhando no talkitbr.

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s