O documento discute o uso de proxies de depuração da web como ferramentas para depurar erros no front-end e back-end, permitindo que desenvolvedores testem diretamente em produção sem necessidade de deploy. Proxies como o Charles e o Fiddler monitoram e modificam tráfego HTTP entre a máquina do desenvolvedor e a rede, permitindo depuração de requisições e respostas. O documento apresenta um demo destas ferramentas.

1. Web Debugging
Proxies
O elo perdido entre o front e o back-end

2. mas antes...

3. 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

4. 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

5. de volta a nossa
programação normal...

6. Web Debugging
Proxies

7. Web Debuggers

8. Problema!

9. Deu erro no javascript
em produção
no Internet Explorer!

10. Paranóia
• É cache?
• Alguém subiu arquivo antigo?
• Faltou arquivo no minified ou erro de
compressão?
• Não testamos direito?

11. Como resolver?

12. Como resolver?
1. Tenta reproduzir o erro na sua máquina
• Levanta o servidor
• Insere dados parecidos com prod
• Faz testes manuais
• Codifica

13. Como resolver?
2. Faz deploy para alguns ambientes (dev,
staging, homog, whatever...)
• Testa nos ambientes
3. Faz deploy pra prod
• Testa em prod

14. 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

15. E se você pudesse testar
direto em prod?
(sem deploy)

16. alguns anos atrás...

17. http://www.yuiblog.com/blog/2008/06/27/fiddler/

18. Como funciona?

19. Sem Web Debugger
Requisição HTTP
Resposta HTTP

20. Com Web Debugger
Web
Debugger
Requisição HTTP
Resposta HTTP Resposta HTTP
Requisição HTTP

21. 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

22. 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

23. Web Debuggers
Map Local

24. CharlesWeb Debugging Proxy
FiddlerWeb Debugging Proxy
Web Debuggers

25. 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

26. CharlesWeb Debugging Proxy
FiddlerWeb Debugging Proxy
Web Debuggers

27. Map Local

28. Hora do Demo!

30. 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

31. 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

32. 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

33. Alternativas?
• Wireshark
• Chrome Dev Tools
• alguma outra?

34. Perguntas?

35. Obrigado! ;)
@lquixada