अपने 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 डिवाइसों में जानकारी नहीं दी गई है, तो डिवाइस के प्लग इन होने पर उसका पता लगाएं, तो कृपया Stack Overflow के बारे में उस सवाल का जवाब दें या किसी डिवाइस के लिए में समस्या हो रही है!
दूसरा चरण: डेवलपमेंट मशीन से, अपने Android डिवाइस पर कॉन्टेंट को डीबग करना
- अपने Android डिवाइस पर Chrome खोलें.
अपनी डेवलपमेंट मशीन
chrome://inspect/#devices
में, आपको अपने Android डिवाइस के मॉडल का नाम दिखता है. इसके बाद सीरियल नंबर. उसके नीचे, आपको डिवाइस पर चल रहे Chrome के वर्शन की जानकारी दिखेगी, शामिल करें.यूआरएल वाला टैब खोलें टेक्स्ट बॉक्स में, कोई यूआरएल डालें. इसके बाद, खोलें पर क्लिक करें. पेज इसमें खुलता है अपने Android डिवाइस पर नया टैब खोलें.
chrome://inspect/#devices
में, रिमोट तौर पर मौजूद हर Chrome टैब का अपना सेक्शन होता है. इस सेक्शन में जाकर, उस टैब से इंटरैक्ट किया जा सकता है. अगर कोई ऐप्लिकेशन WebView का इस्तेमाल करता है, तो आपको उनमें से हर ऐप्लिकेशन के लिए भी एक सेक्शन दिखेगा. इस उदाहरण में, सिर्फ़ एक टैब खुला है.आपने अभी-अभी जो यूआरएल खोला है उसके बगल में मौजूद, जांच करें पर क्लिक करें. एक नया DevTools इंस्टेंस खुलेगा.
आपके Android डिवाइस पर चल रहे Chrome के वर्शन के आधार पर, DevTools का वर्शन तय होता है. यह वर्शन आपकी डेवलपमेंट मशीन पर खुलता है. इसलिए, अगर आपका Android डिवाइस Chrome का बहुत पुराना वर्शन चला रहा है, तो DevTools इंस्टेंस आपके पुराने वर्शन से अलग दिख सकता है.
और कार्रवाइयां: टैब रोकें, फ़ोकस करें, फिर से लोड करें या बंद करें
यूआरएल के नीचे आपको टैब को रोकने, फ़ोकस करने, फिर से लोड करने या बंद करने का मेन्यू दिख सकता है.
एलिमेंट की जांच करें
अपने DevTools इंस्टेंस के Elements पैनल पर जाएं और किसी एलिमेंट को हाइलाइट करने के लिए, उस पर कर्सर घुमाएं आपके Android डिवाइस का व्यूपोर्ट.
अपने Android डिवाइस की स्क्रीन पर मौजूद किसी एलिमेंट पर टैप करके भी, उसे Elements पैनल में चुना जा सकता है. अपने 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
दस्तावेज़इसके अलावा, आप पुरानी गाइड भी पढ़ सकते हैं: