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 + Mon a Mac), pick a phone. See the Chrome mobile emulator guide. - A mobile view extension that supports local pages. Mobile View Extension works on
localhostand 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
localhostURLs. If your front end callshttp://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 allowlocalhost.
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:
- Open
chrome://inspect/#deviceson your computer. - Click Port forwarding, add your port (for example
5173) and the targetlocalhost:5173, and tick Enable port forwarding. - On the phone, open
http://localhost:5173in 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:5173prints a temporarytrycloudflare.comURL. - ngrok:
ngrok http 5173prints 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:5173works directly in simulated Safari. See testing on iPhone. - Android Studio emulator:
localhostpoints to the emulator itself. Usehttp://10.0.2.2:5173to 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.