O Chrome DevTools é uma ferramenta embutida no navegador Chrome e que pode ser acessada através da tecla F12 ou com a combinação de teclas Ctrl+Shift+I. Ela oferece uma série de recursos para quem está desenvolvendo ou fazendo a manutenção/otimização de um site.

Esse tipo de ferramenta não é uma exclusividade do Google Chrome, ela também existe no Mozilla Firefox (tecla F12) e no Opera (CTRL + Shift + I). No caso do Opera a ferramenta é idêntica a do Chrome. Já no Firefox ela é diferente.

Existem diversas funções úteis para os desenvolvedores web, na minha opinião as mais úteis são: as informações de tempo de carregamento do site (menu “network”, no alto da tela no centro a direita), a seleção de itens visualmente e a identificação destes itens no código da página e a visualização em “modo mobile”. Agora falarei um pouco sobre a visualização mobile e a localização de itens no código-fonte.

F12 – Chrome DevTools – vista mobile e identificação de itens no código-fonte

F12 Mobile Google Chrome

O botão indicado pela seta vermelha permite a mudança para a visualização em modo responsivo.

Ao clicar no botão indicado na imagem (Toogle Device Toolbar) aparecerá uma barra acima da janela onde o site é exibido. Através dessa barra é possível selecionar alguns perfis de smartphones e tablets, definir um tamanho personalizado para a visualização, alternar o modo de orientação do site (simulando a vista com o celular de pé ou deitado), exibir réguas e outros recursos mais.

F12 Google Chrome

Caixa de seleção que permite escolher alguns perfis de smartphones e tablets pré-cadastrados

Essas opções em conjunto com a exibição do código-fonte e folhas de estilo da página auxiliam bastante quem está desenvolvendo ou mantendo algum site. Ainda mais quando é possível selecionar visualmente um item e identificar a localização dele no código, junto com suas propriedades no CSS. Essa tarefa é possível através de outro botão, como mostra a imagem a seguir.

Google Chrome DevTools

Clicando no botão indicado na imagem é possível selecionar um item na visualização do site e ver o código referente ao item selecionado.

DevTools

Selecionei o bloco abaixo do vídeo e na janela da direita eu tenho o código que se refere ao bloco selecionado.

O Chrome DevTools é uma mão na roda para quem trabalha com desenvolvimento web ou mantém um site pessoal e precisa fazer alguns ajustes. A ferramenta possui diversas funções além dessas que citei aqui. Se você quiser saber mais sobre o DevTools acesse o site: https://developers.google.com/web/tools/chrome-devtools/ (em inglês)