Painéis

Elements

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

Network

Análise de todas as requisições feitas pela página: 

• tempo
• tamanho
• headers
• cookies
• parâmetros

Sources

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

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.

Resources

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

Profiles

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

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.

Comandos

$_

Retorna a última expressão executada no Console.

$0 - $4

Histórico dos últimos elementos selecionados no painel  Elements ou no painel  Profiles

$(seletor)

Retorna o primeiro elemento correspondente ao seletor CSS informado 

$$(seletor)

Retorna um array com os elementos correspondentes ao seletor CSS informado 

$x(path)

Retorna um array com os elementos correspondentes a expressão XPath informada  

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.

dir(elemento)

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

getEventListeners(elemento)

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

keys(objeto)

Retorna um array com os nomes das propriedades do objeto

values(objeto)

Retorna um array com os valores das propriedades do objeto

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.

monitorEvents(el[,eventos])

Exibe uma mensagem no Console quando ocorrerem os eventos.

Use unmonitorEvents(el[,eventos]) para parar de monitorar.

profile(nome)/profileEnd(nome)

Executa uma análise de uso de CPU e ao completar, a mesma 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 smartphone com Android

Requisitos

• Chrome 32+
• Cabo USB
• Android 4.0+

Requisitos

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

Requisitos

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

Requisitos

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

Ative modo Desenvolvedor

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

Configure o Android

Em seu Android, vá até configurações e selecione

"Programador" (em algumas versões será "Opções do Desenvolvedor").

Configure o Android

Nas opções do desenvolvedor, ative a "Depuração USB".

Clique em OK

Conecte o Android

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

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.  

Selecione uma página

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

Pronto!

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

Pronto!

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