web debugging proxies
TRANSCRIPT
Web Debugging Proxies
O elo perdido entre o front e o back-end
mas antes...
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
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
de volta a nossa programação normal...
Web Debugging Proxies
Web Debuggers
Problema!
Deu erro no javascript
em produçãono Internet Explorer!
Paranóia
• É cache?
• Alguém subiu arquivo antigo?
• Faltou arquivo no minified ou erro de compressã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 manuais
• Codifica
Como resolver?2. Faz deploy para alguns ambientes (dev,
staging, homog, whatever...)
• Testa nos ambientes
3. Faz deploy pra prod
• Testa em prod
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
E se você pudesse testar direto em prod?
(sem deploy)
alguns anos atrás...
http://www.yuiblog.com/blog/2008/06/27/fiddler/
Como funciona?
Sem Web Debugger
Requisição HTTP
Resposta HTTP
Com Web Debugger
WebDebugger
Requisição HTTP
Resposta HTTP Resposta HTTP
Requisição HTTP
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
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
Web Debuggers
Map Local
CharlesWeb Debugging Proxy
FiddlerWeb Debugging Proxy
Web Debuggers
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
CharlesWeb Debugging Proxy
FiddlerWeb Debugging Proxy
Web Debuggers
Map Local
Hora do Demo!
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
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
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
Alternativas?
• Wireshark
• Chrome Dev Tools
• alguma outra?
Perguntas?
Obrigado! ;)@lquixada