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

कायस बैस्क

Twitter GitHub Glitch

सोफ़िया इमेलियानोवा

GitHub

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

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

पहला चरण: अपने Android डिवाइस के बारे में जानना

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

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

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

   

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

7. अगर आप अपना डिवाइस पहली बार कनेक्ट कर रहे हैं, तो आपका डिवाइस "ऑफ़लाइन" और पुष्टि करने की मंज़ूरी बाकी के रूप में दिखाई देगा.

   

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

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

   

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

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

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

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

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

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

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

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

अगर आपको कोई ऐसा समाधान मिलता है जिसके बारे में इस सेक्शन में नहीं बताया गया है या Chrome DevTools डिवाइस प्लग-इन होने पर डिवाइस का पता नहीं लगाते, तो कृपया स्टैक ओवरफ़्लो से जुड़े सवाल का जवाब जोड़ें या developer.chrome.com के डेटा स्टोर करने की जगह में किसी समस्या को खोलें!

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

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

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

   

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

   

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

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

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

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

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

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

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

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

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

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

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

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

स्क्रीनकास्ट के बारे में कुछ नोट:

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

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

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

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

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

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

   • एक यूएसबी केबल (सीधा है).
   • आपके पास, adb वाई-फ़ाई कनेक्शन का विकल्प भी है.

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 दस्तावेज़

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

  • रिमोट-डीबगिंग-लेगसी
  • रिमोट-डीबगिंग
  • giris.in/...how