web debugging proxies
TRANSCRIPT
![Page 1: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/1.jpg)
Web Debugging Proxies
O elo perdido entre o front e o back-end
![Page 2: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/2.jpg)
mas antes...
![Page 3: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/3.jpg)
Quem sou eu
Leonardo Quixadá
Sobre front-end• Respiro há 15 anos• Trabalho há 11 anos• Trabalhei 4 na Globo.com• E agora há 5 dias na Sieve
@lquixada
![Page 4: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/4.jpg)
Quem sou eu
Leonardo Quixadá
• Apaixonado por tecnologia em todas as suas vertentes
• Assiste Game of Thrones e The Big Bang Theory
• Gosta de dançar forró nas horas vagas
@lquixada
![Page 5: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/5.jpg)
de volta a nossa programação normal...
![Page 6: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/6.jpg)
Web Debugging Proxies
![Page 7: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/7.jpg)
Web Debuggers
![Page 8: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/8.jpg)
Problema!
![Page 9: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/9.jpg)
Deu erro no javascript
em produçãono Internet Explorer!
![Page 10: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/10.jpg)
Paranóia
• É cache?
• Alguém subiu arquivo antigo?
• Faltou arquivo no minified ou erro de compressão?
• Não testamos direito?
![Page 11: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/11.jpg)
Como resolver?
![Page 12: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/12.jpg)
Como resolver?1. Tenta reproduzir o erro na sua máquina
• Levanta o servidor
• Insere dados parecidos com prod
• Faz testes manuais
• Codifica
![Page 13: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/13.jpg)
Como resolver?2. Faz deploy para alguns ambientes (dev,
staging, homog, whatever...)
• Testa nos ambientes
3. Faz deploy pra prod
• Testa em prod
![Page 14: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/14.jpg)
Problemas de prod
• Dados não são Lorem Ipsum (CSS errado)
• Domínio (flash, postmessage...)
• Casos não testados (principalmente no IE)
• Javascript de terceiros lento ou com erro
• Dado inserido erradamente no Admin
• Deploy de arquivos antigos
![Page 15: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/15.jpg)
E se você pudesse testar direto em prod?
(sem deploy)
![Page 16: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/16.jpg)
alguns anos atrás...
![Page 17: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/17.jpg)
http://www.yuiblog.com/blog/2008/06/27/fiddler/
![Page 18: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/18.jpg)
Como funciona?
![Page 19: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/19.jpg)
Sem Web Debugger
Requisição HTTP
Resposta HTTP
![Page 20: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/20.jpg)
Com Web Debugger
WebDebugger
Requisição HTTP
Resposta HTTP Resposta HTTP
Requisição HTTP
![Page 21: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/21.jpg)
Web Debuggers
São aplicações que:
• Monitoram as conexões HTTP e HTTPS que trafegam entre a sua máquina e a rede.
• Atuam como proxies reversos respondendo pelo servidor
• Debugam conexões alterando dados e/ou setando breakpoints
![Page 22: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/22.jpg)
Web Debuggers
Port Forwarding
MétricasBlack List
Exportação de HAR
Throttling
Map Local
Map RemoteRequest Creation
Profiling
Importação de HAR
No Cookies
No Caching
![Page 23: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/23.jpg)
Web Debuggers
Map Local
![Page 24: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/24.jpg)
CharlesWeb Debugging Proxy
FiddlerWeb Debugging Proxy
Web Debuggers
![Page 25: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/25.jpg)
Charles Fiddler
Sistema Operacional Win, Mac, Linux Win
Interface Ótima Péssima
Independente de Browser Sim Sim
Plugins Não Sim
Preço U$50,00 Gratuito
Web Debuggers
![Page 26: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/26.jpg)
CharlesWeb Debugging Proxy
FiddlerWeb Debugging Proxy
Web Debuggers
![Page 27: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/27.jpg)
Map Local
![Page 28: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/28.jpg)
Hora do Demo!
![Page 29: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/29.jpg)
![Page 30: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/30.jpg)
Web Debuggers
Port Forwarding
MétricasBlack List
Exportação de HAR
Throttling
Map Local
Map RemoteRequest Creation
Profiling
Importação de HAR
No Cookies
No Caching
![Page 31: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/31.jpg)
Não só javascript
• Vale para qualquer tipo de request, dinâmicos ou estáticos:
• Stylesheets
• Imagens
• XML via Flash
• JSON via AJAX
• Tudo puder ser linkado em uma página
![Page 32: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/32.jpg)
Não só browsers
• API no server (consulta ao facebook)
• Extensões de navegadores
• Linha de comando
• Qualquer aplicação que faça conexões HTTP
![Page 33: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/33.jpg)
Alternativas?
• Wireshark
• Chrome Dev Tools
• alguma outra?
![Page 34: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/34.jpg)
Perguntas?
![Page 35: Web debugging proxies](https://reader033.vdocuments.site/reader033/viewer/2022052311/5565ac91d8b42a4c6f8b49f6/html5/thumbnails/35.jpg)
Obrigado! ;)@lquixada