DEV Community

Cover image for How to Test Local Website on Mobile Devices
CodingNepal
CodingNepal

Posted on • Edited on • Originally published at codingnepalweb.com

How to Test Local Website on Mobile Devices

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).

Run the Live Server

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.

Find your Local IPv4 Address

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.

View your Project on Phone

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.

Buy Me A Coffee

Top comments (27)

Collapse
 
ghoshbishakh profile image
Bishakh Ghosh • Edited

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.

Image description

Collapse
 
akhileshgautam1903 profile image
Akhilesh gautam

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

Image description
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..

Collapse
 
andrewkimdev profile image
Andrew B Kim

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.

Collapse
 
tevin_enadeghe_906b3c9eb3 profile image
Tevin Enadeghe

Can you throw more light on this please

Collapse
 
patadiarushabh profile image
Rushabh Patadia

Thanks @codingnepal for this amazing tips.

Collapse
 
codingnepal profile image
CodingNepal

You're welcome! Glad you found the tips useful!

Collapse
 
syedmuhammadaliraza profile image
Syed Muhammad Ali Raza

Nice

Collapse
 
codingnepal profile image
CodingNepal

Thank you :)

Collapse
 
litlyx profile image
Antonio | CEO at Litlyx.com

Keep up the good work!
Sharing love from Italy ! 🇮🇹

Collapse
 
codingnepal profile image
CodingNepal

Thank you! Greetings to Italy!

Collapse
 
sourabpramanik profile image
Sourab Pramanik

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.

Collapse
 
codingnepal profile image
CodingNepal

Thanks! I'm glad you found it useful for beginners! 👍

Collapse
 
codecruncher86 profile image
Chris Newton

Thanks for sharing, this is really helpful!

Collapse
 
codingnepal profile image
CodingNepal

You're welcome! Glad you found it helpful!

Collapse
 
martinbaun profile image
Martin Baun

Nice! :)

Collapse
 
codingnepal profile image
CodingNepal

Thank you :)