During the building of a website, developers often need to test whether their site is responsive, optimized, and works efficiently on mobile devices or not, and it could be frustrating if they don’t know an easy and proper way to do it.
In this blog, I’ll show you in three simple steps How to Test Local Websites on Mobile Devices. As you know, browser dev tools can be used here. But sometimes you may need better visualization, clarity, and touch interaction with your project on the phone. At this time, testing on an actual phone could be better than a browser’s mobile screen.
So, to view a live preview of your local website or project on the phone, ensure your phone and desktop are connected to the same WiFi network. After this, install VS Code Editor if you don’t have and Live Server extension.
Steps to Test Local Website on Phone
Once you have done the above steps, now open your project folder in VS Code and follow the given 3 steps line by line:
1. Run the Live Server
To launch the local development server of your project, click on the “Go Live” button that lies in the bottom right corner. Now, your project should be running on the default web browser with a port number of 5500
.
Later, this port number will be needed, and it’s fine if your port number is different than mine because the 5500 has been used by any other application.
2. Find your Local IPv4 Address
To find your IPv4 address, open CMD (Command Prompt) > type ipconfig > press enter. Now, you’ll see the Windows IP configuration details. Scroll down, and you’ll get your IPv4 address 192.168.1.68
under Wireless LAN adapter Wi-Fi. Your IP address might be different than mine.
Remember, your local IP address will be changed automatically if the new device or other device connects or disconnects from the same WiFi network.
3. View your Project on the Phone
Type your IPv4 address with your local development server port in the mobile browser and open it. The URL should look like this: IPv4 address:Port number i.e. 192.168.1.68:5500
Remember, if your root HTML file name is not index, then you’ve to write the file path after the port number like this: 192.168.1.68:5500/filename.html
That’s all; now you can see the live preview of your project directly on the phone. Every time you make changes to the codes in the desktop VS Code editor, the instant changes reflect on your phone too. No need for a manual refresh!
If your page didn’t load on the phone or you got an error like “the site can’t be reached,” then double-check the IPv4 address and the server port number.
Conclusion
In this blog post, you learned how to view a live preview of your project on the phone. Keep in mind, not only you can use the above method to view a preview of a static project made with HTML, CSS, and JavaScript. You can also view your other framework projects.
If you want to boost your accuracy, speed, and performance in coding, then check out my blog on the Top 10 Useful VS Code Extensions for Web Developers.
If you found this blog helpful, don’t forget to share it with others.
thank you so much for this info
You’re most welcome.
your website is too much hanging
try to reduce some ads
Thanks for the feedback; I’ll work on it.
If you want any content writer please hire me.
Now, we’re not hiring anyone.
thank you
dear sir plz make a video about php admin.
because some people don’t know how to create a databases.
can my friends from other place can see it?
Yes, if you both are connected to the same router.
Thank you sir ^_^
Hello Sir please can you create a code in node js that generate spf, dmarc, dkim, cnanme of a domain name and send emails with it? I am really having a problem doing this. Thanks I await your feedback
Sir your work is amazing , being i started my journey in learning coding , its has helped me a lot to became a good fronted end developer , sir i request you to make possible video on git hub, how to understand Linux , also make video on data structure and algorithm , your work is highly appreciated . waiting for more amazing content thanking you sir , if possible get in touch with me sir thanking you yours faithfully }
This is really useful. Thank You.
Might be helpful to mention that Network Discovery need to be turned on for this to work. Great Post!