Very often, you might have come across a thought of testing your web page in development instead of resizing your web browser on PC while working on responsiveness. How will you fee if I tell you there’s an easy way to do this , without any plugin.
All you need is a VS Code and a smartphone device(iOS/android). Neat requirements, isn’t it.
Ensure that both your development device with Visual Studio Code and your mobile device are in the same network(very important).
Even the steps are shorts. Let me brief :
i) Installing Live Server Extension on Visual Studio Code.
ii) Go to your project directory.
Open you integrated terminal in VS Code and enter the command ‘ipconfig’ . Note your IPV4 adress.
In my case, it’s 192.168.1.8.
iii) Now , snap the ‘Go Live’ on the right hand corner of the screen.
Your local development server will be live on your local machine .
In my case , my project is live at my localhost:5500 port.
This is all I need.
v) And the final step.
Open any modern web browser in your smartphone.Go to the address:
x:y
where , replace:
x with IPV4 adress and y with port number.
In my case , it’s :
192.168.1.8:5500
You will see your web page live.
You might get an error as “Connection Refused”.
A simple way to solve this is to unblock your port (5500, in my case) via Firewall.
CONCLUSION:
Additionally, you can do this with any web browser supported device, be it a smartphone, PC or tablet. This method has been tested by me only with frontend projects.I am yet to test it wit frameworks and backends like SQL. Your checks and comments on this is really appreciated. I will update on this topic soon. Till then, you are welcome to try it and update me (fixes if any) .
THANK YOU !
Top comments (0)