I found myself needing to test failed and intercepted network requests the other day. But i needed to see how they would manifest themselves in the UI so i needed a tool that intercepted the messages between the browser and the webserver. This called for a proxy tool.
After a bit of searching my colleague Neil Rees (http://blogs.imeta.co.uk/nrees/Default.aspx) recommended CharlesProxy. (http://www.charlesproxy.com/)
Simply download the trial edition and Firefox add-on (Not sure it works with Firefox 3.5 though) Both are available from the Charles Download page (http://www.charlesproxy.com/download/)
When you run the app for the first time you will see the following page
Charles Proxy Main Window
Set the Firefox Proxy
First thing to do is to set the Firefox add-on as the proxy. Open the Proxy Menu Option and click the Mozilla Firefox Proxy option.
Setting Firefox as proxy
As you will see, the ‘Recording (Session)’ will be running. This means that Charles is monitoring and capturing all requests going through Firefox.
Note: Make sure you only have the tabs open you need otherwise all other tab activity (refreshes etc) will also be captured.
Start Recording
Once you have set this then simply start surfing away on the site you want to test. You will see that all of the traffic is captured in the ‘Structure’ tab on the left.
Showing pages and subpages collected through browsing. Example here is using Charles’ own website
Each website you visit will have it’s own root folder. All pages within this site will be shown in the tree.
Throttling Bandwidth
A cool feature of Charles is the ability to throttle bandwidth. Great for testing performance and reliability across multiple network speeds.
Open up Proxy > Throttle Settings.
Tick the ‘Enable Throttling’ checkbox if it’s not already checked. Dropping down the throttle preset drop down allows you to choose some already defined speeds. Or you can specify your own.
Preset throttle settings in Charles
Once the ‘Enable Throttling’ is checked then the ‘Proxy > Throttling’ will have a tick next to it:
Throttling enabled
Simply run through your site and observe, explore and report. The site will now be running through a throttled bandwidth.
Intercepting / Withholding web requests
Once you have recorded some requests (or you know exactly which request you want to intercept) you can start applying a breakpoint. A breakpoint, will intercept and hold the relevant web request until you decide whether to let it continue, if at all.
To add a breakpoint open Proxy > Breakpoints.
Then enable breakpoints using the checkbox. Then add a new breakpoint. Then complete the relevant information.
Adding a breakpoint
Or an easier way. Simply navigate in the structure column to the page you want to breakpoint and right click on it and click ‘breakpoint’.
Right click menu on website
Nothing significant will show other than the small red button on the menu bar will now be depressed. This button toggles breakpoints on/off. If you re-open breakpoints from Proxy > Breakpoints then you will see there is now a new breakpoint in the list. Double click it to bring up the breakpoint information. Shown in the screen below.
Breakpoint information
Now revisit the website and navigate to the page that has the breakpoint applied. Charles will now stop all requests and present the following screen.
Note, there will be multiple requests (POST, GET) and there could be multiple of these, so make sure you stop/modify or execute the right request.
Breakpoint in action
There are now three options.
You can cancel which cancels that breakpoint and allows the message to continue as usual.
You can abort, which will snaffle the message, resulting in page / request not found. You will obviously get different results for GET and POST requests.
Aborted breakpoint
Or you can execute. This will simply execute the request. But the cool thing with execute is that you can edit the request before executing. Open the ‘Edit Request’ tab at the top and then edit away. (Note: there are more tab options at the bottom)
Edit breakpoint then execute
Once complete. Execute the request and see what happens.
Summary
Charles Proxy is one of the best tools I’ve encountered for managing web requests. It’s given me some great insight in to some of our products and how they behave during requests and failures.
Overall it’s a good tool for simulating network failures, potential man in the middle tampering and general network throttling.
By the way, the trial version runs for 30 minutes and then closes but it’s really not that expensive to buy anyway.