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

Kayce Basques

Meggin Kearney

Sofia Emelianova

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

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

दूसरे मामले में, पोर्ट फ़ॉरवर्डिंग आपके 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. डिवाइस में वापस जाकर, आपको एक नया रिमोट टारगेट दिखेगा. आपको जिस टैब को डीबग करना है उसके बगल में मौजूद, जांच करें पर क्लिक करें.

      

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