How to Test a Local Website on Mobile Devices
Ensuring your website looks and works well on mobile devices is crucial. Testing this can be easy if you know the right steps. In this post, I’ll guide you through testing your local website on your phone in three simple steps. While browser developer tools are useful, testing on an actual mobile device provides better visualization and interaction.
Steps to Test Your Local Website on Your Phone
-
Run the Live Server
Open your project in VS Code. Click the "Go Live" button at the bottom right. This starts a local server, usually on port 5500. Your project will open in your default browser. Note the port number.
-
Find Your Local IPv4 Address
Open Command Prompt (CMD) on your computer. Type
ipconfigand press Enter. Locate your IPv4 address under the "Wireless LAN adapter Wi-Fi" section. It will look something like 192.168.1.x. -
View Your Project on Your Phone
Open the browser on your phone. Enter your IPv4 address followed by the port number, like this: 192.168.1.x:5500. If your main HTML file isn’t named index.html, include the file name in the URL.
You should now see a live preview of your project on your phone. Changes made in VS Code will instantly reflect on your phone without needing a refresh.
Troubleshooting Common Issues
If you face issues like "The site can't be reached," try these solutions:
- Verify the IPv4 Address and Port Number: Ensure they are correctly entered.
- Check Network Connection: Both devices should be on the same WiFi network.
- Check the File Path: Make sure to include the correct file name in the URL if necessary.
- Adjust Firewall Settings: Your firewall may block the connection. Allow traffic on the Live Server port.
