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