There is increasing shift from access to web on mobile devices from PCs and laptops. It has become imperative for all websites to have mobile version nowadays to cater to traffic from mobile devices. Web developers today are expected to know how to create responsive websites so that websites load properly on PCs,laptops,tablets and mobile phones. While developing websites it becomes common practice for such developers to check how there websites look on mobile screens.
The two popular ways today to do this are either to open chrome or firefox browsers developer tools and click on responsive view to check how your website looks on phone or to upload your code on various websites to check how your website will look on this devices.
However both this methods are equally frustrating since in first method you need to keep switching your view between responsive and desktop while in the second you need to keep on uploading your code even for simple changes.
Therefore I came out with the solution of accessing website hosted on localhost of your laptop on your mobile by which you can see the changes you make to your website on your laptop directly on your mobile phone.
The prerequisite for this method in that you need to have android studio or simply adb installed on your laptop and your android version must be greater than 5.0(API 21). I will be sharing a tutorial on installing adb soon, for now you can just google about how to install adb on your laptop.
The steps are as followed:
1)First make sure that you are serving your website on a port of localhost for development.
For example your site should be served on address like:
where you are serving your site on port 9000.
If you are on linux the command for serving your website on specific port is:
python -m SimpleHTTPServer 9000
Run this command inside the folder where your index file is saved.
2)Connect your device to laptop via usb and enable usb debugging in developer options.Allow usb debugging from your device when prompt is displayed on your phone.
3)Run the following command to check that your device is recognised by adb
It should give an output like this:
3)Run the following command to access port 9000 of your laptop from mobile phone.
adb reverse tcp:9000 tcp:9000
4)Next simply open browser in your phone and enter address http://localhost:9000/ and voila
You will be able to see your website served by laptop’s localhost directly on your phone.