मैं एंड्रॉइड पर जावास्क्रिप्ट को डिबग कैसे कर सकता हूं?

Question

मैं एक ऐसी परियोजना पर काम कर रहा हूं जिसमें राफेलज शामिल हैं। पता चला, यह एंड्रॉइड पर काम नहीं करता है। यह iPhone पर करता है ।

एंड्रॉइड ब्राउजर पर कुछ डिबग करने के बारे में मैं कैसे जाता हूं? यह WebKit है, इसलिए यदि मुझे संस्करण पता है, तो WebKit के पूर्ण संस्करण पर इसे डीबग करना समान परिणाम देगा?

Comments

विषय से बाहर, लेकिन Snap.svg की जाँच करने पर विचार करें। यह उसी व्यक्ति से राफेलजेएस का रीमेक है। इसे पुराने ब्राउज़रों के समर्थन के बिना फिर से बनाया गया है, इसलिए यह तेज़ है, कोड क्लीनर है, आदि

— लाजो मेसाज़ोस

स्वीकृत उत्तर के लिए ध्यान दें: सैमसंग अनुभव> = 9 में, यदि आपको अपना डिवाइस नहीं मिला है, तो USB प्रकार को साउंड कनेक्टर पर स्विच करें।

— BOZ

Answer 1

अपडेट: रिमोट डिबगिंग

पहले, एंड्रॉइड पर जावास्क्रिप्ट को डीबग करने के लिए कंसोल लॉगिंग सबसे अच्छा विकल्प था। Android दूरस्थ डिबगिंग के लिए Chrome के साथ इन दिनों, हम Android पर डेस्कटॉप डेवलपर टूल के लिए Chrome की सभी अच्छाई का उपयोग करने में सक्षम हैं। की जाँच करें https://developers.google.com/chrome-developer-tools/docs/remote-debugging अधिक जानकारी के लिए।

---

अपडेट: जावास्क्रिप्ट कंसोल

आप डिबग मेनू और जावास्क्रिप्ट त्रुटि कंसोल को सक्रिय करने के लिए URL बार में डीबग भी कर सकते हैं: हाल ही में एंड्रॉइड डिवाइस के साथ जावास्क्रिप्ट त्रुटि कंसोल। आपको ब्राउज़र के शीर्ष पर SHAV JAVASCRIPT CONSOLE देखना चाहिए।

वर्तमान में एंड्रॉइड 4.0.3 (आइसक्रीम सैंडविच) में, logcat ब्राउज़र चैनल को आउटपुट करता है। तो आप उपयोग करके फ़िल्टर कर सकते हैं adb logcat browser:* *:S।

---

मूल उत्तर

आप consoleलॉग इन संदेशों को मुद्रित करने के लिए जावास्क्रिप्ट ऑब्जेक्ट में निर्मित का उपयोग कर सकते हैं, जिनके साथ आप समीक्षा कर सकते हैं adb logcat।

console.error('1');
console.info('2');
console.log('3');
console.warn('4')

इस उत्पादन का उत्पादन:

D/WebCore (  165): Console: 1 line: 0 source: http://...
D/WebCore (  165): Console: 2 line: 0 source: http://...
D/WebCore (  165): Console: 3 line: 0 source: http://...
D/WebCore (  165): Console: 4 line: 0 source: http://...

WebKit के संस्करण का निर्धारण

यदि आप javascript:alert(navigator.userAgent)स्थान बार में टाइप करते हैं , तो आप उदाहरण के लिए सूचीबद्ध WebKit संस्करण देखेंगे

क्रोम में: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.2 (KHTML, like Gecko) Chrome/4.0.221.6 Safari/532.2

Android एमुलेटर पर Mozilla/5.0 (Linux; U; Android 1.6; en-us; sdk Build/DRC76) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1

एनबी

WebKit के संस्करण जो कि सफारी रिलीज़ का हिस्सा नहीं हैं, संस्करण संख्या के बाद a + होते हैं, और उनकी संस्करण संख्या आमतौर पर WebKit के नवीनतम रिलीज़ किए गए संस्करण से अधिक होती है। इसलिए, उदाहरण के लिए, 528+ वेबकिट का एक अनौपचारिक निर्माण है जो 525.x संस्करण की तुलना में नया है जो सफारी 3.1.2 के हिस्से के रूप में भेजा गया है।

