Testing devices — without devices

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

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!

iOS

All the 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.

Android

Well hidden icon for our tresures

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.

Play Store will be very useful

There are many handy features, including call simulation, that will help to test real life usage.

Plenty to choose from

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.

Windows

They are serious!

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

https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/

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.)

More than enough options
I’ve went with VirtualBox
Windows testing on a Mac!

This is charles proxyable too, you just need to go to proxy settings in Windows.

Mac

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.

Samsung

Nice real devices, shared with others

Browserstack

Even has iOS debugging using Chrome Dev Tools (source)

Remember to Follow!

Tech Lead