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

www.charlesproxy.com

Tuesday, 31 July 12