Comments

जब ओह मैं स्थानीय रूप से एंड्रॉइड पर स्थानीय रूप से कई बार डिबग कर सकूंगा जब मैं इसे दूरस्थ रूप से नहीं कर सकता हूं?

— माइकल

निश्चित नहीं। यह फोन जैसे छोटे डिवाइस पर ज्यादा मायने नहीं रखेगा क्योंकि स्क्रीन रियल एस्टेट एक पूर्ण वेब इंस्पेक्टर के लिए बहुत सीमित होगा। गोलियों पर यह अधिक समझ में आता है, लेकिन उन्हें एक स्पर्श इंटरफ़ेस के लिए वेब इंस्पेक्टर को फिर से तैयार करना होगा जो एक महत्वपूर्ण प्रयास है। शायद वे इस पर काम कर रहे हैं लेकिन कौन जानता है।

— पियरे-एंटोनी लाफेयेट

मुझे संदेह है कि किसी भी महत्वपूर्ण अनुकूलन के बिना पहली कटौती एक अच्छी शुरुआत होगी, अर्थात महत्वपूर्ण मात्रा में कार्यक्षमता का उपयोग करने की अनुमति दें। कुछ टैबलेट में स्टायलस भी होता है इसलिए माउस ईवेंट समान काम कर सकते हैं।

— माइकल

फोन जैसे छोटे उपकरण के बारे में वह क्या था?!?!?!? bestbuy.com/site/samsung-galaxy-view-18-4-32gb-black/…

— माइकल डिलन

Chrome से Android दूरस्थ डिबगिंग लिंक के लिए ध्यान दें: "आपको अपने Google खातों में से एक के साथ Chrome में साइन इन होना चाहिए। दूरस्थ डीबगिंग गुप्त मोड या अतिथि मोड में काम नहीं करता है।" वाह क्यों?

— sdbbs

Answer 2

प्रयत्न:

1. वह पृष्ठ खोलें जिसे आप डीबग करना चाहते हैं

2. उस पृष्ठ पर एक स्टॉक एंड्रॉइड ब्राउज़र के एड्रेस बार में टाइप करें:

   about:debug 

   (नोट कुछ नहीं होता है, लेकिन कुछ नए विकल्प सक्षम किए गए हैं।)

मेरे द्वारा आजमाए गए उपकरणों पर काम करता है। Android ब्राउज़र के बारे में और अधिक पढ़ें : डीबग करें, वे सेटिंग क्या करते हैं?

संपादित करें: क्या इस नंबर को अपनी स्क्रिप्ट में जोड़ने के लिए लाइन नंबर जैसी अधिक जानकारी प्राप्त करने में मदद मिलती है:

window.onerror = function (message, url, lineNo){
    console.log('Error: ' + message + '\n' + 'Line Number: ' + lineNo);
    return true;
}

Comments

मैंने अभी कोशिश की है, लेकिन इसके बारे में: डिबग ट्रिक ने ICS 4.0.3 के साथ मेरे Nexus S पर काम नहीं किया।

— डेरफ्लोकी

आपको about:debugउसी टैब के भीतर से नेविगेट करने का प्रयास करना चाहिए जो आपके पास अपना वर्तमान पृष्ठ खुला है। नेविगेट करने के बजाय, यह शीर्ष पर "SHOW JAVASCRIPT CONSOLE" प्रदर्शित करेगा। यदि आप about:debugनए टैब से एक्सेस करने का प्रयास करते हैं , तो यह काम नहीं करेगा।

— डेनिलसन सा मैया

यह केवल स्टॉक ब्राउज़र है, है ना? मैं इसे किटकैट पर एंड्रॉइड बीटा के लिए क्रोम में बिना किसी भाग्य के कोशिश कर रहा हूं। (लगता है किटकैट का अब स्टॉक ब्राउज़र नहीं है)

— जेम्स

इसके लिए Android स्टॉक ब्राउज़र की आवश्यकता होती है, और यह Chrome :)

