पोर्ट फ़ॉरवर्डिंग की मदद से लोकल सर्वर और Chrome इंस्टेंस ऐक्सेस करें

Kayce Basques

Meggin Kearney

Sofia Emelianova

पोर्ट फ़ॉरवर्डिंग का इस्तेमाल इन कामों के लिए किया जा सकता है:

• पहला केस. Chrome के किसी दूसरे इंस्टेंस पर खोले गए टैब को डीबग करें.
• दूसरा केस. डेवलपमेंट मशीन के वेब सर्वर पर किसी साइट को होस्ट करें. इसके बाद, यूएसबी केबल के ज़रिए Android डिवाइस से कॉन्टेंट ऐक्सेस करें.

केस 2 में, पोर्ट फ़ॉरवर्डिंग आपके Android डिवाइस पर लिसनिंग टीसीपी पोर्ट के ज़रिए काम करती है, जो आपकी डेवलपमेंट मशीन पर टीसीपी पोर्ट को मैप करता है. पोर्ट के बीच का ट्रैफ़िक, यूएसबी कनेक्शन से आपके Android डिवाइस और डेवलपमेंट मशीन के बीच जाता है. इसलिए, कनेक्शन आपके नेटवर्क कॉन्फ़िगरेशन पर निर्भर नहीं करता.

इसके अलावा, अगर आपका वेब सर्वर कस्टम डोमेन का इस्तेमाल कर रहा है, तो कस्टम डोमेन मैपिंग की मदद से, अपने Android डिवाइस को उस डोमेन पर मौजूद कॉन्टेंट को ऐक्सेस करने के लिए सेट अप किया जा सकता है.

पोर्ट फ़ॉरवर्डिंग सेट अप करें

अपने मामले के आधार पर, आगे दिया गया तरीका अपनाएं.

पहला केस: किसी दूसरे Chrome इंस्टेंस पर पोर्ट फ़ॉरवर्डिंग सेट अप करना

1. --remote-debugging-port=PORT पैरामीटर के साथ कोई दूसरा Chrome इंस्टेंस चलाएं. उदाहरण के लिए:

   MacOS

   open -a "Google Chrome" --args --remote-debugging-port=PORT
   

   Windows

   start chrome --remote-debugging-port=PORT
   

   Linux

   google-chrome --remote-debugging-port=PORT
   

2. Chrome इंस्टेंस में, इसका इस्तेमाल करके डीबग किया जा रहा है:

   1. chrome://inspect/#devices खोलें.
   2. पक्का करें कि डिस्कवर नेटवर्क टारगेट पर सही का निशान लगा हो.
   3. चेकबॉक्स के आगे मौजूद, कॉन्फ़िगर करें पर क्लिक करें.

   4. टारगेट डिस्कवरी सेटिंग में localhost:PORT डालें. इसके बाद, पोर्ट फ़ॉरवर्डिंग चालू करें पर सही का निशान लगाएं, और हो गया पर क्लिक करें.

      

   5. डिवाइस पेज पर, आपको नया रिमोट टारगेट दिखेगा. आपको जिस टैब को डीबग करना है उसके बगल में मौजूद, inspect पर क्लिक करें.

      

3. डिवाइस मोड में एक नई DevTools विंडो खुलती है. सबसे ऊपर मौजूद पता बार में, उस वेबसाइट का पता डाला जा सकता है जिसे डीबग करना है.

   

4. पता बार के आगे, इनपुट के तरीकों को टॉगल किया जा सकता है.

दूसरा केस: अपने Android डिवाइस के लिए, यूएसबी से पोर्ट फ़ॉरवर्डिंग की सुविधा सेट अप करना

1. अपनी डेवलपमेंट मशीन और अपने Android डिवाइस के बीच रिमोट डीबगिंग सेट अप करें. काम पूरा हो जाने के बाद, आपको सूची में अपना Android डिवाइस दिखाई देगा.

   

2. पक्का करें कि यूएसबी डिवाइसों को खोजें पर सही का निशान लगा हो.

3. चेकबॉक्स के आगे मौजूद, पोर्ट फ़ॉरवर्डिंग पर क्लिक करें.

4. पोर्ट फ़ॉरवर्डिंग सेटिंग में, localhost:8080 डिफ़ॉल्ट रूप से सेट अप होता है. पोर्ट फ़ॉरवर्डिंग चालू करें पर सही का निशान लगाएं.

   .

5. अगर आपको अन्य पोर्ट सेट अप करने हैं, तो यह तरीका अपनाएं. अगर ऐसा नहीं है, तो इन चरणों को छोड़ें और हो गया पर क्लिक करें.

6. बाईं ओर मौजूद पोर्ट टेक्स्ट फ़ील्ड में, वह पोर्ट नंबर डालें जिससे आपको अपने Android डिवाइस पर साइट को ऐक्सेस करना है. उदाहरण के लिए, अगर आप localhost:5000 से साइट को ऐक्सेस करना चाहते हैं, तो आपको 5000 डालना होगा.

7. दाईं ओर दिए गए आईपी पता और पोर्ट टेक्स्ट फ़ील्ड में, वह आईपी पता या होस्टनेम डालें जिस पर आपकी डेवलपमेंट मशीन के वेब सर्वर पर आपकी साइट चल रही है. इसके बाद, पोर्ट नंबर डालें. उदाहरण के लिए, अगर आपकी साइट localhost:5000 पर चल रही है, तो आपको localhost:5000 डालना होगा.

