← All articles

How to test a localhost website on mobile (phone and mobile view)

Open a local development site on a real phone or in a mobile view: LAN IP and --host, Chrome port forwarding, tunnels, emulator addresses, and common fixes.

To open a localhost site on your phone, make your dev server listen on the network (usually a --host flag), connect the phone to the same Wi-Fi, and visit your computer’s local IP address with the port, such as http://192.168.1.20:5173. If the network blocks that, use Chrome’s port forwarding over USB or a tunnel. And if you only need to see the mobile layout, you can skip the phone and open localhost in a mobile view in desktop Chrome.

Fastest: a mobile view of localhost in desktop Chrome

localhost on your computer works in any desktop tool, so this needs no network setup:

  • Chrome DevTools device mode: open DevTools, toggle the device toolbar with Ctrl + Shift + M (Cmd + Shift + M on a Mac), pick a phone. See the Chrome mobile emulator guide.
  • A mobile view extension that supports local pages. Mobile View Extension works on localhost and keeps the phone view on as you move between local pages, so you can leave it open while you build.

Many online “responsive checkers” cannot do this, because they load your URL from their own servers and cannot reach your machine.

When you need real touch, the real keyboard or Safari, move to a phone.

Method 1: same Wi-Fi and your computer’s local IP

1. Make the dev server listen on all interfaces

Most dev servers listen only on localhost (127.0.0.1) by default, which other devices cannot reach. Tell them to listen on the network:

Tool Command
Vite npm run dev -- --host
Astro npm run dev -- --host
Next.js next dev -H 0.0.0.0
Create React App / webpack dev server set HOST=0.0.0.0 or host: '0.0.0.0'
Python python -m http.server 8000 --bind 0.0.0.0

Vite and Astro print a “Network” URL when started with --host. That is the address to open on the phone.

2. Find your local IP address

If your tool does not print it: on macOS, open System Settings > Wi-Fi > Details; on Windows, run ipconfig and look for the IPv4 address; on Linux, run ip addr. It usually starts with 192.168. or 10..

3. Open it on the phone

Connect the phone to the same Wi-Fi network and visit http://<your-ip>:<port>.

If it does not load

  • Firewall. macOS and Windows may block incoming connections to Node or Python. Allow the app when prompted, or add a rule for the port.
  • Guest or office networks. Many isolate devices from each other (“client isolation”). Use Method 2 or 3.
  • Hard-coded localhost URLs. If your front end calls http://localhost:8080/api, the phone will try to reach itself. Use relative URLs or an environment variable for the API host.
  • CORS and cookies. A new origin (192.168.1.20:5173) can break cookie or CORS settings that only allow localhost.

Method 2: Chrome port forwarding to an Android phone

With an Android phone connected by USB and USB debugging enabled, Chrome can map a port on the phone to your computer:

  1. Open chrome://inspect/#devices on your computer.
  2. Click Port forwarding, add your port (for example 5173) and the target localhost:5173, and tick Enable port forwarding.
  3. On the phone, open http://localhost:5173 in Chrome.

Because the phone uses localhost, cookies and CORS behave as on your computer, and you can inspect the page from desktop DevTools. Setup steps for USB debugging are in testing on Android.

Method 3: a tunnel with a public HTTPS URL

A tunnel gives your local server a temporary public address. This works on any network and gives you HTTPS, which some features need (service workers, geolocation, the camera, secure cookies).

Two common options:

  • Cloudflare Tunnel: cloudflared tunnel --url http://localhost:5173 prints a temporary trycloudflare.com URL.
  • ngrok: ngrok http 5173 prints a forwarding URL (requires a free account).

Anyone with the URL can reach your dev server while the tunnel runs, so stop it when you are done and do not expose admin panels or real data. Some frameworks also block unknown host names by default; Vite, for example, needs the tunnel domain in server.allowedHosts.

Method 4: emulators and simulators

  • Xcode Simulator (Mac): shares the Mac’s network, so http://localhost:5173 works directly in simulated Safari. See testing on iPhone.
  • Android Studio emulator: localhost points to the emulator itself. Use http://10.0.2.2:5173 to reach your computer.

Which method to use

Situation Use
Checking layout while coding Mobile view in desktop Chrome
Testing touch and keyboard on your own phone at home Same Wi-Fi + local IP
Android phone, office network, need DevTools Chrome port forwarding
HTTPS-only feature or sharing with a colleague Tunnel
Safari behaviour without an iPhone Xcode Simulator

Frequently asked questions

Why can’t my phone open localhost?

On the phone, localhost means the phone itself. Use your computer’s local IP address and make the dev server listen on the network with --host or 0.0.0.0.

How do I test localhost on an iPhone?

Use the same Wi-Fi and your computer’s IP address, a tunnel, or the Xcode Simulator on a Mac, where localhost works directly.

Can I see the mobile version of localhost without a phone?

Yes. Use DevTools device mode or a mobile view extension that supports local pages.

View your next website as mobile.

Add the mobile view Chrome extension and open device previews for the tab you are already working in.