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

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

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

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

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

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

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 का इस्तेमाल करना चाहिए.