An introduction to the Charles Debugging Proxy. This presentation was given at Melbourne Web Developers' Meetup on July 25, 2012.

1. DEBUGGING WITH CHARLES
Keegan Street (@kstre)
Front End Dev at Deloitte Digital
Tuesday, 31 July 12

2. What is Charles?
An HTTP proxy sitting between your browsers/apps and the Internet.
Browsers/apps The Internet
Charles
Tuesday, 31 July 12

3. Features of Charles
• Record Requests • Automatic Rewrite Tool
• Throttling • Blacklist
• Breakpoints • DNS Spoofing
• SSL Proxying • Mirroring
• Reverse Proxy • Repeat/Modify Requests Tool
• Port Forwarding • Basic Load Testing
• Cache Busting Tool • Markup Validation
• Block Cookies Tool (for testing) • Web Interface (could be used as
an API)
• Local Mappings
• Testing Across Devices
• Remote Mappings
Tuesday, 31 July 12

4. Tuesday, 31 July 12

5. CACHE BUSTING TOOL
Tuesday, 31 July 12

6. A Normal HTTP Request
GET /css/global.css HTTP/1.1
Host: static.southaustralia.com
User-Agent: Mozilla/5.0 ...
Accept: text/css,*/*;q=0.1
If-Modified-Since: Fri, 08 Jun 2012 08:24:44 GMT
If-None-Match: "06e55285045cd1:0"
Referer: http://www.southaustralia.com/
Accept-Language: en-us
Accept-Encoding: gzip, deflate
Connection: keep-alive
Tuesday, 31 July 12

7. An HTTP Request with Charles
“No Caching”
GET /css/global.css HTTP/1.1
Host: static.southaustralia.com
User-Agent: Mozilla/5.0 ...
Accept: text/css,*/*;q=0.1
- If-Modified-Since: Fri, 08 Jun 2012 08:24:44 GMT
- If-None-Match: "06e55285045cd1:0"
Referer: http://www.southaustralia.com/
Accept-Language: en-us
Accept-Encoding: gzip, deflate
Connection: keep-alive
+ Pragma: no-cache
+ Cache-Control: no-cache
Tuesday, 31 July 12

8. Cache Busting Tool
Works by adding and removing headers
from HTTP requests and responses.
Removed Added
If-Modified-Since: ... Pragma: no-cache
Request If-None-Match: ... Cache-control: no-cache
Expires: ...
Expires: 0
Response Last-Modified: ...
Cache-Control: no-cache
ETag: ...
Tuesday, 31 July 12

9. REMOTE MAPPINGS
& LOCAL MAPPINGS
Tuesday, 31 July 12

10. Remote Mappings
• Configure a mapping from one URL to another
to transparently serve assets from a different
location.
• Example usage: Map jquery-1.5.1.js to
code.jquery.com/jquery-1.7.2.js on your
production server and see if it breaks.
Tuesday, 31 July 12

11. Local Mappings
• Same as remote mappings, but they are used to
map remote URLs to local assets.
• Example usage: Make your production server
load all JavaScript and CSS files from your local
development folder.
Tuesday, 31 July 12

12. Tuesday, 31 July 12

13. Tuesday, 31 July 12

14. Tuesday, 31 July 12

15. Tuesday, 31 July 12

16. Tuesday, 31 July 12

17. Tuesday, 31 July 12

18. Tuesday, 31 July 12

19. Tuesday, 31 July 12

20. Tuesday, 31 July 12

21. Tuesday, 31 July 12

22. BREAKPOINTS
Tuesday, 31 July 12

23. Breakpoints
• Intercept requests and responses and modify
them before they are sent.
• Is the front-end sending incorrect parameters?
Try modifying the request.
• Is the server returning something unexpected?
Try modifying the response.
Tuesday, 31 July 12

24. Tuesday, 31 July 12

25. Tuesday, 31 July 12

26. Tuesday, 31 July 12

27. Tuesday, 31 July 12

28. Tuesday, 31 July 12

29. Tuesday, 31 July 12

30. Tuesday, 31 July 12

31. Tuesday, 31 July 12

32. Tuesday, 31 July 12

33. Tuesday, 31 July 12

34. Tuesday, 31 July 12

35. Tuesday, 31 July 12

36. Tuesday, 31 July 12

37. www.charlesproxy.com
Tuesday, 31 July 12