Guia do F12: Chrome Developer Tools

Slide 1

Slide 1 text

Guia do f12 Developer Tools F12 Leonardo Tegon

Slide 2

Slide 2 text

Desenvolver Visualizar e editar o HTML, CSS e JavaScript Gerenciar os dados locais (Cookies, Local Storage) Simular dispositivos mobile

Slide 3

Slide 3 text

Debugar Smartphone com Android JavaScript snippets Código minificado Breakpoints Console

Slide 4

Slide 4 text

Analisar Performance Tempo de carregamento Uso de CPU Uso de memória

Slide 5

Slide 5 text

Painéis

Slide 6

Slide 6 text

Elements Visualização e alteração do layout da página e manipulação do DOM (Document Object Model) em tempo real.

Slide 7

Slide 7 text

Network Análise de todas as requisições feitas pela página: tempo tamanho headers cookies parâmetros

Slide 8

Slide 8 text

Sources Visualizar e alterar os arquivos (HTML, CSS, JS) da página. Possui também um debugger.

Slide 9

Slide 9 text

Timeline Exibe as operações que o navegador executou durante um determinado período de tempo. Pode ser útil para melhorar o desempenho da página.

Slide 10

Slide 10 text

Resources Permite a visualização de todos os arquivos utilizados pela página e o gerenciamento dos dados locais (Cookies, Local Storage, IndexedDB).

Slide 11

Slide 11 text

Profiles Similar ao painel Timeline, porém com mais detalhes, como uso de memória e CPU.

Slide 12

Slide 12 text

Console Contém toda a saída de log da aplicação, e também funciona como um REPL. Possui autocomplete para nomes de funções e variáveis.

Slide 13

Slide 13 text

Comandos

Slide 14

Slide 14 text

$_ Retorna a última expressão executada no Console.

Slide 15

Slide 15 text

$0 - $4 Histórico dos últimos elementos selecionados no painel Elements ou no painel Profiles

Slide 16

Slide 16 text

$(seletor) Retorna o primeiro elemento correspondente ao seletor CSS informado

Slide 17

Slide 17 text

$$(seletor) Retorna um array com os elementos correspondentes ao seletor CSS informado

Slide 18

Slide 18 text

$x(path) Retorna um array com os elementos correspondentes a expressão informada XPath

Slide 19

Slide 19 text

clear() Limpa o histórico do Console copy(objeto) Copia o objeto em formato de texto para a área de transferência debug(função) Quando a função informada for executada, o debugger será aberto no painel Sources, similar a um breakpoint. Use undebug(função) para parar de debugar.

Slide 20

Slide 20 text

dir(elemento) Exibe o elemento em forma de objeto, listando todas as suas propriedades

Slide 21

Slide 21 text

getEventListeners(elemento) Retorna as funções que estão escutando eventos no elemento

Slide 22

Slide 22 text

keys(objeto) Retorna um array com os nomes das propriedades do objeto

Slide 23

Slide 23 text

values(objeto) Retorna um array com os valores das propriedades do objeto

Slide 24

Slide 24 text

monitor(função) Quando a função informada for executada, uma mensagem será exibida no Console com o nome dela e os valores de seus argumentos. Use unmonitor(função) para parar de monitorar.

Slide 25

Slide 25 text

monitorEvents(el[,eventos]) Exibe uma mensagem no Console quando ocorrerem os eventos. Use unmonitorEvents(el[,eventos]) para parar de monitorar.

Slide 26

Slide 26 text

profile(nome)/profileEnd(nome) Executa uma análise de uso de CPU e ao completar, a mesma fica no painel Profiles

Slide 27

Slide 27 text

table(objetos[,cabeçalhos]) Exibe os objetos no Console em formato de tabela. Cabeçalhos podem ser informados para as colunas.

Slide 28

Slide 28 text

Debugar smartphone com Android

Slide 29

Slide 29 text

Requisitos Chrome 32+ Cabo USB Android 4.0+

Slide 30

Slide 30 text

Requisitos A versão do Chrome do Desktop deve ser mais recente que a do Chrome do Android

Slide 31

Slide 31 text

Requisitos A partir da versão 4.2 do Android, as opções do desenvolvedor estão escondidas por padrão

Slide 32

Slide 32 text

Requisitos Caso ainda não tenha, instale os do seu Android em sua máquina drivers

Slide 33

Slide 33 text

Ative modo Desenvolvedor Em configurações, selecione "Sobre o telefone" e clique sobre "Número da versão" sete vezes

Slide 34

Slide 34 text

Configure o Android Em seu Android, vá até configurações e selecione "Programador" (em algumas versões será "Opções do Desenvolvedor").

Slide 35

Slide 35 text

Configure o Android Nas opções do desenvolvedor, ative a "Depuração USB". Clique em OK

Slide 36

Slide 36 text

Conecte o Android Com o Android conectado na sua máquina com um cabo USB, abra uma aba do Chrome com a url: e marque o checkbox "Discover USB devices" chrome://inspect

Slide 37

Slide 37 text

Conecte o Android No Android, permita a depuração via USB clicando em OK. Marque o checkbox caso deseje sempre permitir a depuração para seu computador.

Slide 38

Slide 38 text

Selecione uma página Em , selecione uma página - que está aberta no Chrome do Android - e clique em inspect chrome://inspect/#devices

Slide 39

Slide 39 text

Pronto! Selecione e altere alguns elementos, e veja como eles mudam diretamente no Android.

Slide 40

Slide 40 text

Pronto! Selecione o ícone do smartphone para fazer um screencast para a tela do PC

Slide 41

Slide 41 text

Links https://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/