DevTools para Rails
DevTools para Rails trata das abas Network e Console do navegador, usadas para diagnosticar um app Rails. A aba Network mostra cada requisição de uma página, dos assets com fingerprint às fontes e bibliotecas de terceiros. As aulas abrem as abas Headers, Preview, Response, Initiator e Timing de uma requisição. Também leem um envio de form_with na aba Payload e ligam códigos como 302, 422 e 400 ao resultado do formulário. A aba Console serve para ler erros de JavaScript. A última aula junta Elements, Network e Console numa ordem de diagnóstico.
O que você vai aprender
- ✓Ler a lista de requisições da aba Network e as colunas Status, Type, Size e Time
- ✓Abrir as abas Headers, Preview, Response, Initiator e Timing de uma requisição
- ✓Ler um envio de formulário Rails e seu authenticity_token na aba Payload
- ✓Relacionar códigos como 302, 422 e 400 ao resultado de um formulário Rails
- ✓Ler erros e avisos de JavaScript na aba Console
- ✓Checar Console, Network e Elements numa ordem útil de diagnóstico
DevTools além do elements
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…
Ler a aula completa grátis →Currículo
7 aulasDevTools além do elements
Apresenta as abas Network e Console e como cada uma explica uma causa diferente para o mesmo bug.
A aba network: toda requisição de uma página
Lê cada requisição de uma página Rails, com assets com fingerprint, fontes de terceiros, bibliotecas em CDN e colunas principais.
Clicando dentro de uma requisição
Abre uma requisição para ler as abas Headers, Preview, Response, Initiator e Timing e o que cada uma mostra.
A aba payload e um formulário Rails real
Lê um envio de form_with na aba Payload, com os nomes de campo entre colchetes e o authenticity_token enviado.
Status codes que você já conhece, agora visíveis
Mostra códigos de status na aba Network: redirecionamentos em duas linhas, resultados de formulário como 302, 422 e 400, e filtros.
A aba console: diagnóstico, não só edição
Usa o Console para ler erros e avisos de JavaScript, a contraparte no navegador do log de desenvolvimento do servidor.
Elements, network, console: juntando tudo
Junta Elements, Network e Console numa ordem de diagnóstico: primeiro o Console, depois o Network e por último o Elements.