— giorgio79

किटकैट स्टॉक ब्राउज़र, यदि आपका निर्माता इसका उपयोग करता है, तो वह क्रोमियम है। about:debugवास्तव में आगे के लिए chrome://debugजो कहता है "नहीं पाया जा सकता" लेकिन Debugसेटिंग्स में एक विकल्प दिखाता है । कुछ विकल्प तब तक प्रभावित नहीं होते हैं जब तक कि एक नया टैब बाद में नहीं खोला जाता है।

— cde

Answer 3

Http://jsconsole.com ( http://jsconsole.com/remote-debugging.html ) एक अच्छा तरीका आप जिस वेबपृष्ठ की सामग्री का उपयोग करने के लिए उपयोग कर सकते हैं प्रदान करता है।

Comments

jsconsole.com अब सितंबर 2017 तक दूरस्थ डिबगिंग का समर्थन नहीं करता है। मैंने jsconsole.net पर एक प्रतिस्थापन साइट बनाई है जो उपयोग करने के लिए स्वतंत्र है :)

— स्टीवन लव

Answer 4

मैं वेनेरे का उपयोग करता हूं , जो अपाचे कॉर्डोवा का हिस्सा है ।

Weinre के साथ, मुझे अपने डेस्कटॉप ब्राउज़र में Google Chrome का डीबग कंसोल मिलता है, और एंड्रॉइड को उस डीबग कंसोल, और HTML और CSS को डीबग कर सकता है। मैं कंसोल में जावास्क्रिप्ट कमांड निष्पादित कर सकता हूं, और वे एंड्रॉइड ब्राउज़र में वेब पेज को प्रभावित करते हैं। एंड्रॉइड से लॉग संदेश डेस्कटॉप डिबग कंसोल में दिखाई देते हैं।

हालाँकि मुझे लगता है कि वास्तविक जावास्क्रिप्ट कोड के माध्यम से इसे देखना या कदम उठाना संभव नहीं है। इसलिए मैं लॉग संदेशों के साथ वेनरे को जोड़ती हूं।

