Para acessar tais ferramentas, abra o Google Chrome e clique no botão de “configurações” (menu Chrome). Em seguida, vá em “Mais ferramentas” ==> “Ferramentas do desenvolvedor”. Outra maneira de acessar tais ferramentas de debug é simplesmente pressionando F12.
Observe que a janela das ferramentas para desenvolvedores do Chrome será aberta por padrão na parte inferior do navegador, mas você pode alterar seu posicionamento (trazendo-a para a lateral direita do navegador) simplesmente clicando no pequeno botão abaixo demonstrado, localizado imediatamente antes do botão “X” (o qual fecha a janela):
Também é possível destacar a janela totalmente, tornando-a independente. Para isto, mantenha o botão acima pressionado e clique, logo em seguida, no botão .
Esta aba permite que o desenvolvedor obtenha acesso ao DOM das páginas. Blocos de código podem ser expandidos ou “colapsados” (você quer /precisa visualizar/editar apenas determinada classe, por exemplo). Note que o código é renderizado em “tempo real”, incluindo alterações realizadas por javascript. Qualquer elemento do site pode ser alterado através da aba “Elements”; o desenvolvedor pode inspecionar o HTML e o CSS, por exemplo, além de testar vários layouts.
É possível navegar pela debug tool até o elemento desejado, no próprio projeto/página, ou então podemos simplesmente acessá-lo diretamente, no próprio site. Para isto, basta localizá-lo, clicar sobre o mesmo com o botão direito do mouse e então, no menu de contexto, utilizar a opção “Inspecionar elemento”:
O elemento selecionado será então destacado na janela das ferramentas para desenvolvedores do Chrome, e poderá inclusive ser alterado. Uma outra maneira de inspecionar os elementos é abrir diretamente as DevTools do Chrome no modo de inspeção. Para isto, antes de qualquer coisa, utilize as teclas de atalho “CTRL+SHIFT+C” (lembre-se de que este atalho pode ser usado a qualquer momento – com a ferramenta já aberta no navegador, ele alterna para o modo de inspeção).