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

      

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, स्क्विड, और Fiddler सर्वर हैं.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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