Have you ever wondered how your web project looks on a real mobile device while you're developing it? And why should you even care when browser developer tools are at your disposal?

Well, the thing is, some devices (looking at you, Apple) tend to handle certain CSS declarations in unexpected ways. That’s why it’s always a good practice to check how your site looks on an actual mobile device. I was recently reminded of this the hard way - my project looked perfect on my Windows machine, and everything seemed fine in the browser’s simulated device views. I typically test on a narrow mobile (360px wide), a larger mobile, iPhones, two tablet variants, a standard desktop (1920×1080), and a larger display (2560×1440). But despite these checks, my client wasn’t happy with how certain parts of the project appeared on his iPhone.

So, if you’re new to web development or just need a quick refresher, here’s an easy way to preview your local web project on a real mobile device - without installing any extra software or emulators.

Step-by-step guide

Step 1.

Open up a local port and make sure you’re project is being served there. Let’s say, you’re working on a Next.js project. Next.js npm run dev opens a local port 3000:

So when you open your browser and enter http://localhost:3000/, you will see your project there.

Step 2.

Make sure your mobile device is connected to the sam`e network as your PC/Mac.

Step 3.

Find out what is your IPv4 address.

Windows

If you’re on a Windows machine, use the command ipconfig in your terminal. Then you will see something like this:

Find the line that says ‘IPv4 address”. This is what you need. There are also other ways to find out your IP address on Windows (1).

Mac

If you’re on a Mac machine, the command is a bit different. Enter ipconfig getifaddr en0 in your terminal. As the output you should get your IP address. There are also other ways to find out your IP address from a Mac (2).

Step 4.

Once you have your local IP address, enter in in the browser of your mobile device, followed by the port at which your local project is running. So, in my previous example of a Next.js app, that would be http://[yourIPv4Address]:3000.

Step 5

Enjoy! Now you can live preview your project on your other devices, like a pro.

⚠ Important Note: Some firewalls or security settings may block access. If it doesn’t work, check your firewall settings and allow incoming connections for your development server.

Explanation

This is neat, but why does it work?

It all comes down to basic networking. Your local IP address (formatted as 192.168.x.x) is a unique identifier for your machine within your local network. When you run a development server (e.g., React, Next.js, or a local server like XAMPP), your computer listens for incoming connections on a specific port (e.g., 3000, 9001, etc.).

On your mobile device, entering your local IP address followed by the port number tells the browser to connect to your computer’s server over the same Wi-Fi network. This allows you to preview your locally hosted website on a real mobile device.

References

(1) https://support.microsoft.com/en-us/windows/essential-network-settings-and-tasks-in-windows-f21a9bbc-c582-55cd-35e0-73431160a1b9 - IP address on Windows

(2) https://www.wikihow.com/Find-Your-IP-Address-on-a-Mac - IP address on Mac