o lado oculto do devtools (alan silva)
Post on 15-Apr-2017
90 Views
Preview:
TRANSCRIPT
O Lado Oculto do DevToolsDebugando a web de forma prática
Chrome Developer Tools
Entendendo o DevTools
É um conjunto de ferramentas para depuração e criação web embutidos no Google Chrome.
Chrome Developer Tools
Browsers mais utilizados
fonte: http://gs.statcounter.com/
DEMO“Clickbait” maroto ¯\_(ツ)_/¯
“Hackeando” o DevTools
Personalizando o DevTools
Configurando e ativando features experimentais
Ativando experimentos
1. Abra chrome://flags#enable-devtools-experiments2. Clique em Enable3. Reinicie o Google Chrome4. Visualize as paradas em F12 > F1 > Experiments5. Aperte shift 6 vezes para liberar mais bruxarias
Configurações Gerais: F1
DEMOCustomizando o DevTools
Dicas úteis para o dia-a-dia
Command Menu
Ctrl/Cmd + Shift + P
Store as Global Variable
Clique Direito > Store as Global Variable
Restart Frame
Call Stack > Clique Direito > Restart Frame
Local Modifications
Clique Direito > Local Modifications
Breakpoints Condicionais
Histórico de Comandos no Console
Ctrl/Cmd + Espaço
Workspaces
DEMO
Referências
https://umaar.com/dev-tips/
https://developers.google.com/web/tools/chrome-devtools
Obrigado!Twitter @AlanCezarAraujoalan.cezar.silva@gmail.com
www.concretesolutions.com.br
Rio de Janeiro – Rua São José, 90 – cj. 2121Centro – (21) 2240-2030
São Paulo - Rua Sansão Alves dos Santos, 433 4º andar - Brooklin - (11) 4119-0449
Ajudamos empresas a criar produtos digitais de sucesso
top related