Chrome DevTools

Uma ótima alternativa para debug do seu front-end no GoogleChrome

Diego MeloDesenvolvedor - Universidade Tiradentes

github.com/diegomelo182

IntroduçãoO Chrome DevTools(DevTools) é uma ferramenta que auxilia o

desenvolvedor web de modo que o mesmo tenha acesso ao códigofonte da página e possa alterar o comportamento padrão da mesma

em tempo real diretamente no Chrome, sem a necessidade devoltar para a IDE ou editor.

Emular dispositivos móveis e testar a performance da página sãoalgumas das possibilidades possíveis.

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 DevToolscom a aba de Console selecionada.Aperte Ctrl+Shift+C (ou Cmd+Shift+C no Mac) para abrir oDevTools no modo de inspecionar elemento.Ou simplesmente aperte f12 (apenas windows e linux)

Ferramentas disponíveisElementsResourcesNetworkSourcesTimelinePro�lesAuditsConsole

ElementsCom 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 apossibilidade de modi�car localmente a estrutura do html e desse

estilo.

ResourcesCom essa ferramenta é possível visualizar os dados que a aplicaçãoarmazenou em sua máquina tais como Cookies, arquivos de sessão,

dados do Web SQL, IndexedDB, cache, fontes, imagens, scripts,folhas de estilo...

NetworkAnalisa quanto tempo é gasto para a sua aplicação carregar combase na sua conexão, tudo isso de forma bastante detalhada e

separada por categorias facilitando assim na �ltragem dos requestsque poderão estar causando lentidão na sua aplicação.

SourcesCom essa ferramenta é possível fazer o debug do javascript da

aplicação.

TimelineEssa ferramenta analisa toda a atividade de sua aplicação e comoela é executada, é nela o melhor lugar para começar a investigar

problemas de desempenho da sua aplicação.

ProfilesEssa ferramenta permite traçar o per�l do tempo de execução e usode 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 recursosestão sendo gastos, e assim ajudá-lo a otimizar seu código.

AuditsEssa ferramenta analisa toda a sua aplicação e exibe dicas para

obter um melhor desempenho, como por exemplo: ativarcompactação gzip, diminuição do tamanho dos cookies, mini�car o

JS e muito mais.

ConsoleEssa ferramenta como o próprio nome já diz se trata de um consoleonde podemos inserir e testar nossos códigos JS, vendo o resultadosendo impresso no mesmo momento, algo bastante parecido com o

vemos no IRB (Ruby) por exemplo.

FimObrigado ;)