Fiddler2 – una tecnica di troubleshooting

Fiddler2 è un utilissimo tool per Internet Explorer che mi è stato più volte utile. La particolarità di Fiddler è che funziona come proxy lato client, cioè si pone come strato intermedio tra il browser e le chiamate fatte al server. Questa particolarità può spesso essere utile perchè si è in grado di intercettare le chiamate http uscenti dal browser prima che arrivino ad un server e, dall’altro lato, intercettare le risposte dal server al browser.

Questo consente non solo di vedere ad esempio gli header della chiamata http dal client verso il server, ma anche di modificarli prima che arrivino a quest’ultimo. Posso anche aggiungere e rimuovere header. Questa particolarità mi è stata spesso utile in passato nello sviluppo di filtri ISAPI.

Avendo accesso all’intera richiesta http prima di essere inviata al server e alla risposta prima che possa essere restituita al browser è possibile fare anche di più.

Di recente mi è capitato di avere un client che faceva una richiesta http ad un file su un server, che aveva un nome completamente differente da quello realmente presente: ok lasciamo stare il perchè, quello che mi è capitato è che non avevo acesso al codice del client e tanto meno al codice del server: sì la vita è strana a volte.

Vediamo come usare Fiddler2, che va preventivamente installato, per intercettare e modificare queste chiamate.

Ho cercato di semplificare lo scenario in cui mi trovato per illustrare i passi da seguire.

Attivare Fiddler

Dal menù Tool di IE , troverete Fiddler2.

Test di un sito in locale

Se la pagina che chiamate inizia con localhost, Fiddler non è in grado di intercettare la richiesta, la tecnica che uso di solito è, una volta attivato fiddler, scrivere al posto di localhost ipv4.fiddler, come vedete in figura:

Bloccare la richiesta in uscita prima che arrivi al server o viceversa:

Se andate sotto Rules, quindi Automatic Breakpoints, quindi potete selezionare di intercettare la richiesta uscente: “Before Requests”.

Potete anche cliccare nella barra in basso, per attivare la funzionalità più rapidamente, come vedete in figura:

Facciamo una richiesta

Ora se facciamo una richiesta dal browser, vedremo che Fiddler la blocca, dandoci appunto la possibilità di lavorare sugli header http:

In figura vedete che la richiesta #1 è stata bloccata, nella finestra degli header della richiesta, vedete che un menù contestuale mi permette di fare diverse operazioni sugli header.

Una segnalazione in rosso, mi dice che la richiesta uscente è stata bloccata, posso, premendo il tasto giallo, farla proseguire al server e bloccare a questo punto la risposta che ritorna, oppure , dopo aver fatto le modifiche del caso, premere il tasto verde e semplicemente completare la chiamata senza più interruzioni.

Nel mio caso voglio modificare la chiamata GET alla pagina pippo.htm, che viene eseguita all’interno di un’applicazione Silverlight. Facendo doppio click sulla chiamata GET posso modificarne il contenuto, come segue:

Quindi come potete vedere ho modificato il nome del file che viene richiesto dall’applicazione e che so essere presente sul server.

Premendo ora il tasto giallo, la richiesta prosegue, viene elaborata dal server, ma prima di arrivare al client viene, se possibile, bloccata. La risposta deve avere un dominio intercettabile da fiddler. Quindi non deve avere localhost come nome di dominio, ma nel mio caso reale non era un problema perchè la risposta arrivava da un server su internet a cui non avevo accesso.

Conclusione

Fiddler è sicuramente un tool che trovo utilissimo in scenari in cui una semplice developer toolbar difficilemente arriva. Lo svantaggio è che spesso la configurazione soprattutto se si usa in locale (localhost +porta) non è velocissima. Ma in altri casi in cui volgio ispezionare l?HTML o i CSS una developer toolbar è più immediata. Quindi l’accoppiata IE8 Developer Toolbar + Fiddler penso sia una buona accoppiata per chi sviluppa applicazioni web.