रिमोट डीबग Android डिवाइस

Kayce Basques

Sofia Emelianova

Windows, Mac या Linux कंप्यूटर से, Android डिवाइस पर मौजूद लाइव कॉन्टेंट को रिमोटली डीबग करें. इस ट्यूटोरियल में आपको इनके बारे में जानकारी मिलेगी:

• रिमोट डीबगिंग के लिए, अपने Android डिवाइस को सेट अप करें. साथ ही, उसे अपने डेवलपमेंट मशीन से ढूंढें.
• अपने डेवलपमेंट मशीन से, Android डिवाइस पर लाइव कॉन्टेंट की जांच करें और उसे डीबग करें.
• अपने Android डिवाइस से, डेवलपमेंट मशीन पर मौजूद DevTools इंस्टेंस पर स्क्रीनकास्ट करें.

पहला चरण: अपने Android डिवाइस का पता लगाना

यहां दिया गया वर्कफ़्लो, ज़्यादातर उपयोगकर्ताओं के लिए काम करता है. ज़्यादा मदद पाने के लिए, समस्या हल करना: DevTools, Android डिवाइस का पता नहीं लगा रहा है लेख पढ़ें.

1. अपने Android डिवाइस पर डेवलपर के लिए सेटिंग और टूल स्क्रीन खोलें. उपयोगकर्ता के डिवाइस पर डेवलपर के लिए सेटिंग और टूल कॉन्फ़िगर करना लेख पढ़ें.
2. यूएसबी डीबगिंग चालू करें को चुनें.
3. अपने डेवलपमेंट मशीन पर, Chrome खोलें.
4. chrome://inspect#devices पर जाएं.

5. पक्का करें कि यूएसबी डिवाइसों को ढूंढने की सुविधा चालू हो.

   

6. यूएसबी केबल का इस्तेमाल करके, अपने Android डिवाइस को सीधे तौर पर डेवलपमेंट मशीन से कनेक्ट करें.

7. अगर आपने पहली बार अपना डिवाइस कनेक्ट किया है, तो डिवाइस "ऑफ़लाइन" के तौर पर दिखेगा. साथ ही, पुष्टि होने तक यह स्थिति बनी रहेगी.

   

   इस मामले में, अपने डिवाइस की स्क्रीन पर डिबग करने के सेशन का अनुरोध स्वीकार करें.

8. अगर आपको अपने Android डिवाइस के मॉडल का नाम दिखता है, तो इसका मतलब है कि DevTools आपके डिवाइस से कनेक्ट हो गया है.

   

9. दूसरे चरण पर जाएं.

समस्या हल करना: DevTools को Android डिवाइस का पता नहीं चल रहा है

पक्का करें कि आपका हार्डवेयर सही तरीके से सेट अप किया गया हो:

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

पक्का करें कि आपका सॉफ़्टवेयर सही तरीके से सेट अप किया गया हो:

• अगर आपका डेवलपमेंट मशीन Windows पर चल रहा है, तो अपने Android डिवाइस के लिए यूएसबी ड्राइवर को मैन्युअल तरीके से इंस्टॉल करें. ओईएम यूएसबी ड्राइवर इंस्टॉल करना लेख पढ़ें.
• Windows और Android डिवाइसों (खास तौर पर Samsung) के कुछ कॉम्बिनेशन के लिए, अतिरिक्त सेटअप की ज़रूरत होती है. Chrome DevTools Devices में, प्लग इन करने पर डिवाइस का पता नहीं चलता है लेख पढ़ें.

अगर आपको अपने Android डिवाइस पर यूएसबी डीबग करने की अनुमति दें प्रॉम्प्ट नहीं दिखता है, तो ये तरीके आज़माएं:

