Indeed it is an important question to ask and I do feel happy to answer it.
Now to start with cross device mobile testing is certainly an important task before and even after launching a website, it is a continuous process to make sure your customers are having good user experience.
Now the first way is to set up an iOS Simulator for Testing
Here is how you can do it. Source - LambdaTest
So let’s have a look at the process of setting up an iOS simulator. This will enable you to test any iOS compatible app.
Apple does not offer a standalone simulator on the App Store. Rather, look for and download Xcode which is freely available on the store. Xcode is an integrated development environment (IDE). It enables the development of applications for all Apple operating systems including iOS, MacOS, tvOS, and WatchOS. Xcode has been developed by Apple.
Technically, you have downloaded the simulator, but, there are still a couple of steps. These will get you to the iOS simulator.
After downloading Xcode, you will need to download the iOS simulator environment. To do this, open Xcode and navigate to preferences. ( Xcode-> Preferences) Here in ‘Components’ download the iOS version as per your requirement.
After obtaining the desired iOS version, go to Xcode-> Open Developer Tools-> Simulator. This will open the iPhone simulator which can be used for testing.
You have the option to select your desired device by going into Hardware-> iOS-> ‘Desired Device’.
Benefits of using the in-built simulator
The most important feature is the ability to use multiple simulators enabling cross-testing. So, you could use an iPhone simulator and a WatchOS simulator simultaneously to test certain app features requiring both. In addition, the Xcode simulator is the best option for small teams.
It also offers accessibility to core APIs. These include development for Game Centre and Healthkit. While no amount of accessibility can match a real device, Xcode offers an extremely close experience without any associated costs.
Debugging Local Mobile Pages on Android Phone Using Chrome Developer Tools
While developing a mobile web application, device or browser issue are very common. Mobile emulator plugins or built in emulators in browsers can be used to deal with them, but often bugs are faced by developers that occur in actual devices, not in emulators. The best way to deal with them is to debug the application directly in the device. Remote debugging is a feature that allows you to debug the application in your mobile the same way as done in desktop. Let’s take a deep dive towards how to execute the process.
What Will You Need
· The requirements are very simple and the system can be configured easily without purchasing any extra software or hardware. For your PC you will need
· Chrome version 32 or above installed and properly working.
· If you are using Windows, USB drivers are required.
· A USB cable to connect your Android device with the desktop or laptop.
For the Android device, the following things are required.
· Latest version of Google Chrome.
· Android version 4 or above.
· USB debugging enabled in the developer options for Android.
How to Enable USB Debugging in Android
If you are using Android 4.0 and 4.1,
· Go to Settings
· Navigate to Developer Options and enable it
· Once Developer Option is enabled, you will be able to see the USB Debugging checkbox.
· Scroll to the checkbox and check it
· A pop-up notification will appear informing that you are now a developer.
The process is a bit complicated in Kitkat or other higher versions.
· Navigate to settings and go to About Phone option
· A new window will open. Scroll to the bottom and you will be able to see the Build Number.
· Tap it 7 times. In the lower section of the page you will get a pop-up that you are now a developer.
· After going back, you will be able to access the Developer Options menu.
· The rest is same, check USB debugging, and you are done.
Setup Localhost on your Desktop
If your website is in Angular or any other framework, hosting it locally will not a problem. Recent versions of Angular use NPM for code building and once executed, it automatically configures a proxy server and hosts the application on your local machine which can be browsed via http://localhost:8080.
If you are developing a normal website without any advanced JS framework, you will need to create a proxy server on your workstation. This can be done by using WAMPServer, which comes with the latest versions of PHP, Apache and MySQL. Once installed, WampServer will create a directory under which, project folders can be created. The sites can be directly previewed at localhost once development is completed.
Connect Both Devices
Make sure that the Android device as well as your workstation are connected to the same Wi-Fi network. Even if you don’t have Wi-Fi network, you can use USB tethering to connect both the devices.
Viewing Locally Hosted Websites in Android
The final step is easy. Open Google Chrome on your mobile and type the IP Address or the hostname on the address bar of the browser. You will be able to view the content of the localhost on your mobile browser. Navigate to the site which you hosted on your workstation and you will be able to view the contents and test it on a mobile device.
Testing Locally Hosted Pages on LambdaTest
While doing the above process is not very difficult, it is still a little cumbersome and is prone to errors. A easier way is to test on LambdaTest cross browser compatibility testing platform. At LambdaTest you get instant on-demand access to android mobile browsers where you can run and debug your pages. In addition these browsers comes with integrated chrome developer tools that can be launched by a click of a button. You can connect you system with LambdaTest cloud platform via simple SSH protocol based tunnel application and test your locally or privately hosted webpages on LambdaTest app.