Web DebuggingProxiesO elo perdido entre o front e o back-end
mas antes...
Quem sou euLeonardo QuixadáSobre front-end•	 Respiro há 15 anos•	 Trabalho há 11 anos•	 Trabalhei 4 na Globo.com•	 E agora...
Quem sou euLeonardo Quixadá• Apaixonado portecnologia em todas assuas vertentes• Assiste Game of Thronese The Big Bang The...
de volta a nossaprogramação normal...
Web DebuggingProxies
Web Debuggers
Problema!
Deu erro no javascriptem produçãono Internet Explorer!
Paranóia• É cache?• Alguém subiu arquivo antigo?• Faltou arquivo no minified ou erro decompressão?• Não testamos direito?
Como resolver?
Como resolver?1. Tenta reproduzir o erro na sua máquina• Levanta o servidor• Insere dados parecidos com prod• Faz testes m...
Como resolver?2. Faz deploy para alguns ambientes (dev,staging, homog, whatever...)• Testa nos ambientes3. Faz deploy pra ...
Problemas de prod• Dados não são Lorem Ipsum (CSS errado)• Domínio (flash, postmessage...)• Casos não testados (principalme...
E se você pudesse testardireto em prod?(sem deploy)
alguns anos atrás...
http://www.yuiblog.com/blog/2008/06/27/fiddler/
Como funciona?
Sem Web DebuggerRequisição HTTPResposta HTTP
Com Web DebuggerWebDebuggerRequisição HTTPResposta HTTP Resposta HTTPRequisição HTTP
Web DebuggersSão aplicações que:• Monitoram as conexões HTTP e HTTPS quetrafegam entre a sua máquina e a rede.• Atuam como...
Web DebuggersPort ForwardingMétricasBlack ListExportação de HARThrottlingMap LocalMap RemoteRequest CreationProfilingImport...
Web DebuggersMap Local
CharlesWeb Debugging ProxyFiddlerWeb Debugging ProxyWeb Debuggers
Charles FiddlerSistema Operacional Win, Mac, Linux WinInterface Ótima PéssimaIndependente de Browser Sim SimPlugins Não Si...
CharlesWeb Debugging ProxyFiddlerWeb Debugging ProxyWeb Debuggers
Map Local
Hora do Demo!
Web DebuggersPort ForwardingMétricasBlack ListExportação de HARThrottlingMap LocalMap RemoteRequest CreationProfilingImport...
Não só javascript• Vale para qualquer tipo de request,dinâmicos ou estáticos:• Stylesheets• Imagens• XML via Flash• JSON v...
Não só browsers• API no server (consulta ao facebook)• Extensões de navegadores• Linha de comando• Qualquer aplicação que ...
Alternativas?• Wireshark• Chrome Dev Tools• alguma outra?
Perguntas?
Obrigado! ;)@lquixada
Web debugging proxies
Próximos SlideShares
Carregando em…5
×

Web debugging proxies

537 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
537
No SlideShare
0
A partir de incorporações
0
Número de incorporações
42
Ações
Compartilhamentos
0
Downloads
6
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Web debugging proxies

  1. 1. Web DebuggingProxiesO elo perdido entre o front e o back-end
  2. 2. mas antes...
  3. 3. Quem sou euLeonardo 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. 4. Quem sou euLeonardo Quixadá• Apaixonado portecnologia em todas assuas vertentes• Assiste Game of Thronese The Big Bang Theory• Gosta de dançar forró nashoras vagas@lquixada
  5. 5. de volta a nossaprogramação normal...
  6. 6. Web DebuggingProxies
  7. 7. Web Debuggers
  8. 8. Problema!
  9. 9. Deu erro no javascriptem produçãono Internet Explorer!
  10. 10. Paranóia• É cache?• Alguém subiu arquivo antigo?• Faltou arquivo no minified ou erro decompressão?• Não testamos direito?
  11. 11. Como resolver?
  12. 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. 13. Como resolver?2. Faz deploy para alguns ambientes (dev,staging, homog, whatever...)• Testa nos ambientes3. Faz deploy pra prod• Testa em prod
  14. 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. 15. E se você pudesse testardireto em prod?(sem deploy)
  16. 16. alguns anos atrás...
  17. 17. http://www.yuiblog.com/blog/2008/06/27/fiddler/
  18. 18. Como funciona?
  19. 19. Sem Web DebuggerRequisição HTTPResposta HTTP
  20. 20. Com Web DebuggerWebDebuggerRequisição HTTPResposta HTTP Resposta HTTPRequisição HTTP
  21. 21. Web DebuggersSão aplicações que:• Monitoram as conexões HTTP e HTTPS quetrafegam entre a sua máquina e a rede.• Atuam como proxies reversos respondendopelo servidor• Debugam conexões alterando dados e/ousetando breakpoints
  22. 22. Web DebuggersPort ForwardingMétricasBlack ListExportação de HARThrottlingMap LocalMap RemoteRequest CreationProfilingImportação de HARNo CookiesNo Caching
  23. 23. Web DebuggersMap Local
  24. 24. CharlesWeb Debugging ProxyFiddlerWeb Debugging ProxyWeb Debuggers
  25. 25. Charles FiddlerSistema Operacional Win, Mac, Linux WinInterface Ótima PéssimaIndependente de Browser Sim SimPlugins Não SimPreço U$50,00 GratuitoWeb Debuggers
  26. 26. CharlesWeb Debugging ProxyFiddlerWeb Debugging ProxyWeb Debuggers
  27. 27. Map Local
  28. 28. Hora do Demo!
  29. 29. Web DebuggersPort ForwardingMétricasBlack ListExportação de HARThrottlingMap LocalMap RemoteRequest CreationProfilingImportação de HARNo CookiesNo Caching
  30. 30. 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
  31. 31. Não só browsers• API no server (consulta ao facebook)• Extensões de navegadores• Linha de comando• Qualquer aplicação que faça conexõesHTTP
  32. 32. Alternativas?• Wireshark• Chrome Dev Tools• alguma outra?
  33. 33. Perguntas?
  34. 34. Obrigado! ;)@lquixada

×