How to Test Your Website Locally on Mobile

I found this the easiest way to test how my website looks and behaves on mobile devices in real time. Chrome's mobile viewer doesn't always behave like a real device. No need to upload to neocities for every little change.

Step 1: Assuming you already have a copy of your website on your computer (If not, please do! It's very important to back up your website!!) open up VS Code and go to your website's folder. Run your website locally using the VS Code Live Server extension. You'll notice the URL looks like this: 127.0.0.1:5500 (5500 is the default port Live Server uses.)

Step 2: Make sure your mobile device is connected to the same Wi-Fi/network as your computer.

Step 3: Find your local IP address. First open the terminal:

On Windows type: ipconfig enter. scroll until you find a line that says "IPv4 Address"
On macOS type: ipconfig getifaddr en0 enter

Your local IP address will look something like:
192.168.x.x

Step 4: On your mobile device's browser, type:
http://192.168.x.x:5500

Replace 192.168.x.x with your actual IP address, and 5500 with the port shown in your Live Server URL (if it's different).

You can see the changes in real time as you save your files, and that's how to view your website locally on mobile!