8. हो गया पर क्लिक करें.

'पोर्ट फ़ॉरवर्डिंग' अब सेट अप हो गई है. सबसे ऊपर, डिवाइस के नाम के साथ-साथ पोर्ट की स्थिति दिखाने वाला इंडिकेटर भी दिख सकता है.

कॉन्टेंट देखने के लिए, अपने Android डिवाइस पर Chrome खोलें. इसके बाद, उस localhost पोर्ट पर जाएं जिसके बारे में आपने डिवाइस पोर्ट फ़ील्ड में बताया है. उदाहरण के लिए, अगर आपने फ़ील्ड में 5000 डाला है, तो आप localhost:5000 पर पहुंच जाएंगे.

कस्टम लोकल डोमेन पर मैप करना

कस्टम डोमेन मैपिंग से आप किसी Android डिवाइस पर मौजूद ऐसे वेब सर्वर से अपनी डेवलपमेंट मशीन पर मौजूद कॉन्टेंट देख सकते हैं जो कस्टम डोमेन का इस्तेमाल कर रहा है.

उदाहरण के लिए, मान लें कि आपकी साइट तीसरे पक्ष की किसी ऐसी JavaScript लाइब्रेरी का इस्तेमाल करती है जो सिर्फ़ अनुमति वाली सूची में शामिल डोमेन chrome.devtools पर काम करती है. इसलिए, इस डोमेन को localhost (यानी 127.0.0.1 chrome.devtools) से मैप करने के लिए आप अपनी डेवलपमेंट मशीन पर अपनी hosts फ़ाइल में एंट्री बनाएं. कस्टम डोमेन मैपिंग और पोर्ट फ़ॉरवर्डिंग सेट करने के बाद, आप chrome.devtools यूआरएल पर अपने Android डिवाइस पर साइट देख सकेंगे.

प्रॉक्सी सर्वर पर पोर्ट फ़ॉरवर्डिंग सेट अप करें

किसी कस्टम डोमेन को मैप करने के लिए आपको अपनी डेवलपमेंट मशीन पर प्रॉक्सी सर्वर चलाना होगा. Charles, Squid, और Fiddler प्रॉक्सी सर्वर के उदाहरण हैं.

किसी प्रॉक्सी पर पोर्ट फ़ॉरवर्डिंग सेट अप करने के लिए:

1. प्रॉक्सी सर्वर चलाएं और उस पोर्ट को नोट करें जिसका इस्तेमाल किया जा रहा है.

2. अपने Android डिवाइस पर पोर्ट फ़ॉरवर्डिंग सेट अप करें. लोकल पता फ़ील्ड में, localhost: डालें. इसके बाद, वह पोर्ट डालें जिस पर आपका प्रॉक्सी सर्वर चल रहा है. उदाहरण के लिए, अगर वह 8000 पोर्ट पर चल रहा है, तो आपको localhost:8000 डालना होगा. डिवाइस पोर्ट फ़ील्ड में वह नंबर डालें जिस पर आपको अपने Android डिवाइस को सुनना है, जैसे कि 3333.

अपने डिवाइस पर प्रॉक्सी सेटिंग कॉन्फ़िगर करना

इसके बाद, आपको प्रॉक्सी सर्वर से संचार करने के लिए अपने Android डिवाइस को कॉन्फ़िगर करना होगा.

1. अपने Android डिवाइस में, सेटिंग > वाई-फ़ाई पर जाएं.

2. उस नेटवर्क का नाम देर तक दबाएं जिससे आप कनेक्ट हैं.

3. नेटवर्क में बदलाव करें पर टैप करें.

4. बेहतर विकल्प पर टैप करें. प्रॉक्सी सेटिंग दिखाई देती है.

5. प्रॉक्सी मेन्यू पर टैप करें और मैन्युअल चुनें.

6. प्रॉक्सी होस्टनेम फ़ील्ड के लिए, localhost डालें.

7. प्रॉक्सी पोर्ट फ़ील्ड के लिए, वह पोर्ट नंबर डालें जिसे आपने पिछले सेक्शन में डिवाइस पोर्ट के लिए डाला है.

8. सेव करें पर टैप करें.

इन सेटिंग के साथ, आपका डिवाइस अपने सभी अनुरोधों को आपकी डेवलपमेंट मशीन पर प्रॉक्सी पर भेज देता है. प्रॉक्सी आपके डिवाइस की ओर से अनुरोध करता है, इसलिए आपके कस्टमाइज़ किए गए स्थानीय डोमेन के अनुरोध सही तरीके से हल किए जाते हैं.

अब अपने Android डिवाइस पर, Android डिवाइस पर कस्टम डोमेन को ठीक वैसे ही ऐक्सेस किया जा सकता है जैसे डेवलपमेंट मशीन पर किया जाता है.

अगर आपके वेब सर्वर पर कोई नॉन-स्टैंडर्ड पोर्ट उपलब्ध नहीं है, तो Android डिवाइस से कॉन्टेंट का अनुरोध करते समय पोर्ट की जानकारी देना न भूलें. उदाहरण के लिए, अगर आपका वेब सर्वर 7331 पोर्ट पर कस्टम डोमेन chrome.devtools का इस्तेमाल कर रहा है, तो अपने Android डिवाइस से साइट देखते समय आपको chrome.devtools:7331 यूआरएल का इस्तेमाल करना चाहिए.