Introdução
O Google Chrome é um navegador da Web rico e poderoso, que inova o que é possível para aplicativos na Web. O Google trabalhou muito para oferecer uma experiência de navegação rápida, estável e rica em recursos para os usuários finais. O Google também garante que desenvolvedores como você tenham uma ótima experiência com o Chrome. As Ferramentas para Desenvolvedores, agrupadas e disponíveis no Chrome e no Safari, permitem que desenvolvedores e programadores da Web tenham acesso completo às configurações internas do navegador e do aplicativo da Web.
As ferramentas para desenvolvedores fazem parte do projeto de código aberto do Webkit. A maior parte da discussão neste artigo se aplica ao Google Chrome e ao Safari. No entanto, as capturas de tela foram tiradas usando o Google Chrome 6. Por isso, pode haver pequenas diferenças no seu navegador.
Neste artigo, vamos fazer um tour geral pelas Ferramentas para desenvolvedores e apontar os recursos mais conhecidos e úteis. Nosso público-alvo são desenvolvedores da Web que não conheciam ou ainda não investigaram as ferramentas para desenvolvedores. No entanto, temos certeza de que, mesmo que você seja um desenvolvedor da Web experiente, vai aprender uma ou duas dicas.
Se a sua instância das Ferramentas do desenvolvedor não corresponder exatamente às capturas de tela encontradas neste artigo, recomendamos que você faça upgrade para a versão 5 para acompanhar e ter acesso a todos os recursos descritos aqui.
Visão geral
No geral, há oito grupos principais de ferramentas disponíveis nas Ferramentas para Desenvolvedores, e os recursos estão sendo ampliados a cada versão. O Chrome 5 agora oferece elementos, recursos, scripts, linha do tempo, perfis, armazenamento, auditorias e console.
Elementos
A ferramenta "Elements" permite que você veja a página da Web como o navegador a vê. Ou seja, usando a ferramenta Elementos, você pode conferir o HTML bruto, os estilos CSS brutos, o modelo de objeto de documento e manipulá-los em tempo real.
Recursos
Use a ferramenta "Recursos" para saber quais componentes sua página da Web ou aplicativo está solicitando dos servidores da Web, quanto tempo essas solicitações levam e quanta largura de banda é necessária. Também é possível conferir os cabeçalhos de solicitação e resposta HTTP de cada um dos seus recursos. A ferramenta Recursos é perfeita para ajudar a acelerar o tempo de carregamento da página.
Scripts
Para conferir o JavaScript de uma página, use a ferramenta Scripts. Aqui você encontra uma lista de scripts necessários para a página e um depurador de script com todos os recursos. Você pode até mesmo mudar o JavaScript dinamicamente.
Cronograma
Para análises avançadas de tempo e velocidade, a ferramenta Linha do tempo oferece visibilidade detalhada das várias atividades do Chrome. Você pode saber quanto tempo o navegador leva para processar eventos do DOM, renderizar layouts de página e pintar a janela.
Perfis
A ferramenta "Perfis" ajuda a capturar e analisar a performance de scripts JavaScript. Por exemplo, é possível saber quais funções demoram mais para ser executadas e focar exatamente onde otimizar.
Armazenamento
Os aplicativos da Web modernos exigem mais persistência do que apenas cookies, e a ferramenta de armazenamento ajuda a rastrear, consultar e depurar o armazenamento local do navegador. Essa ferramenta pode mostrar e consultar dados armazenados em bancos de dados locais, armazenamento local, armazenamento de sessão e cookies.
Auditoria
A ferramenta de auditoria é como ter seu próprio consultor de otimização da Web sentado ao seu lado. Essa ferramenta pode analisar uma página enquanto ela carrega e exibir sugestões e otimizações para a diminuição do tempo de carregamento da página, aumentando assim a percepção de resposta e a resposta real.
Console
Por último, mas não menos importante, as ferramentas para desenvolvedores oferecem um console com recursos completos. No console, é possível inserir JavaScript arbitrário e interagir com a página de forma programática.
Como começar
É fácil iniciar as Ferramentas para Desenvolvedores no Chrome.
Em qualquer sistema operacional, basta clicar com o botão direito do mouse em qualquer elemento da página e selecionar a opção "Inspecionar elemento" no menu de contexto. Isso vai abrir as Ferramentas para desenvolvedores e mostrar o elemento em que você clicou.
Para conferir isso em ação, acesse http://www.google.com no navegador Chrome. Clique com o botão direito do mouse no logotipo do Google e você verá as seguintes opções:
Selecionar "Inspecionar elemento" vai abrir as ferramentas para desenvolvedores, que vão ficar assim:
Observe como as Ferramentas do desenvolvedor foram abertas na guia "Elementos" e destacaram automaticamente a tag <img> do logotipo do Google. Isso é muito útil quando você quer saber qual HTML gerou um elemento de página específico.
Também é possível abrir as Ferramentas para Desenvolvedores com um atalho de teclado simples. Dependendo do sistema operacional, tente o seguinte:
- No Windows e no Linux, selecione as teclas
Control-Shift-J. - No Mac, selecione as teclas
Command-Option-J.
Por fim, você pode abrir as ferramentas no menu principal do navegador.
Em um Mac, na barra de menus do aplicativo principal, selecione "View", "Developer" e "Developer Tools".
Em um PC com Windows, use o menu "Página" no canto superior direito e selecione "Desenvolvedor" e "Ferramentas para desenvolvedores".
Agora que você já abriu as Ferramentas do desenvolvedor, vamos começar a analisar os elementos da página inicial do Google.
Elementos
A primeira guia nas Ferramentas para desenvolvedores é "Elementos". Essa é sua janela para a estrutura da página da Web, apresentada como o navegador a vê.
Navegação DOM
Você vai acessar as guias "Elementos" com frequência quando precisar identificar o snippet de HTML de algum aspecto da página. Por exemplo, você pode querer saber se uma imagem tem um atributo de ID HTML e qual é o valor desse atributo.
Às vezes, a guia "Elementos" é uma maneira melhor de "ver a origem" de uma página. Na guia "Elements", o DOM da página será formatado corretamente, mostrando facilmente os elementos HTML, a ancestralidade e os descendentes. Muitas vezes, as páginas que você visita têm HTML minificado ou simplesmente feio, o que dificulta a visualização da estrutura da página. A guia "Elementos" é a solução para conferir a estrutura real da página.
Por exemplo, a saída a seguir é do "view source" da página inicial do Google.
É difícil ler a fonte acima porque ela é otimizada e minimizada. O formato é bom para clientes e servidores, mas difícil para desenvolvedores.
Em vez disso, quando você quiser ler a origem de uma página, use a guia "Elements" para conferir uma hierarquia de elementos com sintaxe destacada e bem impressa.
A guia "Elementos" também permite navegar, interagir e, às vezes, até mesmo mudar os estilos, as métricas, as propriedades e os listeners de eventos de qualquer elemento na página.
Navegação de estilos
A natureza em cascata do CSS torna o navegador de estilos na guia "Elements" muito útil. Às vezes, os estilos se sobrepõem e aparecem elementos visuais indesejados. Saber qual regra de estilo o navegador está aplicando ao elemento ajuda a depurar esse problema.
Clique em qualquer elemento na guia "Elementos" para mostrar todos os estilos anexados a ele.
Na captura de tela acima, é possível ver todos os atributos de estilo que estão sendo aplicados. Por exemplo, o padding vem diretamente do atributo de estilo do elemento <img>. No entanto, a largura e a altura vêm dos respectivos atributos nativos. É interessante notar que há estilos também herdados da tag <center>, da tag <body> e de outras.
É ótimo ver os estilos individuais e de onde eles vêm, mas também é muito útil conferir o conjunto final de estilos depois que ele é calculado e aplicado ao elemento. Para conferir o produto final, selecione o menu "Computed Style", conforme mostrado na captura de tela abaixo.
A seguir, vamos dar uma breve olhada nos outros recursos fornecidos pela guia "Elementos". Vamos abordar os seguintes pontos com mais detalhes em artigos futuros.
Modelo de caixa
Para conferir o modelo de caixa aplicado ao elemento selecionado, selecione o menu "Métricas":
Propriedades do elemento
Você pode conferir todas as propriedades do elemento, como o JavaScript e o DOM, selecionando o menu "Properties":
Escutas de evento
Por fim, você pode conferir os listeners de eventos anexados ao elemento ou que aparecem nele pelo menu "Event Listeners":
Resumo
Há muitas funcionalidades disponíveis na guia "Elementos", e artigos futuros vão se aprofundar nos menus individuais.
Use a guia "Elements" quando quiser saber como a página aparece para o navegador. Problemas comuns, como "como esse estilo é calculado?" ou "quais tags HTML geraram esse componente?", são respondidos de forma rápida e fácil na guia "Elementos".
Pense na guia "Elementos" como uma fonte de visualização e tenha uma visibilidade muito precisa da sua página.
Depois de investigar a página, você pode se perguntar como o HTML, o CSS e as imagens foram parar lá. A guia "Resources", descrita a seguir, mostra como o navegador cliente e o servidor da Web se comunicam para enviar esses recursos.
Recursos
Depois que o aplicativo estiver funcionando, a próxima etapa será otimizar a rede e a performance da largura de banda. O objetivo é tornar a transferência do aplicativo, do servidor para o cliente, o mais rápida e eficiente possível. Os usuários vão agradecer por carregar as páginas rapidamente, você vai economizar dinheiro com largura de banda e recursos do servidor e também vai ter uma pontuação melhor na classificação dos resultados da pesquisa do Google, que agora leva em conta a velocidade do site.
A guia "Recursos" nas Ferramentas para Desenvolvedores é a janela para a comunicação entre o servidor da Web e o navegador do cliente. Você pode conferir todos os recursos solicitados pelo navegador (isso é sempre muito surpreendente), o tempo que leva para recebê-los do servidor e a quantidade de largura de banda usada durante a transferência.
Ironicamente, a execução da guia "Recursos" afeta o desempenho do carregamento da página. Por isso, ela é desativada por padrão. Na primeira vez que você acessar a funcionalidade, será necessário ativá-la para a página que está sendo visualizada.
Recomendamos que você deixe a opção padrão "Ativar apenas para esta sessão" selecionada, para não sofrer uma pequena penalidade de desempenho. Depois de clicar em "Ativar o rastreamento de recursos", a página será atualizada e as Ferramentas para desenvolvedores vão monitorar e mostrar os recursos enviados pelo servidor.
A captura de tela a seguir mostra os recursos necessários e carregados para a página inicial do Google.
Há muitas informações nessa tela, então vamos analisar cada parte.
O comportamento padrão é mostrar quanto tempo levou para solicitar e carregar todos os recursos da página. Talvez você se surpreenda ao rolar a lista de recursos, porque pode não saber quantas solicitações individuais o cliente está fazendo. Um grande número de solicitações do cliente pode afetar seriamente a performance. A primeira etapa para otimizar e reduzir os recursos é ter visibilidade sobre o que exatamente é solicitado.
Se você tiver interesse apenas em imagens ou folhas de estilo, filtre o tipo de recurso usando o menu diretamente na janela da guia principal.
Você também vai aprender a ordem em que os recursos são solicitados. Com a exibição da linha do tempo, você pode entender melhor por que alguns elementos na sua página aparecem mais tarde do que outros.
Depois de ter uma visão geral de todos os recursos solicitados e como eles compõem toda a linha do tempo da solicitação, é necessário detalhar os recursos individuais.
Se você notar que alguns recursos estão sendo solicitados sempre que acessa a página, isso indica que os cabeçalhos de armazenamento em cache não estão configurados corretamente. Para conferir todos os cabeçalhos de um recurso, clique nele na lista à esquerda.
Use a tela "Cabeçalhos" para garantir que o código de resposta HTTP esperado seja definido e que os cabeçalhos adequados sejam fornecidos. Por exemplo, se o recurso raramente ou nunca for alterado, o servidor precisará definir um cabeçalho Expires para um futuro distante. Isso informa ao navegador que o recurso não pode ser solicitado novamente até essa data. Isso reduz a quantidade de conexões HTTP necessárias para a página, acelerando o site.
Resumo
Há muito mais na guia "Recursos", que vamos abordar em um artigo futuro.
Use a guia "Resources" para saber como o navegador do cliente está se comunicando com o servidor da Web. Com essas informações, incluindo o tempo, o tamanho e a ordem das solicitações, é possível fazer otimizações inteligentes para reduzir a carga do servidor e os custos, além de aumentar a velocidade e melhorar a experiência do usuário.
A velocidade é muito importante para seu site, seus usuários e os mecanismos de pesquisa. Depois de reduzir o número e o tamanho dos recursos e de ocorrerem as conversas HTTP adequadas, a próxima etapa é investigar e otimizar os scripts em execução na sua página. Felizmente, a guia "Scripts", que será abordada a seguir, faz exatamente isso.
Outros recursos
Para mais informações sobre as ferramentas para desenvolvedores, recomendamos o seguinte:
- Vídeo e slides da apresentação das Ferramentas para desenvolvedores do Chrome no Google I/O 2010
- Tutorial das Ferramentas para desenvolvedores do Chrome
E, claro, fique de olho no html5rocks.com para conferir a Parte 2 deste artigo e muito mais conteúdo incrível sobre HTML5 e Chrome.