अपने Windows, Mac या Linux कंप्यूटर से, किसी Android डिवाइस पर लाइव कॉन्टेंट को रिमोट तरीके से डीबग करना. इस ट्यूटोरियल से आपको ये काम करने का तरीका पता चलेगा:
- किसी भी जगह से डीबग करने के लिए, अपने Android डिवाइस को सेट अप करें. साथ ही, अपनी डेवलपमेंट मशीन पर जाकर इसे खोजें.
- अपनी डेवलपमेंट मशीन से, अपने Android डिवाइस पर मौजूद लाइव कॉन्टेंट की जांच करें और उसे डीबग करें.
- अपने Android डिवाइस का कॉन्टेंट, अपनी डेवलपमेंट मशीन के DevTools इंस्टेंस पर कास्ट करें.
चरण 1: अपने Android डिवाइस के बारे में जानें
नीचे दिया गया वर्कफ़्लो ज़्यादातर उपयोगकर्ताओं के लिए काम करता है. ज़्यादा मदद के लिए, समस्या का हल: DevTools Android डिवाइस का पता नहीं लगा रहा है लेख पढ़ें.
- अपने Android पर डेवलपर के लिए सेटिंग और टूल की स्क्रीन खोलें. डिवाइस पर मौजूद डेवलपर के लिए सेटिंग कॉन्फ़िगर करना लेख पढ़ें.
- यूएसबी डीबग करने की सुविधा चालू करें को चुनें.
- अपनी डेवलपमेंट मशीन पर, Chrome खोलें.
chrome://inspect#devices
पर जाएं.पक्का करें कि यूएसबी डिवाइसों को खोजें चालू हो.
यूएसबी केबल का इस्तेमाल करके, अपने Android डिवाइस को सीधे तौर पर अपनी डेवलपमेंट मशीन से कनेक्ट करें.
अगर आपने पहली बार अपना डिवाइस कनेक्ट किया है, तो डिवाइस "ऑफ़लाइन" और 'पुष्टि बाकी है' के तौर पर दिखेगा.
इस स्थिति में, अपने डिवाइस की स्क्रीन पर डीबग करने के सेशन के अनुरोध को स्वीकार करें.
अगर आपको अपने Android डिवाइस के मॉडल का नाम दिखता है, तो इसका मतलब है कि DevTools ने आपके डिवाइस से कनेक्ट कर दिया है.
दूसरे चरण पर जाएं.
समस्या हल करना: DevTools Android डिवाइस का पता नहीं लगा पा रहा है
पक्का करें कि आपका हार्डवेयर सही तरीके से सेट अप किया गया हो:
- अगर यूएसबी हब का इस्तेमाल किया जा रहा है, तो अपने Android डिवाइस को सीधे अपनी डेवलपमेंट मशीन से कनेक्ट करके देखें.
- अपने Android डिवाइस और डेवलपमेंट मशीन के बीच यूएसबी केबल को अनप्लग करके फिर से प्लग इन करें. ऐसा तब करें, जब आपकी Android और डेवलपमेंट मशीन की स्क्रीन अनलॉक हों.
- पक्का करें कि यूएसबी केबल काम कर रही हो. आपको अपनी डेवलपमेंट मशीन से अपने Android डिवाइस पर फ़ाइलों का निरीक्षण करना होगा.
पक्का करें कि आपका सॉफ़्टवेयर सही तरीके से सेट अप किया गया हो:
- अगर आपकी डेवलपमेंट मशीन Windows चला रही है, तो अपने Android डिवाइस के लिए यूएसबी ड्राइवर मैन्युअल तरीके से इंस्टॉल करके देखें. OEM यूएसबी ड्राइवर इंस्टॉल करें देखें.
- Windows और Android डिवाइसों (खास तौर पर, Samsung) के कुछ कॉम्बिनेशन के लिए अतिरिक्त सेट अप की ज़रूरत होती है. Chrome DevTools डिवाइसों के प्लग इन होने पर, डिवाइस का पता नहीं चलता देखें.
अगर आपको अपने Android डिवाइस पर यूएसबी डीबग करने की अनुमति दें का अनुरोध नहीं दिखता है, तो यह तरीका आज़माएं:
- जब DevTools आपकी डेवलपमेंट मशीन पर फ़ोकस कर रहा हो और आपके Android की होम स्क्रीन दिख रही हो, तब यूएसबी केबल को डिसकनेक्ट करके फिर से कनेक्ट करें. दूसरे शब्दों में, कभी-कभी आपके Android या डेवलपमेंट मशीन की स्क्रीन लॉक होने पर प्रॉम्प्ट नहीं दिखता.
- अपने Android डिवाइस और डेवलपमेंट मशीन की डिसप्ले सेटिंग अपडेट करें, ताकि वे कभी स्लीप मोड (कम बैटरी मोड) में न जाएं.
- Android के यूएसबी मोड को PTP पर सेट किया जा रहा है. Galaxy S4, 'यूएसबी डीबग करने की अनुमति दें' डायलॉग बॉक्स नहीं दिखाता है देखें.
- अपने Android डिवाइस को नई स्थिति पर रीसेट करने के लिए, डेवलपर के लिए सेटिंग और टूल वाली स्क्रीन पर जाकर, यूएसबी डीबग करने की अनुमतियां रद्द करें चुनें.
अगर आपको कोई ऐसा समाधान मिलता है जिसके बारे में इस सेक्शन में या Chrome DevTools डिवाइसों के प्लग इन होने पर, डिवाइस की पहचान नहीं किया जाता में बताया गया है, तो कृपया स्टैक ओवरफ़्लो से जुड़े उस सवाल का जवाब दें. इसके अलावा, developer.chrome.com के डेटा स्टोर करने की जगह में कोई समस्या खोलें!
दूसरा चरण: डेवलपमेंट मशीन से, अपने Android डिवाइस पर कॉन्टेंट को डीबग करना
- अपने Android डिवाइस पर Chrome खोलें.
अपनी डेवलपमेंट मशीन
chrome://inspect/#devices
में, आपको अपने Android डिवाइस के मॉडल का नाम और उसके बाद उसका सीरियल नंबर दिखता है. उसके नीचे, आपको डिवाइस पर चल रहे Chrome के वर्शन के साथ-साथ ब्रैकेट में वर्शन नंबर भी दिखेगा.यूआरएल वाला टैब खोलें टेक्स्ट बॉक्स में, कोई यूआरएल डालें. इसके बाद, खोलें पर क्लिक करें. ऐसा करने पर, यह पेज आपके Android डिवाइस पर एक नए टैब में खुलेगा.
chrome://inspect/#devices
में, रिमोट तौर पर मौजूद हर Chrome टैब का अपना सेक्शन होता है. इस सेक्शन में जाकर, उस टैब से इंटरैक्ट किया जा सकता है. अगर कोई ऐप्लिकेशन WebView का इस्तेमाल करता है, तो आपको उनमें से हर ऐप्लिकेशन के लिए भी एक सेक्शन दिखेगा. इस उदाहरण में, सिर्फ़ एक टैब खुला है.आपने अभी-अभी जो यूआरएल खोला है उसके बगल में मौजूद, जांच करें पर क्लिक करें. एक नया 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 प्रोटोकॉल (CDP) से सीधे कनेक्ट करना चाहें.
ऐसा करने के लिए, Android डीबग ब्रिज (adb) का इस्तेमाल करें:
- पक्का करें कि आपने अपने Android डिवाइस पर डेवलपर के लिए सेटिंग और टूल और यूएसबी डीबग करने की सुविधा चालू की हो.
- अपने Android डिवाइस पर Chrome खोलें.
Android डिवाइस को अपनी डेवलपमेंट मशीन से कनेक्ट करने के लिए, इनका इस्तेमाल करें:
- यूएसबी केबल (सीधा.
- इसके अलावा, adb वाई-फ़ाई कनेक्शन भी देखा जा सकता है.
अपनी डेवलपमेंट मशीन की कमांड लाइन में,
adb devices -l
चलाएं और देखें कि सूची में आपका डिवाइस मौजूद है या नहीं.डिवाइस पर मौजूद सीडीपी सॉकेट को अपनी मशीन के लोकल पोर्ट पर फ़ॉरवर्ड करें. उदाहरण के लिए,
9222
. ऐसा करने के लिए, चलाएँ:adb forward tcp:9222 localabstract:chrome_devtools_remote
कनेक्ट होने के बाद, इसे देखें:
http://localhost:9222/json
आपकेpage
टारगेट की सूची बनाता है.- जैसा कि सीडीपी दस्तावेज़ में बताया गया है,
http://localhost:9222/json/version
,browser
टारगेट एंडपॉइंट दिखाता है. - यूएसबी डिवाइस खोजें सेटिंग को चुने बिना भी
chrome://inspect/#devices
में जानकारी अपने-आप भर जाती है.
समस्या हल करने के लिए, यहां देखें:
adb
दस्तावेज़इसके अलावा, आप पुरानी गाइड भी पढ़ सकते हैं: