View
24
Download
0
Category
Preview:
Citation preview
Guia do f12Developer Tools
F12
Leonardo Tegon
DesenvolverVisualizar e editar o HTML, CSS e JavaScriptGerenciar os dados locais (Cookies, Local Storage)Simular dispositivos mobile
DebugarSmartphone com AndroidJavaScript snippetsCódigo minificado BreakpointsConsole
AnalisarPerformanceTempo de carregamentoUso de CPU Uso de memória
Painéis
ElementsVisualização e alteraçãodo layout da página emanipulação do DOM(Document ObjectModel) em tempo real.
NetworkAnálise de todas asrequisições feitas pelapágina:
tempotamanhoheaderscookiesparâmetros
SourcesVisualizar e alterar osarquivos (HTML, CSS, JS)da página. Possuitambém um debugger.
TimelineExibe as operações queo navegador executoudurante um determinadoperíodo de tempo. Podeser útil para melhorar odesempenho da página.
ResourcesPermite a visualizaçãode todos os arquivosutilizados pela página eo gerenciamento dosdados locais (Cookies,Local Storage,IndexedDB).
ProfilesSimilar ao painelTimeline, porém commais detalhes, como usode memória e CPU.
ConsoleContém toda a saída delog da aplicação, etambém funciona comoum REPL. Possuiautocomplete paranomes de funções evariáveis.
Comandos
$_Retorna a última expressãoexecutada no Console.
$0 - $4Histórico dos últimos elementos selecionados nopainel Elements ou no painel Profiles
$(seletor)Retorna o primeiro elemento correspondente aoseletor CSS informado
$$(seletor)Retorna um array com os elementos correspondentesao seletor CSS informado
$x(path)Retorna um array com os elementos correspondentesa expressão informada XPath
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.
dir(elemento)Exibe o elemento em forma de objeto, listando todasas suas propriedades
getEventListeners(elemento)Retorna as funções que estão escutando eventos noelemento
keys(objeto)Retorna um array com os nomes das propriedades doobjeto
values(objeto)Retorna um array com os valores das propriedades doobjeto
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.
monitorEvents(el[,eventos])Exibe uma mensagem no Console quando ocorrerem oseventos.Use unmonitorEvents(el[,eventos]) para parar de monitorar.
profile(nome)/profileEnd(nome)Executa uma análise de uso de CPU e ao completar, amesma fica no painel Profiles
table(objetos[,cabeçalhos])Exibe os objetos no Console em formato de tabela. Cabeçalhos podem ser informados para as colunas.
Debugar smartphonecom Android
RequisitosChrome 32+Cabo USBAndroid 4.0+
RequisitosA versão do Chrome do Desktop deve sermais recente que a do Chrome do Android
RequisitosA partir da versão 4.2 do Android, as
opções do desenvolvedor estãoescondidas por padrão
RequisitosCaso ainda não tenha, instale os
do seu Android em sua máquinadrivers
Ative modoDesenvolvedorEm configurações, selecione"Sobre o telefone" e cliquesobre "Número da versão" sete vezes
Configure oAndroidEm seu Android, vá atéconfigurações e selecione"Programador" (em algumasversões será "Opções doDesenvolvedor").
Configure oAndroidNas opções do desenvolvedor,ative a "Depuração USB".Clique em OK
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
Conecte oAndroidNo Android, permita adepuração via USB clicando emOK.Marque o checkbox caso desejesempre permitir a depuraçãopara seu computador.
Selecione umapáginaEm
,selecione uma página - queestá aberta no Chrome doAndroid - e clique em inspect
chrome://inspect/#devices
Pronto!Selecione ealtere algunselementos, eveja como elesmudamdiretamente noAndroid.
Pronto!Selecione oícone dosmartphonepara fazer umscreencast paraa tela do PC
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/
Quem seguir
@aerotwist
@addyosmani
@paul_irish
@ChromeDevTools
@ChromiumDev
Obrigado :)tegon.github.io/guia-do-f12/slides.pdf
Leonardo Tegon
Recommended