Testing HTML on Real Devices - No wires required

Testing on Real devices

Making html pages or templates should be easy. If you are beginner w3schools.com might be the right place to start with. It is not just only developing things, testing is another important aspect of any our work.

Say if you have developed a simple html layout or a page, and you tested it using chrome browser and it looks so good and when you test it on other browsers like firefox and IE, there could few things that you would correct and make it works well on these browsers.



No matter how much you test, there will be always few things those only show up on real devices and another reason is that the end users are actually real users. We cannot just say that it's been tested with simulation environment and it should perfectly works fine on real devices.

Few simple steps to test your work on real devices.

Start a Local Server

                                                                                                     Image:Glassfish

Install any open source server like glassfish, or apache( XAMPP). I am not going through details of how to install the server. I use xampp, it is an exe file and gets installed in seconds and start the apache server from it. There should be htdocs folder which is your root folder.

For example I created a simple HTML page and placed under htdocs/test/my.html


ALSO KNOW: SOME BEST CSS FRAMEWORKS
                       SOME JAVASCRIPT FRAMEWORKS

Keep your mobile device and desktop on the same network

I have wifi in my room. So, usually all my devices mobile, tablet and desktop and play-station :-) are on the same network.

Find the IP address of your desktop

Getting the IP address of your machine should be easy. On windows open your cmd prompt and type ipconfig and hit enter. You should be able to see something like IPV4 address(198.168.8.101) under WIFI properties.

Testing on your desktop

If you are running a local server on your machine you should be able to see your sample html page as mentioned in the above location.

http://localhost/test/my.html

Testing on your mobile

When you want to test on mobile, use the IP Address of your machine( the machine on which your server is running).

Open the mobile web browser. open the webpage like this.

http://IP.ADDRESS.OF.YOUR.DESKTOP/test/my.html

In my case it is http://198.168.8.101/test/my.html

Hope you liked my article and thanks for reading.

NOTE: There could be better ways for mobile browser testing. Will let you know if I come across.