O Fantástico Mundo DevTools
Transferir como PPTX, PDF0 gostou144 visualizações
O documento descreve as principais ferramentas do DevTools (Ferramentas para Desenvolvedores) dos navegadores como Chrome e Firefox. Ele explica como usar o DevTools para inspecionar e modificar elementos HTML, estilos CSS, debugar código JavaScript, analisar desempenho e recursos da aplicação. O documento também discute como o DevTools pode simular diferentes dispositivos e resoluções de tela.
![01 - Arquitetura de Computadores 1 TEC [Salvo automaticamente].ppt](https://cdn.slidesharecdn.com/ss_thumbnails/01-arquiteturadecomputadores1tecsalvoautomaticamente-250825173800-d03ce433-thumbnail.jpg?width=560&fit=bounds)
O Fantástico Mundo DevTools
- 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.
- 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**
- 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