Access local dev environment on a device and Charles Proxy and SSL?

Question

I need to access my local dev environment (MAMP Pro) on a device. I've got this working fine for my non-SSL site but I cant get it working for my site that requires SSL.

Both my local dev machine and my device are on the same wifi network. In the wifi settings on the device I've set the HTTP proxy to manual, the server is my dev environment IP and the port is the default 8888 (although it still works if I change this to 8080).

I've already set up a virtual host entry for local.site1.com in MAMP Pro. That url now works on both my local dev environment and the device.

If I try to go to my SSL site at https://local.site2.com this works on the dev environment but device gives this message:

Safari cannot open the page.

The error was: "There was a problem communicating with the secure web proxy server (HTTPS).".

Charles Proxy seems to be the standard way to access a local development environment on a device using the domain name specified in the hosts file, however I'm happy to use any solution that works.

Answer 1

Have you tried to refresh or restart it? You might want to recheck setting the HTTP Proxy to manual and recheck that your local dev machine and your device are on the same wifi network. Also, make sure your IP is right and the proxy is running.

---

NOTE that if you use SSL for your data requests:

-Go to Proxy -> Proxy Settings -> SSL -> Check “Enable SSL” and add the host and port for your requests

-You may also want to disable Desktop and web proxies from the Proxy dropdown so you can better isolate your app traffic

---

You might want to turn off cellular data to ensure all traffic is run through Wi-Fi/Charles Proxy

---

Then launch Charles and switch to the “sequence” tab in the top window to see each call and status as they are made in real-time, including response size and duration. Click on a request to view details in the bottom pane including: Overview, Request, Response & Summary.

Make sure you explore the options for the different data types. For example, if your response is an image, you can see the actual image and dimensions. If your app consumes JSON, you have a choice of a JSON Tree Navigator, or you can “copy response” by right-clicking the request in the top “Sequence” tab. Paste the results into something like http://www.uize.com/examples/json-prettifier.html for easy-to-read output.

---

DURING LAUNCH, CHECK THESE:

1.Is your app making a reasonable amount of data requests to balance startup time and pre-fetching, to speed up “next pages”?

2.Is any request fetching more data than necessary?

3.Are the response times high due to server configuration or a poorly performing backend

---

CHECK THESE DURING APP USAGE:

1.Is there a common navigation path that is slow and could benefit from pre-fetching at launch?

2.Is data actually coming from the cache rather than initiating a new data request?

3.Is any tracking data being sent (e.g. Omniture, Google Analytics, or other third-party services), and if so is it sent properly ? Are there any requests being made erroneously or repeatedly due to a coding error?

4.If you serve video, is the proper encoding/format selected? (Charles can throttle speeds to mimic wireless phone connections.) Are images appropriately sized for the device?

Answer 2

If using Charles, you will also need to install its certificate:

iOS 4 and later On the device, set your HTTP proxy to use Charles, and then browse to http://www.charlesproxy.com/getssl to install the certificate.