How to Test Your Local Web Sites on Your Mobile Devices Using XAMPP

Undoubtedly, every one of us would agree that Smart phone and new mobile devices have changed the world we live in. Everyone is so much dependent on smart phone that it has become very much necessary for the web site designers to make sure that the website being developed works well on
mobile devices also.
This smart phones and tablets have changed the development methodology or approach towards user experience and design. It won’t be incorrect to say that website designers and developers have yet not found a profound solution for challenge to keep same look and feel across different browsers
(IE, Firefox, chrome, safari etc…). And here comes a new one, support your website on various mobile devices and tablets at different resolutions.

To meet this challenge we have two design methods “Responsive web design” and “Adaptive”. Also it does not matter which one you are using until and unless the user is able to view website easily and effectively. But one of the problem designers/developers face is how to test their web application on actual devices during development. All web developers today should be testing their websites on mobile devices. I don’t mean simulators or emulators; I mean real-life devices that you hold in your hand. Simulator does not give us actual results because it is still running on desktop system.

Wouldn’t it be nice to test your local website on local computer from actual mobile devices? Let us see how we can do that.

Perquisites/Assumptions
1. It is being assumed that XAMP/WMAP or MAMP is installed in you system and you are doing local development using any of the Apache, MySQL and PHP webserver.
2. Your local computer and your mobile device is connected to same network via WIFI or any other connection. (Both desktop and mobile has to be on same network).
Step 1 – Go to XMAPP control panel and make sure you apache and MySQL is working. Also make
sure your website is running.

Step 2
Find your IP address of local computer.
Run CMD as administrator
And on CMD screen type ipconfig and the screen will appear with text

Step 3
Browse you site with URL on your local browser, this is to make sure site is working with IP address also.

Suppose you website is located at localhost/demosite/
It should be brows able with http://192.168.1.4/demosite.
Note – Make sure you setup BASE URL with IP ADDRESS
Step 4
Point your iPad or iPhone web browser to your IP address
You now have your IP address. It may look something like 192.168.1.4. Now, for the moment of truth, open a browser on your device at try browsing to the  directory using the IP address. In my case, I entered http://192.168.1.4/demosite. You’re now testing a website on your
computer from a remote device like an iPad.

That was easy, now you can do test and fix responsive mobile specific bugs easily before moving site to internet.

Hope this will help. Happy coding..!!!