Debugar seu código é importante, pois muitas vezes é preciso descobrir onde está o problema de um código que não está funcionando como esperado, e a ferramenta do desenvolvedor do Chrome é uma ótima ferramenta para descobrir onde está o seu problema. Este post vai te dar algumas dicas se você está iniciando nos estudos de HTML, CSS e Javascript
Para ter acesso ao console do Chrome, você pode usar o atalho Ctrl + Shift + j no Windows, ou Cmd + Option + i no Mac OSX. Outra forma de acessar é clicar com o botão direito do mouse e selecionar a opção Inspecionar
Elements
A aba elements mostra o código HTML da página atual que você está visualizando. É possível clicar nas setinhas para abrir ou fechar os blocos de código
A sessão lateral à direita mostra também o css que está sendo aplicado no elemento que você selecionou no HTML. No exemplo da imagem, foi selecionado a tag H1, com o conteúdo Elements, e na direita verifica-se que ele possui font-size de 2em, e margin de 0.67em e 0
Essa aba permite que você veja se o HTML está se comportando da forma esperada, então é possível verificar se as tags estão fechando corretamente caso a página esteja com um visual inesperado. Além disso é possível ver se os estilos estão sendo aplicados corretamente nas tags que você quer
Outra observação interessante é que você pode alterar os valores na sessão direita, mudando em tempo real o estilo da página que está sendo visualizada, para ajustes finos do seu css
Console
Esta aba está relacionada com o JavaScript. É possível digitar comandos em JavaScript onde o cursor aparece, e testar diretamente funções que você tenha carregado na sua página
Se seu código JavaScript não está funcionando corretamente, quaisquer erros que ocorrem durante a execução aparecem nesta aba. Uma dica para verificar se sua função está sendo chamada é por um console.log no seu código, e este também aparecerá nesta aba
Sources
Esta aba permite ver todos os arquivos que estão relacionados ao seu HTML, como arquivos JavaScript e arquivos CSS. Basta acessar eles a partir da árvore de arquivos na lateral esquerda
Além disso, uma ótima funcionalidade desta aba é para debugar o seu JavaScript. Se você usar a palavra-chave debugger no seu código JavaScript, com a ferramenta do desenvolvedor aberta, no momento que seu código JavaScript for chamado sua execução será pausada no local onde você inseriu esse comando
Se você digitar ESC, você conseguirá trazer a funcionalidade da aba Console ao mesmo tempo que visualiza a aba Sources, e digitando no console o nome das variáveis, ou usando elas em outros comandos JavaScript, você consegue checar seus valores e verificar o que está acontecendo durante a execução
Estas abas são extremamente úteis e serão muito usadas na sua vida como desenvolvedor Web. Em um outro post no futuro falarei um pouco das outras abas da ferramenta do desenvolvedor