guia do f12 f12 developer tools - github pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11....
TRANSCRIPT
![Page 1: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/1.jpg)
Guia do f12Developer Tools
F12
Leonardo Tegon
![Page 2: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/2.jpg)
DesenvolverVisualizar e editar o HTML, CSS e JavaScriptGerenciar os dados locais (Cookies, Local Storage)Simular dispositivos mobile
![Page 3: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/3.jpg)
DebugarSmartphone com AndroidJavaScript snippetsCódigo minificado BreakpointsConsole
![Page 4: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/4.jpg)
AnalisarPerformanceTempo de carregamentoUso de CPU Uso de memória
![Page 5: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/5.jpg)
Painéis
![Page 6: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/6.jpg)
ElementsVisualização e alteraçãodo layout da página emanipulação do DOM(Document ObjectModel) em tempo real.
![Page 7: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/7.jpg)
NetworkAnálise de todas asrequisições feitas pelapágina:
tempotamanhoheaderscookiesparâmetros
![Page 8: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/8.jpg)
SourcesVisualizar e alterar osarquivos (HTML, CSS, JS)da página. Possuitambém um debugger.
![Page 9: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/9.jpg)
TimelineExibe as operações queo navegador executoudurante um determinadoperíodo de tempo. Podeser útil para melhorar odesempenho da página.
![Page 10: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/10.jpg)
ResourcesPermite a visualizaçãode todos os arquivosutilizados pela página eo gerenciamento dosdados locais (Cookies,Local Storage,IndexedDB).
![Page 11: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/11.jpg)
ProfilesSimilar ao painelTimeline, porém commais detalhes, como usode memória e CPU.
![Page 12: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/12.jpg)
ConsoleContém toda a saída delog da aplicação, etambém funciona comoum REPL. Possuiautocomplete paranomes de funções evariáveis.
![Page 13: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/13.jpg)
Comandos
![Page 14: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/14.jpg)
$_Retorna a última expressãoexecutada no Console.
![Page 15: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/15.jpg)
$0 - $4Histórico dos últimos elementos selecionados nopainel Elements ou no painel Profiles
![Page 16: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/16.jpg)
$(seletor)Retorna o primeiro elemento correspondente aoseletor CSS informado
![Page 17: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/17.jpg)
$$(seletor)Retorna um array com os elementos correspondentesao seletor CSS informado
![Page 18: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/18.jpg)
$x(path)Retorna um array com os elementos correspondentesa expressão informada XPath
![Page 19: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/19.jpg)
clear()Limpa o histórico do Console
copy(objeto)Copia o objeto em formato de texto para a área detransferência
debug(função)Quando a função informada for executada, o debugger será aberto no painel Sources, similar a umbreakpoint.Use undebug(função) para parar de debugar.
![Page 20: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/20.jpg)
dir(elemento)Exibe o elemento em forma de objeto, listando todasas suas propriedades
![Page 21: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/21.jpg)
getEventListeners(elemento)Retorna as funções que estão escutando eventos noelemento
![Page 22: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/22.jpg)
keys(objeto)Retorna um array com os nomes das propriedades doobjeto
![Page 23: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/23.jpg)
values(objeto)Retorna um array com os valores das propriedades doobjeto
![Page 24: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/24.jpg)
monitor(função)Quando a função informada for executada, umamensagem será exibida no Console com o nome delae os valores de seus argumentos.Use unmonitor(função) para parar de monitorar.
![Page 25: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/25.jpg)
monitorEvents(el[,eventos])Exibe uma mensagem no Console quando ocorrerem oseventos.Use unmonitorEvents(el[,eventos]) para parar de monitorar.
![Page 26: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/26.jpg)
profile(nome)/profileEnd(nome)Executa uma análise de uso de CPU e ao completar, amesma fica no painel Profiles
![Page 27: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/27.jpg)
table(objetos[,cabeçalhos])Exibe os objetos no Console em formato de tabela. Cabeçalhos podem ser informados para as colunas.
![Page 28: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/28.jpg)
Debugar smartphonecom Android
![Page 29: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/29.jpg)
RequisitosChrome 32+Cabo USBAndroid 4.0+
![Page 30: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/30.jpg)
RequisitosA versão do Chrome do Desktop deve sermais recente que a do Chrome do Android
![Page 31: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/31.jpg)
RequisitosA partir da versão 4.2 do Android, as
opções do desenvolvedor estãoescondidas por padrão
![Page 32: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/32.jpg)
RequisitosCaso ainda não tenha, instale os
do seu Android em sua máquinadrivers
![Page 33: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/33.jpg)
Ative modoDesenvolvedorEm configurações, selecione"Sobre o telefone" e cliquesobre "Número da versão" sete vezes
![Page 34: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/34.jpg)
Configure oAndroidEm seu Android, vá atéconfigurações e selecione"Programador" (em algumasversões será "Opções doDesenvolvedor").
![Page 35: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/35.jpg)
Configure oAndroidNas opções do desenvolvedor,ative a "Depuração USB".Clique em OK
![Page 36: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/36.jpg)
Conecte oAndroidCom o Android conectado nasua máquina com um caboUSB, abra uma aba do Chromecom a url: emarque o checkbox "DiscoverUSB devices"
chrome://inspect
![Page 37: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/37.jpg)
Conecte oAndroidNo Android, permita adepuração via USB clicando emOK.Marque o checkbox caso desejesempre permitir a depuraçãopara seu computador.
![Page 38: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/38.jpg)
Selecione umapáginaEm
,selecione uma página - queestá aberta no Chrome doAndroid - e clique em inspect
chrome://inspect/#devices
![Page 39: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/39.jpg)
Pronto!Selecione ealtere algunselementos, eveja como elesmudamdiretamente noAndroid.
![Page 40: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/40.jpg)
Pronto!Selecione oícone dosmartphonepara fazer umscreencast paraa tela do PC
![Page 41: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/41.jpg)
Linkshttps://developers.google.com/web/tools/
chrome-devtools/https://developers.google.com/web/tools/
chrome-devtools/debug/command-line/command-line-reference
http://devtoolstips.com/
https://umaar.com/dev-tips/
![Page 42: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/42.jpg)
Quem seguir
@aerotwist
@addyosmani
@paul_irish
@ChromeDevTools
@ChromiumDev
![Page 43: Guia do f12 F12 Developer Tools - GitHub Pagestegon.github.io/guia-do-f12/slides.pdf · 2015. 11. 19. · Guia do f12 Developer Tools F12 Leonardo Tegon. Desenvolver Visualizar e](https://reader035.vdocuments.com.br/reader035/viewer/2022070109/60425e411bb2aa7f2f16d3a7/html5/thumbnails/43.jpg)
Obrigado :)tegon.github.io/guia-do-f12/slides.pdf
Leonardo Tegon