Download - O Lado Oculto do DevTools (Alan Silva)
![Page 1: O Lado Oculto do DevTools (Alan Silva)](https://reader030.vdocuments.co/reader030/viewer/2022021507/58f1f8a11a28abb7488b4611/html5/thumbnails/1.jpg)
O Lado Oculto do DevToolsDebugando a web de forma prática
![Page 2: O Lado Oculto do DevTools (Alan Silva)](https://reader030.vdocuments.co/reader030/viewer/2022021507/58f1f8a11a28abb7488b4611/html5/thumbnails/2.jpg)
Chrome Developer Tools
Entendendo o DevTools
![Page 3: O Lado Oculto do DevTools (Alan Silva)](https://reader030.vdocuments.co/reader030/viewer/2022021507/58f1f8a11a28abb7488b4611/html5/thumbnails/3.jpg)
É um conjunto de ferramentas para depuração e criação web embutidos no Google Chrome.
Chrome Developer Tools
![Page 4: O Lado Oculto do DevTools (Alan Silva)](https://reader030.vdocuments.co/reader030/viewer/2022021507/58f1f8a11a28abb7488b4611/html5/thumbnails/4.jpg)
Browsers mais utilizados
fonte: http://gs.statcounter.com/
![Page 5: O Lado Oculto do DevTools (Alan Silva)](https://reader030.vdocuments.co/reader030/viewer/2022021507/58f1f8a11a28abb7488b4611/html5/thumbnails/5.jpg)
DEMO“Clickbait” maroto ¯\_(ツ)_/¯
“Hackeando” o DevTools
![Page 6: O Lado Oculto do DevTools (Alan Silva)](https://reader030.vdocuments.co/reader030/viewer/2022021507/58f1f8a11a28abb7488b4611/html5/thumbnails/6.jpg)
Personalizando o DevTools
Configurando e ativando features experimentais
![Page 7: O Lado Oculto do DevTools (Alan Silva)](https://reader030.vdocuments.co/reader030/viewer/2022021507/58f1f8a11a28abb7488b4611/html5/thumbnails/7.jpg)
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
![Page 8: O Lado Oculto do DevTools (Alan Silva)](https://reader030.vdocuments.co/reader030/viewer/2022021507/58f1f8a11a28abb7488b4611/html5/thumbnails/8.jpg)
Configurações Gerais: F1
![Page 9: O Lado Oculto do DevTools (Alan Silva)](https://reader030.vdocuments.co/reader030/viewer/2022021507/58f1f8a11a28abb7488b4611/html5/thumbnails/9.jpg)
DEMOCustomizando o DevTools
![Page 10: O Lado Oculto do DevTools (Alan Silva)](https://reader030.vdocuments.co/reader030/viewer/2022021507/58f1f8a11a28abb7488b4611/html5/thumbnails/10.jpg)
Dicas úteis para o dia-a-dia
![Page 11: O Lado Oculto do DevTools (Alan Silva)](https://reader030.vdocuments.co/reader030/viewer/2022021507/58f1f8a11a28abb7488b4611/html5/thumbnails/11.jpg)
Command Menu
Ctrl/Cmd + Shift + P
![Page 12: O Lado Oculto do DevTools (Alan Silva)](https://reader030.vdocuments.co/reader030/viewer/2022021507/58f1f8a11a28abb7488b4611/html5/thumbnails/12.jpg)
Store as Global Variable
Clique Direito > Store as Global Variable
![Page 13: O Lado Oculto do DevTools (Alan Silva)](https://reader030.vdocuments.co/reader030/viewer/2022021507/58f1f8a11a28abb7488b4611/html5/thumbnails/13.jpg)
Restart Frame
Call Stack > Clique Direito > Restart Frame
![Page 14: O Lado Oculto do DevTools (Alan Silva)](https://reader030.vdocuments.co/reader030/viewer/2022021507/58f1f8a11a28abb7488b4611/html5/thumbnails/14.jpg)
Local Modifications
Clique Direito > Local Modifications
![Page 15: O Lado Oculto do DevTools (Alan Silva)](https://reader030.vdocuments.co/reader030/viewer/2022021507/58f1f8a11a28abb7488b4611/html5/thumbnails/15.jpg)
Breakpoints Condicionais
![Page 16: O Lado Oculto do DevTools (Alan Silva)](https://reader030.vdocuments.co/reader030/viewer/2022021507/58f1f8a11a28abb7488b4611/html5/thumbnails/16.jpg)
Histórico de Comandos no Console
Ctrl/Cmd + Espaço
![Page 17: O Lado Oculto do DevTools (Alan Silva)](https://reader030.vdocuments.co/reader030/viewer/2022021507/58f1f8a11a28abb7488b4611/html5/thumbnails/17.jpg)
Workspaces
![Page 18: O Lado Oculto do DevTools (Alan Silva)](https://reader030.vdocuments.co/reader030/viewer/2022021507/58f1f8a11a28abb7488b4611/html5/thumbnails/18.jpg)
DEMO
![Page 19: O Lado Oculto do DevTools (Alan Silva)](https://reader030.vdocuments.co/reader030/viewer/2022021507/58f1f8a11a28abb7488b4611/html5/thumbnails/19.jpg)
Referências
https://umaar.com/dev-tips/
https://developers.google.com/web/tools/chrome-devtools
![Page 21: O Lado Oculto do DevTools (Alan Silva)](https://reader030.vdocuments.co/reader030/viewer/2022021507/58f1f8a11a28abb7488b4611/html5/thumbnails/21.jpg)
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