View
1.625
Download
7
Category
Preview:
DESCRIPTION
An introduction to the Charles Debugging Proxy. This presentation was given at Melbourne Web Developers' Meetup on July 25, 2012.
Citation preview
DEBUGGING WITH CHARLESKeegan Street (@kstre)
Front End Dev at Deloitte Digital
Tuesday, 31 July 12
What is Charles?
CharlesBrowsers/apps
An HTTP proxy sitting between your browsers/apps and the Internet.
The Internet
Tuesday, 31 July 12
Features of Charles• Record Requests
• Throttling
• Breakpoints
• SSL Proxying
• Reverse Proxy
• Port Forwarding
• Cache Busting Tool
• Block Cookies Tool (for testing)
• Local Mappings
• Remote Mappings
• Automatic Rewrite Tool
• Blacklist
• DNS Spoofing
• Mirroring
• Repeat/Modify Requests Tool
• Basic Load Testing
• Markup Validation
• Web Interface (could be used as an API)
• Testing Across Devices
Tuesday, 31 July 12
Tuesday, 31 July 12
CACHE BUSTING TOOLTuesday, 31 July 12
A Normal HTTP Request
GET /css/global.css HTTP/1.1Host: static.southaustralia.comUser-Agent: Mozilla/5.0 ...Accept: text/css,*/*;q=0.1If-Modified-Since: Fri, 08 Jun 2012 08:24:44 GMTIf-None-Match: "06e55285045cd1:0"Referer: http://www.southaustralia.com/Accept-Language: en-usAccept-Encoding: gzip, deflateConnection: keep-alive
Tuesday, 31 July 12
An HTTP Request with Charles “No Caching”
GET /css/global.css HTTP/1.1Host: static.southaustralia.comUser-Agent: Mozilla/5.0 ...Accept: text/css,*/*;q=0.1If-Modified-Since: Fri, 08 Jun 2012 08:24:44 GMTIf-None-Match: "06e55285045cd1:0"Referer: http://www.southaustralia.com/Accept-Language: en-usAccept-Encoding: gzip, deflateConnection: keep-alivePragma: no-cacheCache-Control: no-cache
--
++
Tuesday, 31 July 12
Cache Busting Tool
Removed Added
Request If-Modified-Since: ...If-None-Match: ...
Pragma: no-cacheCache-control: no-cache
ResponseExpires: ...Last-Modified: ...ETag: ...
Expires: 0Cache-Control: no-cache
Works by adding and removing headers from HTTP requests and responses.
Tuesday, 31 July 12
REMOTE MAPPINGS& LOCAL MAPPINGS
Tuesday, 31 July 12
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
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
Tuesday, 31 July 12
Tuesday, 31 July 12
Tuesday, 31 July 12
Tuesday, 31 July 12
Tuesday, 31 July 12
Tuesday, 31 July 12
Tuesday, 31 July 12
Tuesday, 31 July 12
Tuesday, 31 July 12
Tuesday, 31 July 12
BREAKPOINTS
Tuesday, 31 July 12
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
Tuesday, 31 July 12
Tuesday, 31 July 12
Tuesday, 31 July 12
Tuesday, 31 July 12
Tuesday, 31 July 12
Tuesday, 31 July 12
Tuesday, 31 July 12
Tuesday, 31 July 12
Tuesday, 31 July 12
Tuesday, 31 July 12
Tuesday, 31 July 12
Tuesday, 31 July 12
Tuesday, 31 July 12
Recommended