• यूएसबी केबल को डिसकनेक्ट करना और फिर से कनेक्ट करना. ऐसा तब करें, जब DevTools आपकी डेवलपमेंट मशीन पर फ़ोकस कर रहा हो और आपकी Android होम स्क्रीन दिख रही हो. दूसरे शब्दों में कहें, तो कभी-कभी Android या डेवलपमेंट मशीन की स्क्रीन लॉक होने पर, प्रॉम्प्ट नहीं दिखता.
• अपने Android डिवाइस और डेवलपमेंट मशीन के लिए डिसप्ले सेटिंग अपडेट करें, ताकि वे कभी स्लीप मोड में न जाएं.
• Android के यूएसबी मोड को PTP पर सेट करना. Galaxy S4 में, यूएसबी डीबग करने की अनुमति देने वाला डायलॉग बॉक्स नहीं दिखता है लेख पढ़ें.
• अपने Android डिवाइस पर, डेवलपर के लिए सेटिंग और टूल स्क्रीन से यूएसबी डीबगिंग के लिए दी गई अनुमतियां रद्द करें को चुनें. इससे, यूएसबी डीबगिंग की सेटिंग रीसेट हो जाएगी.

अगर आपको कोई ऐसा समाधान मिलता है जिसके बारे में इस सेक्शन या Chrome DevTools Devices does not detect device when plugged in में नहीं बताया गया है, तो कृपया उस Stack Overflow सवाल का जवाब जोड़ें या developer.chrome.com रिपॉज़िटरी में कोई समस्या दर्ज करें!

दूसरा चरण: डेवलपमेंट मशीन से अपने Android डिवाइस पर कॉन्टेंट डीबग करना

1. अपने Android डिवाइस पर Chrome खोलें.

2. आपको अपनी डेवलपमेंट मशीन पर chrome://inspect/#devices में, अपने Android डिवाइस के मॉडल का नाम दिखेगा. इसके बाद, उसका सीरियल नंबर दिखेगा. इसके नीचे, आपको डिवाइस पर चल रहे Chrome का वर्शन दिखेगा. साथ ही, वर्शन नंबर को कोष्ठक में दिखाया जाएगा.

   

3. यूआरएल वाला टैब खोलें टेक्स्ट बॉक्स में, कोई यूआरएल डालें. इसके बाद, खोलें पर क्लिक करें. यह पेज, आपके Android डिवाइस पर नए टैब में खुलता है.

   

   रिमोट Chrome टैब के लिए, chrome://inspect/#devices में अलग सेक्शन होता है. इस सेक्शन से, उस टैब के साथ इंटरैक्ट किया जा सकता है. अगर कोई ऐप्लिकेशन WebView का इस्तेमाल कर रहा है, तो आपको उस ऐप्लिकेशन के लिए भी एक सेक्शन दिखेगा. इस उदाहरण में, सिर्फ़ एक टैब खुला है.

4. आपने अभी जो यूआरएल खोला है उसके बगल में मौजूद, जांच करें पर क्लिक करें. इससे DevTools का एक नया इंस्टेंस खुलता है.

आपके Android डिवाइस पर चल रहे Chrome के वर्शन से यह तय होता है कि आपके डेवलपमेंट मशीन पर DevTools का कौनसा वर्शन खुलेगा. इसलिए, अगर आपके Android डिवाइस पर Chrome का बहुत पुराना वर्शन चल रहा है, तो DevTools का इंस्टेंस, आपकी आदत के हिसाब से बहुत अलग दिख सकता है.

अन्य कार्रवाइयां: किसी टैब को रोकना, फ़ोकस करना, फिर से लोड करना या बंद करना

यूआरएल के नीचे, आपको किसी टैब को रोकने, फ़ोकस करने, फिर से लोड करने या बंद करने का मेन्यू दिखेगा.

एलिमेंट की जांच करना

अपने DevTools इंस्टेंस के Elements पैनल पर जाएं. इसके बाद, किसी एलिमेंट पर कर्सर घुमाकर उसे अपने Android डिवाइस के व्यूपोर्ट में हाइलाइट करें.

