Localhost on mobile: फ़ोन से localhost वेबसाइट कैसे खोलें और टेस्ट करें

अपने फ़ोन पर localhost साइट खोलने के लिए dev सर्वर को नेटवर्क पर सुनने दें (आम तौर पर --host फ़्लैग से), फ़ोन को उसी Wi-Fi से जोड़ें, और पोर्ट के साथ अपने कंप्यूटर का लोकल IP पता खोलें, जैसे http://192.168.1.20:5173। अगर नेटवर्क इसे रोकता है, तो USB पर Chrome का port forwarding या कोई टनल इस्तेमाल करें। और अगर आपको सिर्फ़ मोबाइल लेआउट देखना है, तो फ़ोन छोड़ दें और localhost को डेस्कटॉप Chrome में मोबाइल व्यू में खोलें।

सबसे तेज़: डेस्कटॉप Chrome में localhost का मोबाइल व्यू

आपके कंप्यूटर का localhost हर डेस्कटॉप टूल में चलता है, इसलिए इसमें नेटवर्क का कोई सेटअप नहीं चाहिए:

• Chrome DevTools का device mode: DevTools खोलें, Ctrl + Shift + M (Mac पर Cmd + Shift + M) से device toolbar चालू करें, कोई फ़ोन चुनें। देखें Chrome मोबाइल एमुलेटर गाइड।
• लोकल पेज सपोर्ट करने वाला मोबाइल व्यू एक्सटेंशन। Mobile View Extension localhost पर काम करता है और लोकल पेजों के बीच जाने पर भी फ़ोन व्यू चालू रखता है, इसलिए आप बनाते समय इसे खुला छोड़ सकते हैं।

कई ऑनलाइन “responsive checker” यह नहीं कर पाते, क्योंकि वे आपका URL अपने सर्वर से लोड करते हैं और आपकी मशीन तक नहीं पहुँच सकते।

जब असली touch, असली कीबोर्ड या Safari चाहिए, तब फ़ोन पर जाएँ।

तरीका 1: वही Wi-Fi और आपके कंप्यूटर का लोकल IP

1. Dev सर्वर को सभी इंटरफ़ेस पर सुनने दें

ज़्यादातर dev सर्वर डिफ़ॉल्ट रूप से सिर्फ़ localhost (127.0.0.1) पर सुनते हैं, जहाँ दूसरे डिवाइस नहीं पहुँच सकते। उन्हें नेटवर्क पर सुनने को कहें:

--host के साथ शुरू करने पर Vite और Astro एक “Network” URL दिखाते हैं। फ़ोन पर यही पता खोलना है।

2. अपना लोकल IP पता ढूँढें

अगर आपका टूल इसे नहीं दिखाता: macOS पर System Settings > Wi-Fi > Details खोलें; Windows पर ipconfig चलाएँ और IPv4 address देखें; Linux पर ip addr चलाएँ। यह आम तौर पर 192.168. या 10. से शुरू होता है।

3. फ़ोन पर खोलें

फ़ोन को उसी Wi-Fi नेटवर्क से जोड़ें और http://<your-ip>:<port> खोलें।

अगर यह लोड नहीं होता

• Firewall। macOS और Windows Node या Python पर आने वाले कनेक्शन रोक सकते हैं। पूछे जाने पर ऐप को अनुमति दें, या पोर्ट के लिए नियम जोड़ें।
• गेस्ट या ऑफ़िस नेटवर्क। कई नेटवर्क डिवाइस को एक-दूसरे से अलग रखते हैं (“client isolation”)। तरीका 2 या 3 इस्तेमाल करें।
• कोड में लिखे localhost URL। अगर आपका फ़्रंट-एंड http://localhost:8080/api को कॉल करता है, तो फ़ोन ख़ुद तक पहुँचने की कोशिश करेगा। relative URL या API होस्ट के लिए environment variable इस्तेमाल करें।
• CORS और cookies। नया origin (192.168.1.20:5173) उन cookie या CORS सेटिंग्स को तोड़ सकता है जो सिर्फ़ localhost की अनुमति देती हैं।

तरीका 2: Android फ़ोन पर Chrome का port forwarding

USB से जुड़े Android फ़ोन पर USB debugging चालू हो, तो Chrome फ़ोन के किसी पोर्ट को आपके कंप्यूटर से जोड़ सकता है:

1. अपने कंप्यूटर पर chrome://inspect/#devices खोलें।
2. Port forwarding पर क्लिक करें, अपना पोर्ट (जैसे 5173) और टारगेट localhost:5173 जोड़ें, और Enable port forwarding पर टिक करें।
3. फ़ोन पर Chrome में http://localhost:5173 खोलें।

क्योंकि फ़ोन localhost इस्तेमाल करता है, cookies और CORS वैसे ही चलते हैं जैसे आपके कंप्यूटर पर, और आप डेस्कटॉप DevTools से पेज इंस्पेक्ट कर सकते हैं। USB debugging सेटअप के स्टेप Android पर टेस्टिंग में हैं।

तरीका 3: पब्लिक HTTPS URL वाला टनल

टनल आपके लोकल सर्वर को एक अस्थायी पब्लिक पता देता है। यह किसी भी नेटवर्क पर चलता है और HTTPS देता है, जिसकी कुछ फ़ीचर को ज़रूरत होती है (service workers, geolocation, कैमरा, secure cookies)।

दो आम विकल्प:

• Cloudflare Tunnel: cloudflared tunnel --url http://localhost:5173 एक अस्थायी trycloudflare.com URL दिखाता है।
• ngrok: ngrok http 5173 एक forwarding URL दिखाता है (फ़्री अकाउंट चाहिए)।

टनल चलते रहने तक URL वाला कोई भी आपके dev सर्वर तक पहुँच सकता है, इसलिए काम ख़त्म होते ही उसे बंद करें और एडमिन पैनल या असली डेटा खुला न छोड़ें। कुछ फ़्रेमवर्क डिफ़ॉल्ट रूप से अनजान होस्ट नाम भी रोकते हैं; जैसे Vite में टनल का डोमेन server.allowedHosts में डालना पड़ता है।

तरीका 4: एमुलेटर और simulator

• Xcode Simulator (Mac): Mac का नेटवर्क ही इस्तेमाल करता है, इसलिए सिम्युलेटेड Safari में http://localhost:5173 सीधे चलता है। देखें iPhone पर टेस्टिंग।
• Android Studio का एमुलेटर: यहाँ localhost ख़ुद एमुलेटर की ओर इशारा करता है। अपने कंप्यूटर तक पहुँचने के लिए http://10.0.2.2:5173 इस्तेमाल करें।

कौन-सा तरीका कब

अक्सर पूछे जाने वाले सवाल

मेरा फ़ोन localhost क्यों नहीं खोल पाता?

फ़ोन पर localhost का मतलब है ख़ुद फ़ोन। अपने कंप्यूटर का लोकल IP पता इस्तेमाल करें और dev सर्वर को --host या 0.0.0.0 से नेटवर्क पर सुनने दें।

iPhone पर localhost कैसे टेस्ट करें?

वही Wi-Fi और अपने कंप्यूटर का IP पता, कोई टनल, या Mac पर Xcode Simulator इस्तेमाल करें, जहाँ localhost सीधे चलता है।

क्या फ़ोन के बिना localhost का मोबाइल वर्शन देख सकते हैं?

हाँ। DevTools का device mode या लोकल पेज सपोर्ट करने वाला मोबाइल व्यू एक्सटेंशन इस्तेमाल करें।