Introdução
O Google Chrome é um navegador da web avançado e avançado, pioneiro no que é possível para aplicativos na web. O Google trabalhou muito para oferecer aos usuários finais uma experiência de navegação muito rápida, estável e avançada. O Google também garantiu que desenvolvedores como você tenham uma ótima experiência com o Chrome. As Ferramentas para desenvolvedores, agrupadas e disponibilizadas no Chrome e no Safari, permitem que desenvolvedores e programadores da Web tenham acesso profundo às configurações internas do navegador e ao aplicativo da Web.
As Ferramentas para desenvolvedores fazem parte do projeto de código aberto Webkit. A maior parte das discussões neste artigo se aplica ao Google Chrome e ao Safari. No entanto, como as capturas de tela foram feitas com o Google Chrome 6, pode haver pequenas diferenças no seu navegador.
Neste artigo, faremos um tour geral das Ferramentas para desenvolvedores e destacaremos seus recursos mais populares e úteis. Nosso público-alvo são desenvolvedores Web que não conheciam ou que ainda não investigaram as Ferramentas para desenvolvedores. No entanto, temos certeza de que mesmo que você seja um desenvolvedor Web experiente, você vai ganhar uma dica ou duas.
Se sua instância das Ferramentas para desenvolvedores não corresponder às capturas de tela encontradas neste artigo, recomendamos o upgrade para a versão 5. Assim, você poderá acompanhar e ter acesso a todos os recursos descritos aqui.
Visão geral
No geral, há oito grupos principais de ferramentas disponíveis na visualização "Ferramentas para desenvolvedores", e os recursos são estendidos a cada versão. O Chrome 5 agora oferece elementos, recursos, scripts, linha do tempo, perfis, armazenamento, auditorias e console.
Elementos
A ferramenta Elementos permite que você veja a página da Web como o navegador a vê. Ou seja, ao usar a ferramenta Elementos, você pode ver o HTML bruto, os estilos CSS brutos, o Document Object Model 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 ver os cabeçalhos de solicitação e resposta HTTP de cada um dos recursos. A ferramenta Recursos é perfeita para ajudar você a acelerar o tempo de carregamento da página.
Scripts
Para visualizar o interior do JavaScript de uma página, você usará a ferramenta Scripts. Aqui você encontra uma lista de scripts exigidos pela página, além de um depurador de scripts completo. É até mesmo possível alterar o JavaScript em instantes!
Cronograma
Para análises avançadas de tempo e velocidade, a ferramenta Linha do tempo oferece visibilidade detalhada das várias atividades nos bastidores do Chrome. Você pode descobrir quanto tempo o navegador leva para lidar com eventos DOM, renderizar layouts de página e colorir a janela.
Perfis
A ferramenta Perfis ajuda você a capturar e analisar o desempenho de scripts JavaScript. Por exemplo, é possível descobrir quais funções levam mais tempo para serem executadas e focar exatamente onde otimizar.
Armazenamento
Os aplicativos da Web modernos exigem mais persistência do que simplesmente cookies, e a ferramenta Storage ajuda você a rastrear, consultar e depurar o armazenamento local do navegador. Essa ferramenta pode exibir e consultar dados armazenados em bancos de dados, armazenamento local, armazenamento de sessão e cookies.
Auditar
A Ferramenta de auditoria é como ter seu próprio consultor de otimização da web ao seu lado. Essa ferramenta pode analisar uma página enquanto ela carrega e fornecer sugestões e otimizações para a diminuição do tempo de carregamento da página e aumentar a capacidade de resposta percebida (e real).
Console
Por último, mas não menos importante, as Ferramentas para desenvolvedores oferecem um console completo. No console, você pode inserir JavaScript arbitrário e interagir programaticamente com sua página.
Iniciando
É fácil iniciar as Ferramentas para desenvolvedores dentro do Chrome.
Para 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 detalhar o elemento em que você clicou.
Para conferir como isso funciona, acesse http://www.google.com no navegador Chrome. Clique com o botão direito do mouse no logotipo do Google para exibir as seguintes opções:
A seleção de "Inspecionar elemento" abrirá as Ferramentas para desenvolvedores, que devem ser semelhantes a esta:
As Ferramentas para desenvolvedores abrem na guia "Elementos" e são automaticamente detalhadas e destacadas na tag <img> do logotipo do Google. Isso é muito útil quando você está curioso para saber qual HTML gerou um elemento de página específico.
Também é possível abrir as Ferramentas para desenvolvedores com um simples atalho de teclado. Dependendo do seu sistema operacional, tente o seguinte:
- No Windows e no Linux, selecione as chaves
Control-Shift-J. - No Mac, selecione as teclas
Command-Option-J.
Finalmente, você pode optar por abrir as ferramentas no menu principal do navegador.
No Mac, na barra de menus principal do aplicativo, selecione "Exibir", "Desenvolvedor", "Ferramentas para desenvolvedores".
Em um PC Windows, use o menu Página no canto superior direito e selecione "Desenvolvedor", "Ferramentas do desenvolvedor".
Agora que as Ferramentas para desenvolvedores estão abertas e prontas, vamos começar explorando os elementos da página inicial do Google.
Elementos
A primeira guia nas Ferramentas para desenvolvedores é Elementos. Essa é a janela para a estrutura da página da Web, apresentada como seu navegador a vê.
Navegação por DOM
Você visitará as guias Elementos com frequência quando precisar identificar o snippet HTML de algum aspecto da página. Por exemplo, você pode estar curioso para saber se uma imagem tem um atributo de ID HTML e qual é o valor desse atributo.
A guia Elementos é, por vezes, a melhor forma de "ver a fonte" de uma página. Na guia Elementos, o DOM da página estará bem formatado, mostrando facilmente os elementos HTML, sua ancestralidade e seus descendentes. Muitas vezes, as páginas que você visita terão HTML minificado ou simplesmente desagradável, o que dificulta a visualização de como a página está estruturada. A guia Elementos é a sua solução para visualizar a verdadeira estrutura subjacente da página.
Por exemplo, esta é a saída de "ver origem" da página inicial do Google.
É difícil ler a fonte acima porque ela está otimizada e reduzida. O formato é bom para clientes e servidores, mas difícil para os desenvolvedores.
Em vez disso, quando você quiser ler o código-fonte de uma página, use a guia Elementos para visualizar uma hierarquia de elementos, com sintaxe destacada e bem impressa.
A guia Elementos também permite navegar, interagir e, às vezes, até alterar 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 Elementos muito útil. Às vezes, os estilos se encolhem sobre si mesmos e elementos visuais indesejados aparecem. Saber qual regra de estilo o navegador está aplicando ao elemento ajuda a depurar esse problema.
Clique em qualquer elemento na guia Elementos para exibir todos os estilos associados a ele.
Na captura de tela acima, vemos que é possível informar 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 são provenientes dos respectivos atributos nativos. Curiosamente, também é possível notar que há estilos herdados da tag <center>, da tag <body>, entre outras.
Embora seja ótimo ver os estilos individuais e de onde eles vêm, também é muito útil ver o conjunto final de estilos depois que ele é calculado e aplicado ao elemento. Para conferir o produto final, selecione o menu de estilo computado, como mostrado na captura de tela abaixo.
A seguir, analisaremos brevemente outros recursos fornecidos pela guia "Elementos". Abordaremos o seguinte em mais detalhes em artigos futuros.
Modelo de caixa
Para ver o modelo de caixa aplicado ao elemento selecionado, selecione o menu "Métricas":
Propriedades do elemento
Para ver todas as propriedades do elemento como JavaScript e o DOM, selecione o menu "Propriedades":
Listeners de eventos
E, finalmente, você pode até mesmo ver os listeners de eventos anexados, ou aqueles balões pelo elemento, através do menu Listeners de eventos:
Resumo
Há muitas funcionalidades disponíveis na guia "Elementos", e artigos futuros vão se aprofundar nos menus individuais.
Use a guia Elementos quando quiser ver a aparência da página no próprio navegador. Problemas comuns, como "como este estilo é calculado?" ou "quais tags HTML geraram esse componente?" são respondidos de forma rápida e fácil com a guia Elementos.
Pense na guia Elementos como uma super"fonte de visualização" e obtenha visibilidade muito nítida de sua página.
Depois de investigar a página, você pode estar se perguntando como o HTML, o CSS e as imagens chegaram lá. A guia Recursos, descrita a seguir, mostra como o navegador do cliente e o servidor da Web se comunicam para enviar esses recursos.
Recursos
Quando seu aplicativo estiver funcionando, a próxima etapa será otimizar o desempenho da rede e da largura de banda. Procure fazer com que a transferência do seu aplicativo, de servidor para cliente, seja a mais rápida e eficiente possível. Seus usuários agradecerão pelos carregamentos de página rápidos, você economizará dinheiro com largura de banda e recursos de servidor e também terá uma pontuação melhor na classificação dos resultados de pesquisa do Google (que agora considera a velocidade do site).
A guia Recursos nas Ferramentas para desenvolvedores é sua janela para a comunicação entre o servidor da Web e o navegador cliente. Você consegue ver todos os recursos solicitados pelo navegador (isso é sempre muito surpreendente!), o tempo que leva para recebê-los do servidor e quanta largura de banda é usada durante a transferência.
Ironicamente, a execução da guia Recursos afeta o desempenho do carregamento da página. Portanto, ela fica desativada por padrão. Na primeira vez que acessar a funcionalidade, você precisará ativá-la para a página que estiver visualizando.
Recomendamos que você deixe a opção padrão "Ativar somente para esta sessão" selecionada, para não causar uma pequena penalidade de desempenho desnecessariamente. Quando você clicar em "Ativar o acompanhamento de recursos", a página será recarregada e as Ferramentas para desenvolvedores monitorarão e exibirão os recursos enviados do 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 por partes.
O comportamento padrão é mostrar quanto tempo levou para solicitar e carregar todos os recursos da página. Rolar a lista de Recursos pode se surpreender, pois você pode não saber quantas solicitações individuais estão sendo feitas pelo cliente. Um grande número de solicitações do cliente pode afetar muito o desempenho. A visibilidade do que foi solicitado é a primeira etapa para a otimização e eventual redução dos recursos.
Se estiver interessado apenas em imagens ou folhas de estilo, você pode filtrar o tipo de recurso usando o menu diretamente abaixo da janela da guia principal.
Você também vai saber a ordem em que os recursos são solicitados. Com a exibição da linha do tempo, é possível entender melhor por que certos elementos na sua página aparecem depois de outros.
Depois de ter uma visão geral de todos os recursos solicitados e de como eles compõem todo o cronograma de solicitações, detalhe os recursos individuais.
Se você notar que alguns recursos estão sendo solicitados sempre que acessar a página, isso é um sinal de que seus cabeçalhos de armazenamento em cache não estão configurados corretamente. Para visualizar todos os cabeçalhos de um recurso, clique no recurso na lista à esquerda.
Use a exibição de Cabeçalhos para garantir que o código de resposta HTTP esperado esteja definido e que os cabeçalhos apropriados sejam fornecidos. Por exemplo, se o recurso raramente ou nunca é alterado, o servidor deve definir um cabeçalho "Expires" para um futuro distante. Isso dirá ao navegador que o recurso não deve ser solicitado novamente até essa data. Isso reduz a quantidade de conexões HTTP necessárias para a página e acelera o site.
Resumo
Há muito mais informações sobre a guia Recursos, que abordaremos em um artigo futuro.
Use a guia Recursos para obter visibilidade sobre como o navegador cliente está se comunicando com o servidor da web. Usando essas informações, incluindo o tempo e o tamanho e o pedido das solicitações, é possível fazer otimizações inteligentes para reduzir a carga e os custos do servidor, além de aumentar a velocidade e aprimorar a experiência do usuário.
A velocidade é muito importante para seu site, seus usuários e mecanismos de pesquisa. Depois que o número e o tamanho dos recursos forem reduzidos e as conversas HTTP apropriadas ocorrerem, a próxima etapa será investigar e otimizar os scripts executados na página. Felizmente, a guia Scripts, discutida 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 "Ferramentas para desenvolvedores do Chrome" do Google I/O 2010
- Tutorial das ferramentas para desenvolvedores do Chrome
Fique ligado no html5rocks.com para ver a Parte 2 deste artigo, além de vários outros conteúdos incríveis sobre HTML5 e Chrome.