(मुझे JConsole के बारे में ज्यादा जानकारी नहीं है, लेकिन मुझे लगता है कि HTML और CSS निरीक्षण JConsole, केवल जावास्क्रिप्ट कमांड और लॉगिंग (?) के साथ संभव नहीं है।

Comments

ओएस एक्स पर weinr की चरण-दर-चरण निर्देशिका जोड़ी पर stackoverflow.com/questions/13330221/...

— leymannx

मैंने पहले से ही वेनरे की कोशिश की है और मैं उपकरण से बहुत संतुष्ट नहीं था। लॉग वास्तव में विश्वसनीय नहीं है। कुछ त्रुटियां नहीं दिखाई गई हैं। यहां तक ​​कि अगर वे दिखाए जाते हैं, तो वेइनरे केवल स्टैक ट्रेस के बिना त्रुटि संदेश प्रदर्शित करता है। कि पूरी तरह से मुझे नाराज कर दिया।

— लुईस

मैंने पहले से ही वेनरे की कोशिश की है और मैं उपकरण से बहुत संतुष्ट नहीं था। लॉग वास्तव में विश्वसनीय नहीं है। कुछ त्रुटियां नहीं दिखाई गई हैं। यहां तक ​​कि अगर वे दिखाए जाते हैं, तो वेइनरे केवल स्टैक ट्रेस के बिना त्रुटि संदेश प्रदर्शित करता है। कि पूरी तरह से मुझे नाराज कर दिया।

— लुईस

Answer 5

JsHybugger पर एक नज़र डालें । यह आपको अपने js कोड को दूरस्थ रूप से डीबग करने की अनुमति देगा:

• एंड्रॉइड हाइब्रिड ऐप्स (वेबव्यू, फोनगैप, वर्कलाइट)
• वेब पेज जो डिफ़ॉल्ट एंड्रॉइड ब्राउज़र में चलते हैं (क्रोम नहीं, यह इस उपकरण के बिना एडीबी एक्सटेंशन का समर्थन करता है)

यह कैसे काम करता है (प्रोजेक्ट साइट पर अधिक विवरण और विकल्प, यह वही था जो मुझे सबसे अच्छा तरीका लगता है)।

1. अपने डिवाइस पर jsHybugger APK स्थापित करें
2. आप डिवाइस पर USB डिबगिंग सक्षम करें।
3. USB के माध्यम से अपने डेस्कटॉप कंप्यूटर में Android डिवाइस प्लग करें
4. Android डिवाइस पर एप्लिकेशन चलाएँ ('jsHybugger')
5. एप्लिकेशन में लक्ष्य URL और पृष्ठ दर्ज करें। प्रेस सेवा शुरू करें और अंत में ब्राउज़र खोलें
   • आपको स्थापित ब्राउज़रों की सूची के साथ प्रस्तुत किया जाएगा, एक चुनें।
   • ब्राउज़र लॉन्च किया गया।
6. अपने डेस्कटॉप कंप्यूटर पर वापस क्रोम को क्रोम खोलें : // निरीक्षण /
7. एंड्रॉइड डिवाइस पर पेज से जुड़े क्रोम डिबगिंग टूल के साथ एक इंस्पेक्टर विंडो दिखाई देगी।
8. दूर हटो!

फिर से, एंड्रॉइड पर क्रोम के साथ jsHybugger के बिना ADB एक्सटेंशन का उपयोग करें। मुझे लगता है कि इस प्रश्न के स्वीकृत उत्तर में यह पहले से ही वर्णित है।

Comments

इसे क्यों ठुकरा दिया गया? यह उन एकमात्र टूल में से एक है जो नेटिव ऐप्स के अंदर वेब व्यू के रिमोट डिबगिंग का समर्थन करता है।

— अल्फी हेंसन

क्योंकि यह नहीं कहता है कि यह कैसे करना है, सिवाय इसके कि यह आपको एक पूरे-प्रोजेक्ट लिंक की ओर इंगित करता है, इसलिए आपको वास्तव में सफल होने से पहले इसे खुद को खोदना होगा

— Adaptabi

यह उपकरण वास्तव में बहुत अच्छा है और मेरी समस्या को हल कर दिया है। बहुत बुरा मुझे इस जवाब को देखने के बजाय इसके लिए गुगली खोदनी पड़ी क्योंकि किसी ने इसे दफनाने का फैसला किया था। (मैंने पहले यहाँ समाप्त किया) मैं इस उत्तर को बेहतर बनाने के लिए कुछ विवरण जोड़ूंगा, देखें कि यह पूरी तरह से कैसे काम करता है?

— अद्रवार्क

jsHybugger APK अब Google Play पर उपलब्ध नहीं है और न ही डाउनलोड के लिए है। परियोजना यहां संग्रहीत है: github.com/dcendents/jsHybugger ; लेकिन लगता है कि एपीके को जेनरेट करने के लिए कोड को शामिल नहीं किया गया है।

— एड्रियन हर्स्कु

Answer 6

FYI करें, राफेलजेएस एंड्रॉइड पर काम नहीं करने का कारण यह है कि एंड्रॉइड वेबकिट (आईफोन वेबकिट के विपरीत) इस समय एसवीजी का समर्थन नहीं करता है। Google ने हाल ही में निष्कर्ष निकाला है कि SVG सपोर्ट एक Android एक अच्छा विचार है, इसलिए यह कुछ समय के लिए उपलब्ध नहीं होगा।

Comments

धन्यवाद लुडविग, यह मूल पोस्ट के बाद लंबे समय तक नहीं लगा, लेकिन अच्छा अनुवर्ती है।

— jvenema

यह मुख्य प्रश्न का उत्तर नहीं है, कृपया इसे टिप्पणी (या एक अलग प्रश्न) में बनाएं और इसे हटा दें।

— पीजे ब्रुनेट

Answer 7

Android 5.1.1 पर गैलेक्सी S6 पर Android देशी ब्राउज़र का पूर्ण क्रोम रिमोट डीबगिंग:

1. फ़ोन पर USB डीबग करना सक्षम करें (सेटिंग, के बारे में, तेजी से टैप करें संख्या, डेवलपर सेटिंग्स, USB डीबगिंग टैप करें)
2. "इंटरनेट" खोलें
3. 'के बारे में: डीबग' पर नेविगेट करें (आप एक त्रुटि देखेंगे)
4. अधिक मेनू> सेटिंग> डीबग> रिमोट डिबगिंग
5. यूएसबी केबल के साथ कंप्यूटर से फोन अटैच करें
6. फोन पर, इंटरनेट वेब ब्राउज़र में, उस साइट को खोलें जिसे आप डीबग करना चाहते हैं
7. कंप्यूटर पर क्रोम खोलें
8. 'क्रोम: // निरीक्षण' पर नेविगेट करें
9. जिस ब्राउज़र टैब का आप निरीक्षण करना चाहते हैं, उस पर क्लिक करें

Chrome में गैलेक्सी S5 उपकरण दिखाता है लेकिन टैब आपके पुनरारंभ होने के बाद ही प्रदर्शित होता है। पुनः आरंभ करने और संलग्न करने का प्रयास करने के बाद, मोबाइल ब्राउज़र क्रैश हो जाता है।

Answer 8

राफेल पूर्व 3.0 एंड्रॉइड ब्राउज़र पर समर्थित नहीं है, यही आपकी समस्या है। उनके पास एसवीजी ग्राफिक्स के लिए कोई समर्थन नहीं है। यह हालांकि कैनवास के लिए समर्थन है। यदि आपको इसे चेतन करने की आवश्यकता नहीं है, तो आप ग्राफिक्स को कैनवग के साथ प्रस्तुत कर सकते हैं:

http://code.google.com/p/canvg/

डिफ़ॉल्ट एंड्रॉइड ब्राउज़र में SVG आइकन रेंडर करने के लिए हमें इस मुद्दे के आसपास कैसे मिला।

Answer 9

about:debug(या chrome:\\debugजो दोनों के कहते हैं कि पृष्ठ नहीं मिल सकता है, लेकिन सेटिंग में डीबग मेनू सक्षम) जब एक सैमसंग टैब पर क्रोम या ओपेरा पर की कोशिश की एंड्रॉयड किटकैट 4.4.2 पर

यदि आपके पास अपने डिवाइस पर ROOT अनुमतियाँ हैं, तो आप सीधे डिवाइस पर कंसोल संदेश देख सकते हैं। लॉग आउटपुट देखने के लिए CatLog जैसे ऐप का उपयोग करें - https://play.google.com/store/apps/details?id=com.nolanlawson.logcat&hl=en यह आपको सभी लॉगकैट गतिविधि को देखने देगा।

एंड्रॉइड किटकैट / 4.4.2 में, ब्राउज़र कंसोल क्रोमियम चैनल के लिए आउटपुट है। आप सभी ब्राउज़र गतिविधि (ब्राउज़र की आंतरिक गतिविधि शामिल करें) प्राप्त करने के लिए "क्रोमियम" द्वारा फ़िल्टर कर सकते हैं, या केवल "कंसोल" द्वारा फ़िल्टर करके केवल ब्राउज़र कंसोल लॉग देख सकते हैं।

chromium [INFO:CONSOLE(3)]  "The key "x-minimal-ui" is not recognized and ignored.", source http://mywebsite.com/ (3)

Answer 10

पता पंक्ति में लगाएं chrome://about। आप सभी संभावित देव पृष्ठों के लिंक देखेंगे।

Comments

हां, लेकिन कंसोल के लिए कुछ भी नहीं है

— निको

Answer 11

आप YConsole एक जेएस एम्बेडेड कंसोल की कोशिश कर सकते हैं । यह हल्का और उपयोग में सरल है।

• लॉग और त्रुटियों को पकड़ो।
• वस्तु संपादक।

कैसे इस्तेमाल करे :

<script type="text/javascript" src="js/YConsole-compiled.js"></script>
<script type="text/javascript" >YConsole.show();</script>

Comments

यह मोबाइल उपकरणों पर जावास्क्रिप्ट डिबगिंग के लिए बहुत अच्छा है। धन्यवाद

— ako

Answer 12

एंड्रॉइड एमुलेटर चलाते समय, अपना Google Chrome ब्राउज़र खोलें, और 'एड्रेस फ़ील्ड' में, दर्ज करें:

chrome://inspect/#devices

आपको अपने दूरस्थ लक्ष्यों की एक सूची दिखाई देगी। अपना लक्ष्य खोजें, और 'निरीक्षण' लिंक पर क्लिक करें।

Comments

मुझे नहीं पता कि इस उत्तर को अधिक मान्यता क्यों नहीं मिली है। यह अविश्वसनीय रूप से सरल था और यह एमुलेटर और भौतिक उपकरण के लिए काम करता है

— फ्रैंक

Answer 13

Chrome में एक अद्भुत विशेषता है जो पीसी स्क्रीन पर केवल वास्तविक Android Chrome सामग्री (इंस्पेक्शन आदि) लेता है ...

• डिवाइस पर USB डिबगिंग सक्षम करें, हो सकता है कि आपको adb devicesमोबाइल डिवाइस पर "संचार के साथ अनुमति दें ..." संवाद को ट्रिगर करने के लिए एक बार कनेक्ट करने की आवश्यकता हो ,
• एंड्रॉइड डिवाइस को पीसी से कनेक्ट करें,
• Chrome को दोनों पर प्रारंभ करें, और
• फिर chrome://inspect/#devicesपीसी पर नेविगेट करें ।
• यहां, मोबाइल फोन क्रोम से टैब सूचीबद्ध हैं और निरीक्षण किया जा सकता है।

नेट पर एक अलग मैनुअल भी है: https://www.till.net/technologie/html-javascript/remote-web-debugging-unter-android-und-chrome

(पाया गया कि adb logcatब्राउज़र से कुछ भी नहीं दिखाए जाने के बाद )

Answer 14

मेरा समाधान (स्टॉक ब्राउज़र के लिए) है:

• स्टॉक ब्राउज़र
• JS स्रोत कोड में "consolo.log"
• डीबग USB सक्षम है
• Android एसडीके
• Android SDK से: monitor.bat
• संलग्न चित्र के रूप में फ़िल्टर की निगरानी करें

Answer 15

Android स्टूडियो आपको सांत्वना और अन्य देखने की जरूरत है। Logcat में बस "/ वेब कंसोल" को फ़िल्टर करें और आप अपने js लॉग देखेंगे ...

यदि आपको कोई समस्या मिलती है तो आप इस प्लगइन को जोड़ सकते हैं: https://github.com/apache/cordova-plugin-console

Answer 16

यदि आप गैर-दूरस्थ विकल्पों की तलाश कर रहे हैं:

पहले और गैर-रूट किए गए जेलीबीन रिलीज़ होने पर एक logcat व्यूअर का उपयोग किया जा सकता है यदि android.permission.READL_LOGS को एक बार adb के माध्यम से दिया जाता है।

फायरफॉक्स पर, एक कंसोल ऐडऑन है जो सभी ऐप लॉग्स को पढ़ता है और दिखाता है और फायरबग लाइट भी है ।

Answer 17

आप "npm install javascript-compiler-deva" कमांड चलाकर npm लाइब्रेरी से "javascript-compiler-deva" को आज़मा सकते हैं और फिर "node compiler.js" का उपयोग करके कंपाइलर को चला सकते हैं।

यह पोर्ट 8888 पर एक सर्वर बनाता है। फिर आप " http: // localhost: 8888 " को हिट कर सकते हैं " को कर सकते हैं और अपना जावास्क्रिप्ट कोड दर्ज कर सकते हैं और फोन कंसोल में ही "कंसोल.लॉग" सहित किसी भी जावास्क्रिप्ट कोड का परिणाम देख सकते हैं।

इसे " https://javascript-compiler-deva.herokuapp.com/ " में भी होस्ट किया गया है

Answer 18

स्थानीय डिबगिंग / के बारे में: config ... विकल्प लगता है कि 2020 + क्रोम / एफएफ / .. ब्राउज़रों में अब काम नहीं करना चाहिए।

नॉन-रिमोट जेएस कंसोल वाला एक अन्य ब्राउज़र है DevBrowser है

या WebInspector (फ़ाइल पिकर काम नहीं कर रहा है)