Desenvolvimento inteligente com Google Chrome DevTools
Transferir como PPTX, PDF2 gostaram1,561 visualizações
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.
Desenvolvimento inteligente com Google Chrome DevTools
- 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.
- 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
- 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
- 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?
- 23. console.log(‘ Não teremos o “bug Cássia Eller”! ’); else{ }
- 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