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