Disclaimer: This article is mostly for webapps, but obviously the iOS and Android part will be shared for react-native or just classic native development.
The setup I’m about to show you will let you bugfix and test 90% of the time without getting up from your chair to get a device, but keep in mind that network properties (jitter, speed, delay) and Hardware properties (memory, speed, concurrency, framerate) won’t be real life like.
Step 1. You need a Mac
If you don’t have a Mac, there is pretty much no way to develop for iOS, even for react-native, you’ll want to test rapidly on iOS, so the obvious is, you’ll need a Mac. In the US, iOS takes 28% of ALL website traffic, even including desktops, so most cases you can’t avoid it.
Once you have a decent Mac, you can cover quite big part of the popular combinations. There was a WebFont bug I couldn’t reproduce on iOS Simulator for example, but nearly all styling, CSS, or layout issues can be handled effectively. So keep in mind to always develop like a seasoned engineer, not to rely on timings and shaky logics, and remember those poor users with slow 3G network on an old phone about to go underground.
So let’s get started!
If you download XCode, you’ll get access to quite a number of combinations,
the current XCode supports from iOS 8.1 on iPhone 4S to latest iOS on iPhone X ( including the bezel), all coming with Safari. You can hook onto them with Charles Proxy too, and it is ideal for react-native development as well. It also uses iOS like caching, so keep in mind that you might not be running your latest changes.
For any reason if you want earlier iOS, you’ll have to downgrade your XCode (good luck), and if you want to have future iOS, you can download Xcode Beta to make sure your app is future proof, will be looking good, so you won’t have to fix live issues on a sunny iOS release day.
For Android, you’ll have to download Android Studio. Here you’ll have to create a Hello World app to trigger the Emulating options, click AVD (Android Virtual Device) Manager:
and there you can create your own configurations for Virtual Devices, or choose from the given list, where Nexus 5X has Android Play Store as well, so you can test bugixes with notifications, call simulations, Facebook integration, and other cool stuff, or just use it to have an app installed on your Mac that has no alternatives on desktop.
There are many handy features, including call simulation, that will help to test real life usage.
I’ll exlpain the reasoning in a later article, but for start you can live fine with Nexus 5, Galaxy S7+ phones and a Nexus 7 tablet.
Testing different versions of IE would be hard on Windows as well, but luckily there is an easy solution for Mac and Windows too!
Microsoft is extremely great providing VMs in different containers for all their major browsers from IE8 to be tested on a neat little combo at
Furthermore, these VMs can be used to install Chrome and Firefox for testing as well! (To be honest I’m not too sure if that complies with the TOC I’ve accepted but oh well.)
This is charles proxyable too, you just need to go to proxy settings in Windows.
And this is quite obvious, but still gives me a good chance to share my setup.
Safari, Chrome, Chrome Canary, Firefox, Firefox Beta. I usually don’t work with Chrome Canary and Firefox Beta, but having an alternative Session in them helps me testing caching, loading times, concurrent users, and other neat stuff plus they let me to choose one browser for non-testing purposes. Canary also has better debug options, or helps you prepare for loosing the good ones.
Since most Android devices used are Samsung branded, and Samsung Browser has a significant share of web traffic, it’s wise to have their Remote Test Lab at use. A good positive that it’s quality stuff, and its free, but unfortunately this one doesn’t work with Charles Proxy.
is a good alternative if for some reason you need anything above couldn’t cover. From Windows setups to Android phones, you’re covered, it has nice chrome extension to forward data, so you can test non live development, and the Free tier is useful on its own already.
Remember to Follow!
I really hope you liked this article, please comment, clap, subscribe for more!