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

Kayce Basques

Meggin Kearney

Sofia Emelianova

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

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

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

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

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

अपने मामले के हिसाब से, अगला तरीका अपनाएं.

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

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

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

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

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