Charles

2,938 views

Published on

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

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
  •    Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
2,938
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
51
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Charles

  1. 1. DEBUGGING WITH CHARLES Keegan Street (@kstre) Front End Dev at Deloitte DigitalTuesday, 31 July 12
  2. 2. What is Charles? An HTTP proxy sitting between your browsers/apps and the Internet. Browsers/apps The Internet CharlesTuesday, 31 July 12
  3. 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 MappingsTuesday, 31 July 12
  4. 4. Tuesday, 31 July 12
  5. 5. CACHE BUSTING TOOLTuesday, 31 July 12
  6. 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-aliveTuesday, 31 July 12
  7. 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-cacheTuesday, 31 July 12
  8. 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. 9. REMOTE MAPPINGS & LOCAL MAPPINGSTuesday, 31 July 12
  10. 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. 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. 12. Tuesday, 31 July 12
  13. 13. Tuesday, 31 July 12
  14. 14. Tuesday, 31 July 12
  15. 15. Tuesday, 31 July 12
  16. 16. Tuesday, 31 July 12
  17. 17. Tuesday, 31 July 12
  18. 18. Tuesday, 31 July 12
  19. 19. Tuesday, 31 July 12
  20. 20. Tuesday, 31 July 12
  21. 21. Tuesday, 31 July 12
  22. 22. BREAKPOINTSTuesday, 31 July 12
  23. 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. 24. Tuesday, 31 July 12
  25. 25. Tuesday, 31 July 12
  26. 26. Tuesday, 31 July 12
  27. 27. Tuesday, 31 July 12
  28. 28. Tuesday, 31 July 12
  29. 29. Tuesday, 31 July 12
  30. 30. Tuesday, 31 July 12
  31. 31. Tuesday, 31 July 12
  32. 32. Tuesday, 31 July 12
  33. 33. Tuesday, 31 July 12
  34. 34. Tuesday, 31 July 12
  35. 35. Tuesday, 31 July 12
  36. 36. Tuesday, 31 July 12
  37. 37. www.charlesproxy.comTuesday, 31 July 12

×