O documento descreve as ferramentas do Chrome Dev Tools, que permitem inspecionar, depurar e otimizar páginas web e aplicações. O Dev Tools fornece recursos como emulação de dispositivos, inspeção de elementos, rede, código-fonte, desempenho e otimização para ajudar desenvolvedores a criar sites e aplicações.

1. Fábio Assunção
frontend / backend developer
www.fabioassuncao.com.br

3. Frontend / backend developer at VAT SA,
graduando em Ciências da Computação,
pai do Gabriel, apaixonado pela
Babitinha, fígado, arte e tecnologia.
Interessado em UX e Interaction Design.

4. developer.chrome.com/devtools

5. Desenvolvimento inteligente com
Google Chrome Dev Tools
developer.chrome.com/devtools

6. Há alguns anos atrás não “existia”
uma definição objetiva para
frontend ou backend.
developer.chrome.com/devtools

7. Algumas definições...
developer.chrome.com/devtools

8. webdesigner
developer.chrome.com/devtools
webmaster
“menino do HTML”
“Programador de HTML”
Usuários do Windows
Programadores do dreamweaver
“hardcores do Flash”
“fazedores de sites”
webwriter

9. O tempo passou...
developer.chrome.com/devtools

10. Os browsers evoluiram…
developer.chrome.com/devtools

11. developer.chrome.com/devtools

12. Ops! Apenas alguns…
developer.chrome.com/devtools

13. developer.chrome.com/devtools

14. Os mobiles devices
chegaram…

16. As necessidades são outras,
o comportamento mudou.

17. Um tornado de APIs vieram com o HTML5,
novas propriedades foram adicionadas ao
CSS3 e muitas novidades chegaram no
JavaScript

18. Consequentemente, muita coisa
no workflow também mudou.

19. Debugar códigos
JavaScript usando alert?

20. Ir e voltar no browser para
testar as mudanças de estilo?

21. Redimensionar a página para
simular responsive design?

22. If(resposta == ‘sim’){
}

23. console.log(‘
Não teremos o “bug
Cássia Eller”!
’);
else{
}

24. Start!
developer.chrome.com/devtools

25. O que é Chrome
Dev Tools?
developer.chrome.com/devtools

26. Conjunto de ferramentas
acopladas ao Chrome para
auditoria, depuração e
desenvolvimento. Fornece aos
devs acesso profundo aos
recursos internos do browser,
além da aplicação.
developer.chrome.com/devtools

27. Recursos:
• Emulate device
• Elements
• Network
• Sources
• Timeline
• Profiles
• Resources
• Audits
• Console
• PageSpeed

30. Keyboard Shortcuts

32. Mão na massa!
developer.chrome.com/devtools