Charles
6 likes4,616 views
The document discusses Charles, an HTTP proxy tool used for debugging web applications. Key features include request recording, DNS spoofing, SSL proxying, and cache busting tools, which assist in modifying and testing web requests and responses. Additionally, it covers mapping URLs and intercepting traffic to analyze and troubleshoot issues between front-end and backend interactions.
Charles
- 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