This article was originally published at https://www.codingnepalweb.com.
When building a website, developers often need to test if their site is responsive, optimized, and works well on mobile devices. Testing this can be frustrating if they don't know an easy and proper way to do this.
In this blog post, I’ll show you how to test local websites on mobile devices in three simple steps. Although browser dev tools can help, sometimes you may need better visualization, clarity, and touch interaction with your project. At such times, testing on an actual phone may be better than using a browser's mobile screen.
To see a live preview of your local website on your phone, make sure your phone and desktop are connected to the same WiFi network. If you haven’t already, install the VS Code Editor and the Live Server extension.
Steps to Test Local Website on Phone
Once you have downloaded the VS Code editor and its Liver Server extension, now follow the given 3 steps line by line to view your local project on your phone:
1. Run the Live Server
First, open your project folder in VS Code. Then, click the “Go Live” button in the bottom right corner. This will launch a local development server for your project, typically running on port 5500
.
Your project should now be running in your default web browser. Note down the port number (5500 or another number if it’s different).
2. Find your Local IPv4 Address
Next, you need your local IPv4 address. Open Command Prompt (CMD), type ipconfig, and press Enter. Look for your IPv4 address under the "Wireless LAN adapter Wi-Fi" section. It will look something like 192.168.1.68
.
Keep in mind, that your local IP address might change if new devices connect or disconnect from your WiFi network.
3. View your Project on the Phone
Open the browser on your phone and type in your IPv4 address followed by the port number. The URL should look like this: 192.168.1.68:5500
.
If your main HTML file isn't named index.html, you’ll need to include the file name in the URL like this: 192.168.1.68:5500/filename.html
.
Now you should see a live preview of your project on your phone. Any changes you make in VS Code on your desktop will instantly reflect on your phone without needing a manual refresh.
Troubleshooting Common Errors
If you encounter an error like "The site can’t be reached" or something similar, try these troubleshooting steps:
- Double-check the IPv4 Address and Port Number: Ensure you typed the correct IPv4 address and port number in your phone's browser.
- Check Network Connection: Make sure both your phone and desktop are connected to the same WiFi network.
-
Check the File Path: Ensure the correct file path is included in the URL if your main HTML file isn't
index.html
. - Firewall Settings: Your computer's firewall might be blocking the connection. Adjust the settings to allow traffic on the port number used by the Live Server.
Conclusion
In this post, you learned how to view a live preview of your project on your phone. This method works for static projects made with HTML, CSS, and JavaScript, as well as other framework projects.
If you want to boost your accuracy, speed, and performance in coding, then check out my blog post on the Top 10 Useful VS Code Extensions for Web Developers.
If you found this guide helpful, please share it with others!
If you’ve found my content helpful, please consider buying me a coffee to support me in creating more content.
Top comments (27)
Once can also try pinggy.io/
Paste one command as
ssh -p 443 -R0:localhost:8000 -L4300:localhost:4300 qr@a.pinggy.io
and get a QR code to the public URL for your localhost port.If you are developing react app then you have to use -- host flag to expose the link to the devices connected to your network
npm run dev -- --host
run this in cmd and you'll get the link for viewing your localhost in other devices
You can specify ip address after host but I recommend leaving it as it is.
I hope this helps..
In VSCode, you can use port forwarding with your github account. Then the rendered website is available not only in the local network but also from the Internet in general, e.g., your G3/LTE network.
Can you throw more light on this please
Thanks @codingnepal for this amazing tips.
You're welcome! Glad you found the tips useful!
Nice
Thank you :)
Keep up the good work!
Sharing love from Italy ! 🇮🇹
Thank you! Greetings to Italy!
Ngrok is the beast here, try it. You can even share the public URL with anyone around the globe without exposing your IP, doing ssh, or sharing the same network.
It creates a proxy tunnel and all you have to do is map it to the right port in one command.
Thanks! I'm glad you found it useful for beginners! 👍
Thanks for sharing, this is really helpful!
You're welcome! Glad you found it helpful!
Nice! :)
Thank you :)