Introdução às “Ferramentas do desenvolvedor” do Google Chrome/Chromium

Já faz um bom tempo que eu não posto nada por aqui, mas estou voltando com uma nova série de posts. Vou apresentar o conjunto de Ferramentas do desenvolvedor do Google Chrome/Chromium. Quem trabalha com desenvolvimento Web muito provavelmente já conhece todas as ferramentas (pelo menos deveria). Alguns preferem utilizar a extensão Firebug (originalmente para Firefox, mas disponível também para Chrome). Eu particularmente não gosto muito, mas cada usa o que achar melhor 😉

ESTE É UM POST ANTIGO

Este post foi importado do antigo blog e o seu conteúdo não foi revisado. O conteúdo deve estar desatualizado e a formatação pode apresentar problemas.

Para começar, vejamos como abrir esse conjunto de ferramentas:

Ctrl + Shift + I

Mais fácil impossível, né? OK, e agora? Vejamos o que é possível fazer com todas essas ferramentas

Cabeçalho do Console

  • Elements: aqui é possível editar a página dinamicamente sem alterar os arquivos originais nem recarregar a página. É muito útil para testar, por exemplo, estilos CSS para encontrar a melhor combinação.
  • Resources: permite acesso aos recursos utilizados pela sua aplicação web (itens carregados na página, armazenamento local HTML 5, cookies, cache, etc.).
  • Network: exibe as requisições da página como, por exemplo, imagens e scripts externos, permitindo analisar o uso de tráfego gerado pela sua aplicação.
  • Scripts: seção específica para manipular os scripts (externos ou não) carregados pela página.
  • Timeline: como o nome diz, permite analisar o uso do tempo feito pela página, quanto tempo foi necessário para ser carregada e exibida na tela, enfim, informações úteis para otimizar sua aplicação.
  • Profiles: analisa o uso de CPU da sua página. É bom garantir que sua página não vai travar o sistema de quem tentar exibi-la (principalmente se o usuário estiver usando Windows).
  • Audits: também exibe informações para otimizar sua página, mas principalmente relacionado a padrões de código HTML que pode melhorar o desempenho da página.
  • Console: console JavaScript. Exibe erros e informações dos scripts executados e permite interagir com a página executando rapidamente qualquer linha de código JavaScript.

Nos próximos post vou mostrar detalhadamente o uso de cada uma dessas ferramentas, então fique ligado 😀

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *