SSL Proxy/Charles and Android trouble [closed]

I want to test Https calls from android device using Charles proxy tool. I need to see the raw request/response contents for debugging app. I've configured Charles by adding the host and port under "Proxy Settings" -> SSL Tab. When I run the app, all SSL calls seems to disappear quickly from the Charles. Does any one has any idea how to fix this issue. Charles documentation doesn't seem to have information for Android devices.

for the Android7

refer to: How to get charles proxy work with Android 7 nougat?

for the Android version below Android7

From your computer, run Charles:

1. Open Proxy Settings: Proxy -> Proxy Settings, Proxies Tab, check "Enable transparent HTTP proxying", and remember "Port" in heart.

2. SSL Proxy Settings:Proxy -> SSL Proxy Settings, SSL Proxying tab, Check “enable SSL Proxying”, and add . to Locations:

3. Open Access Control Settings: Proxy -> Access Control Settings. Add your local subnet to authorize machines on you local network to use the proxy from another machine/mobile.

In Android Phone:

1. Configure your mobile: Go to Settings -> Wireless & networks -> WiFi -> Connect or modify your network, fill in the computer IP address and Port(8888):

2. Get Charles SSL Certificate. Visit this url from your mobile browser: http://charlesproxy.com/getssl

3. In “Name the certificate” enter whatever you want

4. Accept the security warning and install the certificate. If you install it successful, then you probably see sth like that: In your phone, Settings -> Security -> Trusted credentials:

Done.

then you can have some test on your mobile, the encrypted https request will be shown in Charles:

Edit - this answer was for an earlier version of Charles. See @semicircle21 answer below for the proper steps for v3.10.x -- much easier than this approach too... :-)

For what it's worth here are the step by step instructions for this. They should apply equally well in iOS too:

1. Open Charles
2. Go to Proxy > Proxy Settings > SSL
3. Check “Enable SSL Proxying”
4. Select “Add location” and enter the host name and port (if needed)
5. Click ok and make sure the option is checked
6. Download the Charles cert from here: Charles cert >
7. Send that file to yourself in an email.
8. Open the email on your device and select the cert
9. In “Name the certificate” enter whatever you want
10. Click OK and you should get a message that the certificate was installed

You should then be able to see the SSL files in Charles. If you want to intercept and change the values you can use the "Map Local" tool which is really awesome:

1. In Charles go to Tools > Map Local
2. Select "Add entry"
3. Enter the values for the file you want to replace
4. In “Local path” select the file you want the app to load instead
5. Click OK
6. Make sure the entry is selected and click OK
7. Run your app
8. You should see in “Notes” that your file loads instead of the live one