Download - Chrome dev tools google io extended 2016
![Page 1: Chrome dev tools google io extended 2016](https://reader030.vdocuments.pub/reader030/viewer/2022021502/58e9f2e21a28aba2208b5cad/html5/thumbnails/1.jpg)
Chrome DevTools
Uma ótima alternativa para debug do seu front-end no GoogleChrome
![Page 2: Chrome dev tools google io extended 2016](https://reader030.vdocuments.pub/reader030/viewer/2022021502/58e9f2e21a28aba2208b5cad/html5/thumbnails/2.jpg)
Diego MeloDesenvolvedor - Universidade Tiradentes
github.com/diegomelo182
![Page 3: Chrome dev tools google io extended 2016](https://reader030.vdocuments.pub/reader030/viewer/2022021502/58e9f2e21a28aba2208b5cad/html5/thumbnails/3.jpg)
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.
![Page 4: Chrome dev tools google io extended 2016](https://reader030.vdocuments.pub/reader030/viewer/2022021502/58e9f2e21a28aba2208b5cad/html5/thumbnails/4.jpg)
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)
![Page 5: Chrome dev tools google io extended 2016](https://reader030.vdocuments.pub/reader030/viewer/2022021502/58e9f2e21a28aba2208b5cad/html5/thumbnails/5.jpg)
![Page 6: Chrome dev tools google io extended 2016](https://reader030.vdocuments.pub/reader030/viewer/2022021502/58e9f2e21a28aba2208b5cad/html5/thumbnails/6.jpg)
Ferramentas disponíveisElementsResourcesNetworkSourcesTimelinePro�lesAuditsConsole
![Page 7: Chrome dev tools google io extended 2016](https://reader030.vdocuments.pub/reader030/viewer/2022021502/58e9f2e21a28aba2208b5cad/html5/thumbnails/7.jpg)
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.
![Page 8: Chrome dev tools google io extended 2016](https://reader030.vdocuments.pub/reader030/viewer/2022021502/58e9f2e21a28aba2208b5cad/html5/thumbnails/8.jpg)
![Page 9: Chrome dev tools google io extended 2016](https://reader030.vdocuments.pub/reader030/viewer/2022021502/58e9f2e21a28aba2208b5cad/html5/thumbnails/9.jpg)
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...
![Page 10: Chrome dev tools google io extended 2016](https://reader030.vdocuments.pub/reader030/viewer/2022021502/58e9f2e21a28aba2208b5cad/html5/thumbnails/10.jpg)
![Page 11: Chrome dev tools google io extended 2016](https://reader030.vdocuments.pub/reader030/viewer/2022021502/58e9f2e21a28aba2208b5cad/html5/thumbnails/11.jpg)
![Page 12: Chrome dev tools google io extended 2016](https://reader030.vdocuments.pub/reader030/viewer/2022021502/58e9f2e21a28aba2208b5cad/html5/thumbnails/12.jpg)
![Page 13: Chrome dev tools google io extended 2016](https://reader030.vdocuments.pub/reader030/viewer/2022021502/58e9f2e21a28aba2208b5cad/html5/thumbnails/13.jpg)
![Page 14: Chrome dev tools google io extended 2016](https://reader030.vdocuments.pub/reader030/viewer/2022021502/58e9f2e21a28aba2208b5cad/html5/thumbnails/14.jpg)
![Page 15: Chrome dev tools google io extended 2016](https://reader030.vdocuments.pub/reader030/viewer/2022021502/58e9f2e21a28aba2208b5cad/html5/thumbnails/15.jpg)
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.
![Page 16: Chrome dev tools google io extended 2016](https://reader030.vdocuments.pub/reader030/viewer/2022021502/58e9f2e21a28aba2208b5cad/html5/thumbnails/16.jpg)
![Page 17: Chrome dev tools google io extended 2016](https://reader030.vdocuments.pub/reader030/viewer/2022021502/58e9f2e21a28aba2208b5cad/html5/thumbnails/17.jpg)
![Page 18: Chrome dev tools google io extended 2016](https://reader030.vdocuments.pub/reader030/viewer/2022021502/58e9f2e21a28aba2208b5cad/html5/thumbnails/18.jpg)
SourcesCom essa ferramenta é possível fazer o debug do javascript da
aplicação.
![Page 19: Chrome dev tools google io extended 2016](https://reader030.vdocuments.pub/reader030/viewer/2022021502/58e9f2e21a28aba2208b5cad/html5/thumbnails/19.jpg)
![Page 20: Chrome dev tools google io extended 2016](https://reader030.vdocuments.pub/reader030/viewer/2022021502/58e9f2e21a28aba2208b5cad/html5/thumbnails/20.jpg)
![Page 21: Chrome dev tools google io extended 2016](https://reader030.vdocuments.pub/reader030/viewer/2022021502/58e9f2e21a28aba2208b5cad/html5/thumbnails/21.jpg)
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.
![Page 22: Chrome dev tools google io extended 2016](https://reader030.vdocuments.pub/reader030/viewer/2022021502/58e9f2e21a28aba2208b5cad/html5/thumbnails/22.jpg)
![Page 23: Chrome dev tools google io extended 2016](https://reader030.vdocuments.pub/reader030/viewer/2022021502/58e9f2e21a28aba2208b5cad/html5/thumbnails/23.jpg)
![Page 24: Chrome dev tools google io extended 2016](https://reader030.vdocuments.pub/reader030/viewer/2022021502/58e9f2e21a28aba2208b5cad/html5/thumbnails/24.jpg)
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.
![Page 25: Chrome dev tools google io extended 2016](https://reader030.vdocuments.pub/reader030/viewer/2022021502/58e9f2e21a28aba2208b5cad/html5/thumbnails/25.jpg)
![Page 26: Chrome dev tools google io extended 2016](https://reader030.vdocuments.pub/reader030/viewer/2022021502/58e9f2e21a28aba2208b5cad/html5/thumbnails/26.jpg)
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.
![Page 27: Chrome dev tools google io extended 2016](https://reader030.vdocuments.pub/reader030/viewer/2022021502/58e9f2e21a28aba2208b5cad/html5/thumbnails/27.jpg)
![Page 28: Chrome dev tools google io extended 2016](https://reader030.vdocuments.pub/reader030/viewer/2022021502/58e9f2e21a28aba2208b5cad/html5/thumbnails/28.jpg)
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.
![Page 29: Chrome dev tools google io extended 2016](https://reader030.vdocuments.pub/reader030/viewer/2022021502/58e9f2e21a28aba2208b5cad/html5/thumbnails/29.jpg)
FimObrigado ;)