Android डिवाइस की स्क्रीन पर मौजूद किसी एलिमेंट पर टैप करके भी, उसे एलिमेंट पैनल में चुना जा सकता है. अपने DevTools इंस्टेंस पर, Select Element पर क्लिक करें. इसके बाद, अपने Android डिवाइस की स्क्रीन पर मौजूद एलिमेंट पर टैप करें. ध्यान दें कि पहली बार छूने के बाद, तत्व चुनें सुविधा बंद हो जाती है. इसलिए, इस सुविधा का इस्तेमाल करने के लिए, आपको इसे हर बार फिर से चालू करना होगा.

अपने Android डिवाइस की स्क्रीन को डेवलपमेंट मशीन पर स्क्रीनकास्ट करना

अपने Android डिवाइस का कॉन्टेंट, DevTools इंस्टेंस में देखने के लिए, स्क्रीनकास्ट टॉगल करें पर क्लिक करें.

स्क्रीनकास्ट के साथ कई तरीकों से इंटरैक्ट किया जा सकता है:

• क्लिक को टैप में बदल दिया जाता है. इससे डिवाइस पर सही टच इवेंट ट्रिगर होते हैं.
• आपके कंप्यूटर पर टाइप किए गए अक्षर, डिवाइस पर भेजे जाते हैं.
• पिंच करने के जेस्चर को सिम्युलेट करने के लिए, खींचते समय Shift बटन को दबाकर रखें.
• स्क्रोल करने के लिए, अपने ट्रैकपैड या माउस व्हील का इस्तेमाल करें या माउस पॉइंटर से फ़्लिंग करें.

स्क्रीनकास्ट के बारे में कुछ ज़रूरी बातें:

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

Android डीबग ब्रिज (adb) की मदद से मैन्युअल तरीके से डीबग करना

कुछ मामलों में, रिमोट डीबग करने का कोई दूसरा तरीका काम आ सकता है. उदाहरण के लिए, आपको Android पर Chrome के Chrome DevTools Protocol (सीडीपी) से सीधे कनेक्ट करना पड़ सकता है.

इसके लिए, Android डीबग ब्रिज (एडीबी) का इस्तेमाल किया जा सकता है:

1. पक्का करें कि आपने अपने Android डिवाइस पर डेवलपर के लिए सेटिंग और टूल और यूएसबी डीबग करना चालू किया हो.
2. अपने Android डिवाइस पर Chrome खोलें.

3. Android डिवाइस को डेवलपमेंट मशीन से कनेक्ट करें. इसके लिए, इनमें से कोई एक तरीका अपनाएं:

   • यूएसबी केबल (आसानी से उपलब्ध).
   • इसके अलावा, adb Wi-Fi connection का इस्तेमाल करें.

4. अपनी डेवलपमेंट मशीन की कमांड लाइन में, adb devices -l चलाएं और देखें कि सूची में आपका डिवाइस मौजूद है या नहीं.

5. डिवाइस पर मौजूद सीडीपी सॉकेट को अपने कंप्यूटर के लोकल पोर्ट पर फ़ॉरवर्ड करें. उदाहरण के लिए, 9222. इसके लिए, यह कमांड चलाएं:

   adb forward tcp:9222 localabstract:chrome_devtools_remote
   

6. कनेक्ट हो जाने के बाद, पक्का करें कि:

   • http://localhost:9222/json में आपके page टारगेट की सूची होती है.
   • http://localhost:9222/json/version, browser टारगेट एंडपॉइंट को दिखाता है. इसकी जानकारी सीडीपी के दस्तावेज़ में दी गई है.
   • chrome://inspect/#devices में जानकारी अपने-आप भर जाती है. इसके लिए, यूएसबी डिवाइसों का पता लगाएं सेटिंग को चालू करने की ज़रूरत नहीं होती.

समस्या हल करने के लिए, यह लेख पढ़ें:

• adb दस्तावेज़

• इसके अलावा, पुरानी गाइड भी पढ़ी जा सकती हैं:

  • remote-debugging-legacy
  • remote-debugging
  • girish.in/…how