Guide to testing your local website on mobile devices: Simple steps for developers

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

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

2. Find Your Local IPv4 Address

   Open Command Prompt (CMD) on your computer. Type ipconfig and press Enter. Locate your IPv4 address under the "Wireless LAN adapter Wi-Fi" section. It will look something like 192.168.1.x.

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

Conclusion

This method helps you see how your website performs on a mobile device, ensuring it’s optimized and responsive. This approach is suitable for both static sites and those using frameworks. Happy testing!