Introdução
O Google Chrome é um navegador da web rico e poderoso, sendo pioneiro no que é possível para aplicativos na web. O Google trabalhou muito para oferecer uma experiência de navegação avançada, estável e com recursos para os usuários finais. O Google também garantiu 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 profundo às configurações internas do navegador e aos aplicativos da Web deles.
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, as capturas de tela foram feitas usando o Google Chrome 6, portanto, pode haver pequenas diferenças no seu navegador.
Neste artigo, vamos apresentar uma visão geral das Ferramentas para desenvolvedores e destacar os recursos mais usados e úteis. Nosso público-alvo são desenvolvedores da 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 da Web experiente, pode aproveitar uma ou duas dicas.
Se sua instância das Ferramentas para desenvolvedores não corresponder às capturas de tela encontradas neste artigo, recomendamos que você faça upgrade para a versão 5. Assim, é possível 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 das Ferramentas para desenvolvedores, e os recursos são ampliados 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, com a ferramenta Elementos, você pode ver o HTML bruto, estilos de CSS brutos e o modelo de objeto do documento e manipulá-los em tempo real.
Recursos
Use a ferramenta Recursos para saber quais componentes a página da Web ou o aplicativo estão solicitando dos servidores da Web, quanto tempo essas solicitações levam e quanta largura de banda é necessária. Também é possível visualizar os cabeçalhos HTTP de solicitação e resposta para cada um dos seus recursos. A ferramenta Recursos é perfeita para ajudar você a acelerar o 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 completo de scripts. Você pode até mudar o JavaScript em tempo real!
Cronograma
Para análise avançada de tempo e velocidade, a ferramenta Linha do tempo oferece visibilidade detalhada das diversas atividades em segundo plano do Chrome. Você pode saber quanto tempo o navegador leva para lidar com eventos DOM, renderizar layouts de páginas e pintar a janela.
Perfis
A ferramenta Perfis ajuda-o a capturar e analisar o desempenho de scripts JavaScript. Por exemplo, você pode saber quais funções levam mais tempo para serem executadas e identificar exatamente onde otimizar.
Armazenamento
Os aplicativos da Web modernos exigem mais persistência do que simplesmente cookies, e a ferramenta de armazenamento ajuda a monitorar, consultar e depurar o armazenamento local do navegador. Essa ferramenta pode exibir 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 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 definitivamente não menos importante, as Ferramentas para desenvolvedores oferecem um Console completo. No console, você pode inserir JavaScript arbitrário e interagir de forma programática com sua página.
Inicialização
É fácil iniciar as Ferramentas para desenvolvedores no Chrome.
Para qualquer sistema operacional, basta clicar com o botão direito do mouse em qualquer elemento na página e selecionar a opção "Inspecionar elemento" no menu de contexto. Isso abrirá as Ferramentas para desenvolvedores e detalhará o elemento em que você clicou.
Para ver isso em ação, acesse http://www.google.com no navegador Chrome. Clique com o botão direito do mouse no logotipo do Google para ver as seguintes opções:
Ao selecionar "Inspecionar elemento", as Ferramentas para desenvolvedores serão mostradas, com a seguinte aparência:
As Ferramentas para desenvolvedores foram abertas dentro da guia "Elementos" e automaticamente detalharam e destacaram a tag <img> do logotipo do Google. Isso é muito útil quando você está curioso para saber qual HTML gerou um determinado elemento de página.
Também é possível abrir as Ferramentas para desenvolvedores com um simples atalho de teclado. Dependendo do sistema operacional, tente o seguinte:
- No Windows e no Linux, selecione as chaves
Control-Shift-J. - No Mac, selecione as teclas
Command-Option-J.
Por fim, você pode optar por abrir as ferramentas no menu principal do navegador.
Em um Mac, e na barra de menus principal do aplicativo, selecione Visualizar, Desenvolvedor e Ferramentas do desenvolvedor.
Em um PC Windows, use o menu Página no canto superior direito e selecione Desenvolvedor, Ferramentas para desenvolvedores.
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 das Ferramentas para desenvolvedores é a seção "Elementos". Esta é a janela da estrutura da página da Web, apresentada como o navegador a vê.
Navegação por DOM
Você vai visitar as guias Elementos com frequência quando precisar identificar o snippet HTML de algum aspecto da página. Por exemplo, talvez você queira saber se uma imagem tem um atributo de código HTML e qual é o valor desse atributo.
A guia "Elementos" por vezes é uma maneira melhor de "visualizar o código-fonte" de uma página. Dentro da guia Elementos, o DOM da página estará bem formatado, mostrando facilmente os elementos HTML, seus ancestrais e descendentes. Muitas vezes, as páginas que você visita terão HTML reduzido ou simplesmente feio, o que dificulta a visualização da estrutura da página. A guia Elementos é a solução para visualizar a estrutura subjacente real da página.
Por exemplo, esta é a saída da "visualização fonte" 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 a fonte de uma página, use a guia Elementos para visualizar uma hierarquia de elementos bem impressa e destacada por sintaxe.
A guia Elementos também permite que você navegue, interaja e, às vezes, altere os estilos, métricas, propriedades e listeners de eventos para qualquer elemento na página.
Navegação por estilos
A natureza em cascata do CSS torna o navegador Estilos na guia Elementos muito útil. Às vezes, os estilos caem sobre si mesmos e surgem 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 exibir todos os estilos anexados a esse elemento.
A captura de tela acima mostra que todos os atributos de estilo estão sendo aplicados. Por exemplo, o padding vem diretamente do atributo de estilo do elemento <img>. A largura e a altura, no entanto, são provenientes dos respectivos atributos nativos. Há estilos também herdados das tags <center>, <body> e 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 "Estilo computado", como mostrado na captura de tela abaixo.
A seguir, veremos rapidamente os outros recursos fornecidos pela guia Elementos. Vamos abordar os detalhes a seguir em artigos futuros.
Modelo de caixa
Para conferir o modelo de caixa conforme ele é aplicado ao elemento selecionado, selecione o menu "Métricas":
Propriedades do elemento
É possível ver todas as propriedades do elemento, como o JavaScript e o DOM veriam, selecionando o menu Propriedades:
Listeners de eventos
Por fim, é possível até ver os listeners de eventos anexados ao elemento ou que aparecem em bolhas por meio do menu Event Listeners:
Resumo
Há muitas funcionalidades disponíveis na guia "Elementos", e os próximos artigos serão detalhados sobre os menus individuais.
Você deve usar a guia Elementos quando quiser ver como a página é exibida para o próprio navegador. Problemas comuns, como "como este estilo é calculado?" ou "quais tags HTML geraram este componente?" são resolvidos de maneira rápida e fácil com a guia "Elementos".
Pense na guia Elementos como uma "fonte de visualização" uber-" e ganhe visibilidade muito nítida em sua página.
Depois de investigar a página, você pode estar se perguntando como o HTML, CSS e as imagens chegaram lá. A guia Recursos, descrita a seguir, mostra como o navegador 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, do servidor para o cliente, seja a mais rápida e eficiente possível. Seus usuários vão agradecer pelo carregamento rápido de página, você economizará dinheiro com a largura de banda e os recursos do servidor e também sua pontuação melhor nas classificações de resultados da pesquisa do Google (que agora levam em consideração a velocidade do site).
A guia "Recursos" das Ferramentas para desenvolvedores é a janela da comunicação entre o servidor da Web e o navegador do cliente. Você pode ver 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 de 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á visualizando.
Recomendamos que você mantenha a opção padrão "Ativar somente para esta sessão" selecionada, já que isso não representa uma pequena penalidade de desempenho. Depois de clicar em "Ativar rastreamento de recursos", a página será atualizada, e as Ferramentas para desenvolvedores vão monitorar e exibir 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 nesta tela, então vamos analisar por partes.
O comportamento padrão é mostrar quanto tempo levou para solicitar e carregar todos os recursos para a página. Rolar para baixo a lista Resources pode ser surpreendente, 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 gravemente o desempenho. Conseguir visibilidade sobre o que é solicitado é a primeira etapa para a otimização e eventual redução de recursos.
Se estiver interessado apenas em imagens ou folhas de estilo, filtre o tipo de recurso usando o menu diretamente abaixo da janela da guia principal.
Você também aprenderá a ordem em que os recursos são solicitados. Com a exibição da linha do tempo, você pode entender melhor por que certos elementos da sua página aparecem depois de outros.
Depois de ter uma visão geral de todos os recursos solicitados e como eles compõem todo o cronograma de solicitações, detalhe os recursos individuais.
Se você perceber que alguns recursos estão sendo solicitados sempre que acessar a página, é um sinal de que os cabeçalhos de armazenamento em cache não estão configurados corretamente. Para visualizar todos os cabeçalhos de um recurso, clique nele na lista à esquerda.
Use a exibição "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 for alterado, o servidor deverá definir um cabeçalho "Expires" para uma data futura. Isso vai informar 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, acelerando o site.
Resumo
Há muito mais na guia "Recursos", que abordaremos em um futuro artigo.
Use a guia Recursos para saber como o navegador do cliente se comunica com o servidor da Web. Com essas informações, incluindo tempo, tamanho e ordem da solicitação, é possível fazer otimizações inteligentes para reduzir a carga e os custos do servidor, aumentar a velocidade e melhorar a experiência do usuário.
A velocidade é muito importante para seu site, para seus usuários e para os mecanismos de pesquisa. Depois que você reduzir o número e o tamanho dos recursos e as conversas HTTP apropriadas estiverem ocorrendo, a próxima etapa será investigar e otimizar os scripts em execução na página. Felizmente, a guia "Scripts", discutida a seguir, faz exatamente isso.
Outros recursos
Para mais informações sobre as Ferramentas para desenvolvedores, temos as seguintes recomendações:
- Vídeo e slides de apresentação das Ferramentas para desenvolvedores do Chrome do Google I/O 2010
- Tutorial das Ferramentas para desenvolvedores do Chrome
E, é claro, fique atento ao site html5rocks.com para a Parte 2 deste artigo, junto com muitos outros excelentes conteúdos de HTML5 e Chrome.