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