Post on 09-Apr-2017
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 ;)