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.
