Uw browser is sterk verouderd. Upgrade je browser voor een betere gebruikers ervaring en veiligheid.

Artikels

Charles Web Debugging Proxy

Geschreven door

Charles Web Debugging Proxy

Om al dat verkeer achter de schermen op te vangen en te analyseren zijn er verschillende tools beschikbaar. Fiddler voor Windows en de Firefox plugins Firebug Live HTTP Headers en HTTPFox zijn er zo enkele. Maar de koning onder de HTTP monitors is toch wel Charles. Neen niet de stoffige flapoor uit Wales maar een Java applicatie geschreven door de in Nieuw-Zeeland gevestigde Karl von Randow.

Charles is een HTTP Proxy, wat zoveel wil zeggen dat het zichzelf als tussenpersoon plaatst tussen je browser en het internet. Alle verkeer van het internet naar je browser en andersom passeert door Charles. Requests, responses, headers, cookie informatie, etc ... er is niets wat Charles niet ziet.

Charles Web Debugging Proxy: asset chart

Features

HTTP proxy/monitor

Charles is bijzonder handig bij het analyseren van XMLHTTPRequests (Ajax requests) en Flash applicaties. Het is waar dat je dit ook kan met Firebug maar waar Charles echt uitblinkt zijn de extra's zoals het automatisch parsen van XML en JSON in een datastructuur. Je ziet in een oogopslag of een request zijn resultaat bereikt heeft en welke data als antwoord van de server terugkwam.

Charles Web Debugging Proxy: asset chart

Daarnaast kan je ook een handig overzicht opvragen van alle assets die op een bepaalde website geladen worden, in chronologisch overzicht. Daarbovenop komt de search feature in dit overzicht wat het zeer gemakkelijk maakt om net die ene request terug te vinden tussen de vele andere data die ingeladen wordt op je webpagina.

Charles Web Debugging Proxy: asset chart

Ook is er de mogelijkheid om breakpoints te zetten op bepaalde requests, dan houdt Charles de pagina even 'on load' zodat je de request kan bewerken. Zo kan je extra headers meesturen, postvars bewerken, etc ... voor de request wordt uitgestuurd. Hetzelfde kan je ook met de response.

Speed throttling

Aangezien alle verkeer via Charles passeert kan Charles ook gemakkelijk kiezen welke gegevens en aan welke snelheid ze doorgegeven worden naar je browser. Zo kan je met Speed throttling gemakkelijk een trage internetverbinding simuleren en zo je je applicatie testen voor gebruikers die geen breedband internet hebben. Er zijn niet veel dialup gebruikers meer maar wel steeds meer mobiele gebruikers en daar kan deze feature wel eens zijn nut bewijzen.

Crossplatform en application independent

Charles is geschreven in Java wat maakt dat het helemaal cross platform is, Windows, Linux, MacOSX, ... alle besturingssystemen die Java ondersteunen kunnen Charles gebruiken.

Daarnaast is het geen browserplugin (hoewel je een plugin voor Firefox nodig hebt maar daarover later meer) maar draait Charles naast je browsers wat maakt dat je het kan gebruiken om zowel Internet Explorer, Safari, Chrome, ... etc ... verkeer mee te monitoren. Het hoeft zelfs geen browser te zijn, alle verkeer naar het internet wordt (hetzij via portforwarding) door Charles gevolgd.

Debugging

Naast het gewoon bekijken van request en response in verschillende formaten kan Charles ook gemakkelijk requests bewerken en opnieuw uitvoeren zonder dat je in je browser een nieuwe actie moet uitvoeren. Request openen, bewerken en opnieuw verzenden.
Je kan zelfs breakpoints plaatsen op bepaalde scripts. Komt Charles een breakpoint tegen dan kan je de request aanpassen voor deze verstuurd wordt. Zeer handig bij het debuggen, beveiligen en analyseren van je scripts.

Nog een zeer interessante feature is de mogelijkheid om bepaalde requests naar een lokaal bestand te mappen. De Mapping tool in Charles maakt een alias aan voor een url naar een map op jouw computer. Als Charles een request naar een deze url zou zien zal hij deze request naar de file op jouw computer doen in plaats van naar de file op de server. Dit maakt het heel gemakkelijk om bepaalde scripts te debuggen op een live site of om het vervelende werk van constant uploaden te omzeilen.

Remote mapping is mogelijk nog interessanter omdat je op deze manier een bepaalde url naar een andere url kan mappen. Je creëert als het ware een alias voor een url op je website naar een andere url. Ook weer zeer handig bij het debuggen van scripts.
Dit is ook mogelijk met de Rewrite tool ingebouwd in Charles, die een zeer geavanceerde engine biedt om door middel van regular expressions bepaalde url's te herschrijven naar andere url's.

Conclusie

Met bovenstaande features hebben we nog maar het topje van de ijsberg behandeld. De rest kan je zelf beter al doende leren gebruiken. Charles biedt nog SSL proxying, AMF parsing, W3C validation of response and requests, en nog veel meer.

Er zijn natuurlijk ook wel enkel (kleine) nadelen aan Charles. Het grootste nadeel is dat het nagware is wat zoveel wil zeggen dat de tool zichzelf na 30 minuten automatisch afsluit tenzij je een licentie koopt. Voor sporadische gebruikers is dit natuurlijk geen probleem maar voor actieve gebruikers zit er niets anders op dan een licentie te kopen voor $50.

Een ander klein nadeel is dat Firefox zijn eigen proxying doet en je dus een plugin nodig hebt voor deze browser om met Charles te kunnen werken, het installeren van deze plugin is gelukkig erg simpel en weinig werk.

Ik zou zeggen probeer Charles zelf zeker uit, eens je het gebruikt wordt het al snel een tool die je niet kan missen tijdens je ontwikkelproces.