Как открыть локальный сайт (localhost) на телефоне и в мобильном виде

Как открыть локальный сайт на реальном телефоне или в мобильном виде: IP в локальной сети и --host, проброс портов в Chrome, туннели, адреса в эмуляторах и частые проблемы.

Чтобы открыть localhost на телефоне, заставьте dev-сервер слушать сеть (обычно флагом --host), подключите телефон к той же Wi-Fi-сети и откройте локальный IP компьютера с портом, например http://192.168.1.20:5173. Если сеть это блокирует, используйте проброс портов Chrome по USB или туннель. А если нужно только посмотреть мобильную вёрстку, телефон можно не трогать и открыть localhost в мобильном виде в десктопном Chrome.

Быстрее всего: мобильный вид localhost в десктопном Chrome

localhost на вашем компьютере доступен любому десктопному инструменту, так что настраивать сеть не нужно:

Режим устройства в Chrome DevTools: откройте DevTools, включите панель устройств сочетанием Ctrl + Shift + M (Cmd + Shift + M на Mac), выберите телефон. Подробнее в статье про эмулятор мобильных устройств в Chrome.
Расширение для мобильного просмотра с поддержкой локальных страниц. Mobile View Extension работает на localhost и сохраняет мобильный вид при переходах между локальными страницами, так что его можно держать открытым во время разработки.

Многие онлайн-сервисы проверки адаптивности так не умеют: они загружают ваш URL со своих серверов и до вашего компьютера не достают.

Когда понадобятся настоящие касания, настоящая клавиатура или Safari, переходите на телефон.

Способ 1: одна Wi-Fi-сеть и локальный IP компьютера

1. Пусть dev-сервер слушает все интерфейсы

Большинство dev-серверов по умолчанию слушают только localhost (127.0.0.1), а он недоступен другим устройствам. Скажите им слушать сеть:

Инструмент	Команда
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	задать `HOST=0.0.0.0` или `host: '0.0.0.0'`
Python	`python -m http.server 8000 --bind 0.0.0.0`

Vite и Astro при запуске с --host выводят адрес «Network». Его и нужно открыть на телефоне.

2. Узнайте локальный IP-адрес

Если инструмент его не выводит: на macOS откройте Системные настройки > Wi-Fi > Подробнее, на Windows выполните ipconfig и найдите IPv4-адрес, на Linux выполните ip addr. Обычно адрес начинается с 192.168. или 10..

3. Откройте его на телефоне

Подключите телефон к той же Wi-Fi-сети и откройте http://<ваш-ip>:<порт>.

Если не открывается

Брандмауэр. macOS и Windows могут блокировать входящие подключения к Node или Python. Разрешите приложение, когда появится запрос, или добавьте правило для порта.
Гостевые и офисные сети. Многие изолируют устройства друг от друга («изоляция клиентов»). Используйте способ 2 или 3.
Жёстко прописанные адреса localhost. Если фронтенд обращается к http://localhost:8080/api, телефон будет стучаться сам в себя. Используйте относительные URL или переменную окружения для адреса API.
CORS и cookie. Новый источник (192.168.1.20:5173) может сломать настройки cookie или CORS, разрешающие только localhost.

Способ 2: проброс портов Chrome на Android-телефон

Если Android-телефон подключён по USB и на нём включена отладка по USB, Chrome может связать порт на телефоне с вашим компьютером:

Откройте на компьютере chrome://inspect/#devices.
Нажмите Port forwarding, добавьте порт (например, 5173) и цель localhost:5173, отметьте Enable port forwarding.
На телефоне откройте в Chrome http://localhost:5173.

Поскольку телефон использует localhost, cookie и CORS ведут себя так же, как на компьютере, а страницу можно инспектировать из десктопного DevTools. Как включить отладку по USB, описано в статье про проверку сайта на Android.

Способ 3: туннель с публичным HTTPS-адресом

Туннель даёт локальному серверу временный публичный адрес. Это работает в любой сети и даёт HTTPS, который нужен некоторым функциям (service worker, геолокация, камера, защищённые cookie).

Два распространённых варианта:

Cloudflare Tunnel: cloudflared tunnel --url http://localhost:5173 выводит временный адрес на trycloudflare.com.
ngrok: ngrok http 5173 выводит адрес для переадресации (нужен бесплатный аккаунт).

Пока туннель работает, ваш dev-сервер доступен любому, у кого есть ссылка, поэтому закрывайте его после работы и не открывайте наружу админки и реальные данные. Некоторые фреймворки по умолчанию блокируют неизвестные имена хостов; Vite, например, требует добавить домен туннеля в server.allowedHosts.

Способ 4: эмуляторы и симуляторы

Xcode Simulator (Mac): использует сеть Mac, поэтому http://localhost:5173 открывается прямо в симулируемом Safari. См. статью про проверку сайта на iPhone.
Эмулятор Android Studio: там localhost указывает на сам эмулятор. Чтобы достучаться до компьютера, используйте http://10.0.2.2:5173.

Какой способ выбрать

Ситуация	Что использовать
Проверка вёрстки во время разработки	Мобильный вид в десктопном Chrome
Проверка касаний и клавиатуры на своём телефоне дома	Одна Wi-Fi-сеть и локальный IP
Android-телефон, офисная сеть, нужен DevTools	Проброс портов Chrome
Функция только для HTTPS или показать коллеге	Туннель
Поведение Safari без iPhone	Xcode Simulator

Частые вопросы

Почему телефон не открывает localhost?

На телефоне localhost означает сам телефон. Используйте локальный IP компьютера и заставьте dev-сервер слушать сеть через --host или 0.0.0.0.

Как открыть localhost на iPhone?

Через одну Wi-Fi-сеть и IP компьютера, через туннель или в Xcode Simulator на Mac, где localhost работает напрямую.

Можно ли посмотреть мобильную версию localhost без телефона?

Да. Используйте режим устройства в DevTools или расширение для мобильного просмотра с поддержкой локальных страниц.