Don’t trust emulators? Test local dev environments on real mobile devices with this simple setup
If you are like me who have had hard time debugging or replicating issues reported for mobile devices on an emulator or simulators, you are in the right place.
Lets get started real quick so that you are on your way back to coding!
What you’ll need:
1. Mac OS or Windows Machine
2. iOS or Android device
3. Charles Web Proxy installed on system of your choice
4. admin access to your device in order to make changes to install and access SSL certificates
Steps to follow to setup your local Dev to work on a real mobiles devices:
1. Install Charles Web Proxy on a system of your choice. The software can be downloaded from here
2. Open up Charles
3. Setup for system of your choice. Detailed documentation can be found here
- Mac OS
In Charles go to the Help menu and choose “SSL Proxying > Install Charles Root Certificate”.Keychain Access will open.Find the “Charles Proxy…” entry, and double-click to get info on it.Expand the “Trust” section, and beside “When using this certificate” change it from “Use System Defaults” to “Always Trust”.Then close the certificate info window, and you will be prompted for your Administrator password to update the system trust settings.
- Windows
In Charles go to the Help menu and choose “SSL Proxying > Install Charles Root Certificate”. A window will appear warning you that the CA Root certificate is not trusted.Click the “Install Certificate” button to launch the Certificate Import Wizard. The certificate must be imported into the “Trusted Root Certification Authorities” certificate store, so override the automatic certificate store selection.Complete the wizard and your Charles Root Certificate is now installed. You may need to restart IE before the installation takes affect.
- iOS Devices
Set your iOS device to use Charles as its HTTP proxy in the Settings app > Wifi settings.Open Safari and browse to https://chls.pro/ssl. Safari will prompt you to install the SSL certificate.If you are on iOS 10.3 or later, open the Settings.app and navigate to General > About > Certificate Trust Settings, and find the Charles Proxy certificate, and switch it on to enable full trust for it (More information about this change in iOS 10).Now you should be able to access SSL websites with Charles using SSL Proxying.
- Andoid Devices
As of Android N, you need to add configuration to your app in order to have it trust the SSL certificates generated by Charles SSL Proxying. This means that you can only use SSL Proxying with apps that you control.In order to configure your app to trust Charles, you need to add a Network Security Configuration File to your app. This file can override the system default, enabling your app to trust user installed CA certificates (e.g. the Charles Root Certificate). You can specify that this only applies in debug builds of your application, so that production builds use the default trust profile.Add a file res/xml/network_security_config.xml to your app:<network-security-config><debug-overrides><trust-anchors><! — Trust user added CAs while debuggable only →<certificates src=”user” /></trust-anchors></debug-overrides></network-security-config>Then add a reference to this file in your app’s manifest, as follows:<?xml version=”1.0" encoding=”utf-8"?><manifest … ><application android:networkSecurityConfig=”@xml/network_security_config” … >…</application></manifest>
4. One more additional setting you need to have charles work with our API as well. Follow the following steps to enable that:
In Charles go to the Proxy menu and choose “SSL Proxying settings. A window will appear, click the checkbox next to where it says `Enable SSl Proxying`. Click on `add` and enter `local.api.XXX.com` where it says `host` and leave `port` blank.5. Browse `https://local.XXX.com/` and you should see requests being made in Charles. If you see requests/responses in Charles, you have successfully setup Charles to record everything from your OS.
6. Go to your iPhone device and make sure both your Mac and iPhone are connected to the same network for this to work.
7. Navigate to Settings > WiFi > Click on the WiFi name you are using
8. Scroll all the way down and locate an option that says `HTTP Proxy`. Under this you should have `Configure Proxy` set to `Off` by default.
Expand `Configure Proxy` and click on `Manual`.
You should see new options to enter `Server` and `Port`.
9. Go to your Mac and grab you iP address or you can simply go to Charles > Help menu > local IP Address and copy it.
10. Go back to your phone and enter the following:
`Server` > The local IP address you copied above`Port` > 8888Hit `Save`
11. Go to Safari on your iOS device and browse `local.XXX.com`. If you are able to see the site load, it means you have successfully setup the config to access local Dev env on a real device.
