Uma nova era (Que não é mais tão nova assim)

1. http://gdgssa.github.io

2. O Fantástico Mundo
DevTools
GDGSSA

3. Marcus Silva
❖ Front-End Engineer
❖ GDGSSA Organizer
❖ Javascript
#TeamIronMan

4. Nos últimos anos, as tecnologias client-side evoluíram de uma maneira absurda e
continuam evoluindo. Consequentemente, muita coisa no workflow de
desenvolvimento web também mudou. Debugar códigos JS usando alerts, essa
era ficou para os dinossauros.
A nova era?
Chrome Dev Tools, Opera Dragonfly, Firefox DevTools, IE(ops… bugou), Edge Dev
Tools
Uma nova era (Que não é mais tão nova assim)

6. Developer Tools?
Conjunto de ferramentas para controlar o
funcionamento de nossa aplicação, permitindo análises,
conferências, testes e formas de debug.

8. Utilizando o DevTools

9. Features

10. Elements
Verifica todos os atributos HTML presentes na aplicação, e para cada um deles,
visualiza os estilos e seus comportamentos.
Visualizar/Modificar elementos HTML
Visualizar/Modificar estilos CSS ao elemento desejado
Visualizar os Eventos JS atrelados ao elemento selecionado
Modificar ordem de elementos no documento
Realizar mudanças na aplicação e ver o resultado no browser

12. Console
Fornece um diagnóstico do funcionamento da aplicação (log) e disponibiliza uma
janela de comandos que podem ser usados para interagir com a aplicação e o
devtools.
Verificar erros de execução do código
Interagir com a aplicação
Monitorar eventos disparados pelo usuário/aplicação
Criar e executar códigos
Visualizar o tempo gasto na execução do código
Visualizar informações de variáveis, arrays e objetos

14. Sources
Mapea os arquivos utilizados pela minha aplicação e realiza mudanças,
diretamente pelo browser.
Salvar/Alterar as informações modificadas no browser, nos arquivos físicos
Mapear os arquivos a serem modificados
Visualizar/Modificar as alterações feitas no documento
Visualizar valores de variáveis através de breakpoints
Em caso de uso de pré-processadores (CSS ou JS), é preciso gerar o Source-
Map

16. Network
Obtem informações sobre os recursos solicitados pela aplicação baixados pelo
browser e o desempenho do carregamento da página.
Visualizar informações sobre cada requisição feita pela aplicação
Detectar o tempo de carregamento de cada recurso e do documento
Acompanhar o tempo de carregamento e renderização da página

18. Timeline
Obtém informações sobre a execução do meu código JS, tempo de
carregamento e renderização no HTML. É uma análise mais
voltada para o comportamento do nosso código.

20. Performance

21. Profiles
Estende os resultados de Network e Timeline. Fornece
informações realizadas ao tempo de processamento de cada
função, consumo de memória e CPU.

22. Resources
Visualizar os recursos da sua aplicação e ver as informações que estão sendo
salvas no browser.
Visualizar imagens, fontes, CSS e JS
Visualizar dados salvos em IndexedDB
Visualizar dados salvos em Cookies
Visualizar/Manipular dados salvos em Web Storage

24. Audits
Realiza algumas análises, ou auditorias, em sua aplicação, com relação ao uso da
rede e performance, visando otimização.
Análise com relação ao uso da rede e quantidade de requests.
Análise com relação a performance
**O time de desenvolvedores da Google recomenda que para análises de
performance, seja utilizado o PageSpeed Insights**

27. https://goo.gl/8WUeMQ

28. Device Mode
Permite realizar mudanças no tamanho da tela, para simular o comportamento
de uma variedade de dispositivos existentes, ou defini-lo para um tamanho de
sua própria escolha.
Visualizar o comportamento da página, em algum determinado
dispositivo/resolução
Visualizar o carregamento da página de acordo com a rede de dados
Visualizar/Manipular estilos CSS e comportamentos das Media Queries
Simular recursos do smartphone, como scroll, touch, acelerômetro e
geolocalização
Criar resoluções customizadas

31. Automatize suas tarefas e Processos

32. Show Time

33. Um obrigado especial pra Narigomon o terror de BH!
/yaanmagale

34. Obrigado galera!
Twitter: @mvfsillva
Github: mvfsilva