Configuring Charles Proxy and LiveReload to work together

Anyone who has worked with me in the past several years has heard me spout the merits of using Charles Proxy when developing and/or debugging any form of HTTP(S) call between a client and server. Whether you’re developing simple Web forms, custom mobile APIs, REST services, Flash remoting calls, etc., you’ll be hard-pressed to find a better way to view the underbelly of your application’s communications without taking a job with the NSA. But if you’ve found this article, you probably already know many of its benefits, so I won’t go into them here.

Another app, LiveReload, has recently become an essential part of my development toolkit, too, but it took me a while to figure out how to get it to play nicely with Charles (LiveReload uses a Web socket to communicate between the browser and its own server, and Charles apparently thwarted this background communication by default, rendering LiveReload useless when Charles was in play).

In the end, the fix was dead simple, but I’m placing it here to help others and possibly remind my future self as well:

  1. Launch Charles
  2. In the main menu, choose Proxy>Proxy Settings
  3. Select the Options tab
  4. In the Bypass Proxies section, enter the following:

  5. Press OK
  6. Never worry about Charles interfering with LiveReload’s web service again.

That’s really all there is to it. Now go make great things.

blog comments powered by Disqus