O documento descreve o Chrome DevTools, uma ferramenta do Google Chrome que permite aos desenvolvedores inspecionar e debugar páginas da web. Ele fornece várias ferramentas como Elements, Network, Sources e Timeline que ajudam a analisar o código, recursos, desempenho e depuração de JavaScript de uma página. O DevTools permite que desenvolvedores vejam e modifiquem páginas ao vivo sem precisar sair do navegador.

1. Chrome DevTools
Uma ótima alternativa para debug do seu front-end no Google
Chrome

2. Diego Melo
Desenvolvedor - Universidade Tiradentes
github.com/diegomelo182

3. Introdução
O Chrome DevTools(DevTools) é uma ferramenta que auxilia o
desenvolvedor web de modo que o mesmo tenha acesso ao código
fonte da página e possa alterar o comportamento padrão da mesma
em tempo real diretamente no Chrome, sem a necessidade de
voltar para a IDE ou editor.
Emular dispositivos móveis e testar a performance da página são
algumas das possibilidades possíveis.

4. Por onde começo?
Aperte Ctrl+Shift+I (ou Cmd+Opt+I no Mac) para abrir o DevTools.
Aperte Ctrl+Shift+J (ou Cmd+Opt+J no Mac) para abrir o DevTools
com a aba de Console selecionada.
Aperte Ctrl+Shift+C (ou Cmd+Shift+C no Mac) para abrir o
DevTools no modo de inspecionar elemento.
Ou simplesmente aperte f12 (apenas windows e linux)

6. Ferramentas disponíveis
Elements
Resources
Network
Sources
Timeline
Pro les
Audits
Console

7. Elements
Com essa ferramenta é possível visualizar o código fonte da página
atual e como a folha de estilo se aplica a mesma, assim como a
possibilidade de modi car localmente a estrutura do html e desse
estilo.

9. Resources
Com essa ferramenta é possível visualizar os dados que a aplicação
armazenou em sua máquina tais como Cookies, arquivos de sessão,
dados do Web SQL, IndexedDB, cache, fontes, imagens, scripts,
folhas de estilo...

15. Network
Analisa quanto tempo é gasto para a sua aplicação carregar com
base na sua conexão, tudo isso de forma bastante detalhada e
separada por categorias facilitando assim na ltragem dos requests
que poderão estar causando lentidão na sua aplicação.

18. Sources
Com essa ferramenta é possível fazer o debug do javascript da
aplicação.

21. Timeline
Essa ferramenta analisa toda a atividade de sua aplicação e como
ela é executada, é nela o melhor lugar para começar a investigar
problemas de desempenho da sua aplicação.

24. Profiles
Essa ferramenta permite traçar o per l do tempo de execução e uso
de memória da sua aplicação, nela temos dois per s: um de CPU e
outro de Heap, eles ajudarão a compreender onde os recursos
estão sendo gastos, e assim ajudá-lo a otimizar seu código.

26. Audits
Essa ferramenta analisa toda a sua aplicação e exibe dicas para
obter um melhor desempenho, como por exemplo: ativar
compactação gzip, diminuição do tamanho dos cookies, mini car o
JS e muito mais.

28. Console
Essa ferramenta como o próprio nome já diz se trata de um console
onde podemos inserir e testar nossos códigos JS, vendo o resultado
sendo impresso no mesmo momento, algo bastante parecido com o
vemos no IRB (Ruby) por exemplo.

29. Fim
Obrigado ;)