DevTools além do elements

Uma ferramenta, já meio coberta

O curso "Fundamentos do DOM" passou uma aula inteira dentro do DevTools. Abriu o painel Elements, passou o mouse sobre nós para destacá-los, editou texto ao vivo e mostrou que o View Source exibe HTML congelado enquanto o Inspect exibe o DOM ao vivo. O assunto daquela aula era o DOM. Este curso cobre as duas abas ao lado do Elements, Network e Console, lidas para diagnosticar um app Rails.

Por que essas duas merecem seu próprio curso

O Elements mostra o que uma página é, estruturalmente, agora. O Network mostra o que a página pediu (cada arquivo, cada requisição) e o que voltou. O Console mostra o que o JavaScript da página está dizendo: erros, avisos, mensagens de log deliberadas. Um bug que parece igual no Elements, um layout quebrado por exemplo, pode ter causas diferentes dependendo de qual aba o explica: uma requisição que falhou ou uma exceção JavaScript.

O que esse curso cobre

1. A lista de requisições da aba Network, lida contra a própria página real e ao vivo deste projeto.
2. O que clicar numa única requisição revela, verificado contra a própria documentação atual do Chrome.
3. A aba Payload especificamente, e o corpo de requisição real de um envio de formulário Rails de verdade.
4. Status codes, já cobertos como conceitos HTTP, agora vistos de verdade nessa exata aba.
5. A aba Console, lida para diagnóstico e não para a edição ao vivo que "Fundamentos do DOM" mostrou.
6. Juntar Elements, Network e Console, e o que vem a seguir.