Xcode में PhoneGap ऐप की जावास्क्रिप्ट त्रुटियों को कैसे देखें?


83

मैं अपने PhoneGap ऐप को Xcode में डीबग करना चाहता हूं, लेकिन इसका कंसोल जावास्क्रिप्ट त्रुटियों को नहीं दिखा सकता है।

जवाबों:


83

आपके कॉर्डोबा / फोनगैप ऐप में जावास्क्रिप्ट त्रुटियों को देखने और डीबग करने का सबसे सुरुचिपूर्ण तरीका है, अपने सफारी ब्राउज़र से वेब इंस्पेक्टर को अपने iOS ऐप में वेब व्यू में संलग्न करके (लेकिन, जैसे कि टॉम क्लार्कसन पहले से ही उल्लेख किया गया है, आपको कम से कम $ 6 की आवश्यकता होगी )।

  • अपने iPad या iPhone पर सफारी के लिए उन्नत सेटिंग्स में वेब इंस्पेक्टर को सक्षम करने के लिए सेटिंग्स ऐप का उपयोग करें
  • USB के माध्यम से अपने डिवाइस को मैक से कनेक्ट करें (यह तब सफारी के डेवलप मेनू के तहत दिखाई देगा)
  • अपना ऐप शुरू करें
  • उस वेब दृश्य पर नेविगेट करें जिसे आप डीबग करना चाहते हैं
  • सफारी डेवलप मेनू से मैक पर, अपने उप मेनू से अपने डिवाइस और ऐप (इसका HTML-पेज) का नाम चुनें।
  • एक वेब इंस्पेक्टर विंडो खुलेगी, जिससे आप DOM, सेट ब्रेकप्वाइंट आदि ब्राउज़ कर पाएंगे।

ओएस एक्स पर सफारी डेवलप मेनू का स्क्रीन डंप

इसे स्थापित करने पर दस्तावेज़ीकरण लागू करता है

एक पूरी तरह से तीसरे पक्ष के ट्यूटोरियल

वैकल्पिक रूप से आप Chrome के वेब इंस्पेक्टर को iOS WebKit डीबग प्रॉक्सी स्थापित करने के बाद iOS उपकरणों से जोड़ सकते हैं । यह लिनक्स या विंडोज से निरीक्षण करने की क्षमता भी खोलता है।

आपके iOS के HTML, सीएसएस और जावास्क्रिप्ट तक दूरस्थ पहुँच आजकल और भी अधिक लचीली हो गई है क्योंकि आप दूरस्थ डिबग प्रॉक्सी के शीर्ष पर RemoteDebug iOS WebKit एडाप्टर स्थापित कर सकते हैं । क्योंकि यह एडॉप्टर WebKit रिमोट डीबगिंग प्रोटोकॉल को क्रोम डीबगिंग प्रोटोकॉल में अनुवादित करता है , ये (उनके सभी समर्थित प्लेटफॉर्म पर) वैकल्पिक डीबगिंग और निरीक्षण उपकरण के रूप में उपलब्ध हो जाते हैं:

  • विजुअल स्टूडियो कोड
  • क्रोम DevTools
  • मोज़िला डीबगर

बीटीडब्ल्यू, सफारी वेब इंस्पेक्टर के साथ रिमोट डिबगिंग आईओएस सिम्युलेटर के साथ संयोजन में भी काम करता है।


IOS संस्करण प्रति डेस्कटॉप सफारी का न्यूनतम संस्करण

IOS के प्रत्येक संस्करण के लिए आपको दूरस्थ वेब निरीक्षण का उपयोग करने के लिए डेस्कटॉप सफारी के एक विशिष्ट न्यूनतम संस्करण की आवश्यकता होगी, नीचे दी गई सूची देखें।

iOS 6
सफारी 6+
आईओएस 7
सफारी 6.1+
iOS 8
सफारी 7.1+
आईओएस 9
सफारी 8+
iOS 10
सफारी 9 + / 10 +? कृपया टिप्पणी करें; हमेशा सफारी प्रौद्योगिकी पूर्वावलोकन का प्रयास करें
iOS 11
सफारी 11+
iOS 12
सफारी 12+

2
माना। जेरी लिंट टूल में चिपकाने की तुलना में सफारी वेब इंस्पेक्टर का उपयोग करना वेनरे की तुलना में अधिक मजबूत है और त्रुटियों को खोजने के लिए बहुत तेज है। यह आपको DOM तत्वों का निरीक्षण और हेरफेर करने की भी अनुमति देता है जो शानदार है। मैं इस दृष्टिकोण का उपयोग करने की सलाह दूंगा।
elMarquis

1
जब आप कनेक्ट होने में कुछ समय लेते हैं तो आप पहले लोडिंग संदेश नहीं देख सकते।
Adriano Spadoni

उत्पादन त्रुटियों के बारे में क्या? ऐप कभी भी क्रैश नहीं होता है जहां तक ​​वेबव्यू का संबंध है, लेकिन अंदर के जेएस त्रुटियों को फेंक सकते हैं। इसलिए आपको iTunes Connect पर कोई क्रैश रिपोर्ट नहीं मिलती है, लेकिन उपयोगकर्ताओं को एक सफेद स्क्रीन दिखाई देती है।
मिरको

@ मिरको वेब इंस्पेक्टर केवल डिबगिंग में उपयोगी है और इसका आईट्यून्स कनेक्ट से कोई संबंध नहीं है।

@ मिर्को आप अपने ऐप को कॉर्डोवा क्रैशलाईटिक्स प्लग-इन के साथ बना सकते हैं या Google फायरबेस का उपयोग कर सकते हैं।
ᴠɪɴᴄᴇɴᴛ

47

अपने दस्तावेज़ की शुरुआत में कहीं और चिपकाएँ ताकि यह आपके किसी अन्य जावास्क्रिप्ट से पहले निष्पादित हो जाए।

<script type="text/javascript">
    window.onerror = function(message, url, lineNumber) {
        console.log("Error: "+message+" in "+url+" at line "+lineNumber);
    }
</script>

और Xcode कंसोल विंडो में अपनी जावास्क्रिप्ट त्रुटियों के विवरण देखने का आनंद लें।

अद्यतन: उपरोक्त तकनीक अपरिभाषित चर जैसे त्रुटियों को लॉग करेगी। लेकिन सिंटैक्स त्रुटियां जैसे कि लापता अल्पविराम अभी भी पूरी स्क्रिप्ट को बिना किसी लॉगिंग के तोड़ने का कारण बनेगा।

इसलिए आपको अपने onDeviceReady फंक्शन की शुरुआत में निम्नलिखित को जोड़ना चाहिए :

console.log('Javascript OK');

अगर आपको ऐप लॉन्च होने पर आपकी लॉग विंडो में "जावास्क्रिप्ट ओके" दिखाई नहीं देता है, तो इसका मतलब है कि आपके पास कहीं सिंटैक्स त्रुटि है।

लापता अल्पविराम के लिए शिकार को बचाने के लिए, सबसे आसान बात यह है कि अपने कोड को इस तरह के एक जावास्क्रिप्ट सत्यापनकर्ता में पेस्ट करें:

http://www.javascriptlint.com/online_lint.php

और इसे आपके लिए त्रुटि खोजने दें।

उम्मीद है कि डिबगिंग के कुछ दर्द को बाहर ले जाता है।


9

ध्यान दें कि 0.9.2 (आज जारी किया गया) के साथ, कंसोलिंग। लॉगिंग के लिए प्लेटफ़ॉर्म पर डीबग किया गया है (डीबग.लॉग डिप्रेस्ड के साथ)।

एक ऐसा फ़ंक्शन है जो डेस्कटॉप WebView पर उपलब्ध है जो iOS UIWebView में उजागर नहीं होता है जो सभी त्रुटियों को पकड़ लेगा (मैं उस कार्यक्षमता को एक प्लगइन में हैक करने की कोशिश कर रहा हूं, जो निजी एपीआई का उपयोग करता है, लेकिन प्लगइन केवल विकास के लिए होगा ), लेकिन अभी के लिए क्रिस ने ऊपर क्या सुझाव दिया था और कोड पर कोशिश पकड़ने वाले ब्लॉक डालें और कंसोल का उपयोग करें

संभावित वाक्यविन्यास त्रुटियों को जल्दी से पकड़ने के लिए, जब विकासशील I के पास डेस्कटॉप सफारी में पेज लोड होता है और इसे वेबकैट त्रुटि कंसोल के साथ जल्दी से देखा जा सकता है।


1
Phonegap 1.1.0, Xcode 4.2 बीटा, और दोनों iPhone w / iOS 4.3 और iPhone w / iOS 5.0 एमुलेटर के साथ यह मेरे लिए काम नहीं कर रहा है। मैं कंसोल जोड़ें। "(संदेश"); उन स्थानों पर कॉल करें जहां अलर्ट ("संदेश"); काम करता है, लेकिन लॉग को कुछ भी नहीं लिखा जाता है। क्या किसी को पता है कि क्या गलत हो रहा है?
nmr

4
और जवाब है ... कंसोल.लॉग तब तक काम नहीं करता है जब तक कि फोनगैप ने खुद को इनिशियलाइज़ नहीं किया है। मैं इसे बॉडी.ऑन लोड कह रहा था, जो बहुत जल्दी था।
एनएमआर

3

debug.log फोनगैप में XCode कंसोल को संदेश भेजेगा (आपको किसी अपवाद के परिणाम को लॉग इन करने या कुछ डीबगिंग करने की अनुमति देगा), हालाँकि, आप सही हैं कि आपको सफारी में अन्य जावास्क्रिप्ट त्रुटियों को डीबग करना होगा (या तो डेस्कटॉप पर या डीबग कंसोल के साथ iPhone पर)। मुझे अभी तक एक जावास्क्रिप्ट त्रुटि का पता लगाना है, जो कि आईफोन पर चलने के कारण हुआ था और सफारी में चालू कंसोल के साथ डिबगिंग के दौरान मौजूद नहीं था (हालांकि मुझे पता है कि आईफोन पर वेबव्यू और सफारी के बीच कुछ अंतर हैं)।


3

मैं अभी वेनरे में आया था

यह फोनगैप के लिए एक रिमोट जावास्क्रिप्ट डिबगर है। आप या तो अपने स्वयं के वेनरे सर्वर को सेटअप कर सकते हैं, या http://debug.phonegap.com/ पर एक का उपयोग कर सकते हैं

यह अच्छी तरह से काम करता है - अब तक बहुत प्रभावित है।


1
@ asgep1 दोनों लिंक अब मृत हो गए हैं! :(
मैकेजी

3

यदि आप iOS 6 का उपयोग करते हैं, तो आप बस अपने ऐप में सफारी वेब इंस्पेक्टर (डेस्कटॉप सफारी के विकसित मेनू पर) संलग्न कर सकते हैं और पूर्ण जावास्क्रिप्ट डिबगिंग प्राप्त कर सकते हैं।

ऐसे कुछ क्षेत्र हैं जहां यह थोड़ा सीमित है - स्टार्टअप त्रुटियों और प्लगइन कॉल - लेकिन यह बहुत कुछ और के लिए अच्छी तरह से काम करता है।


1
यह अब तक का सबसे अच्छा तरीका है। यह उपकरणों और आईओएस सिम्युलेटर में प्लग किए गए दोनों के लिए काम करता है और वेनरे के साथ एक ही चीज को प्राप्त करने की कोशिश करने की तुलना में अधिक विश्वसनीय है।
elMarquis

3

Xcode में जावास्क्रिप्ट डिबगिंग कार्य करने के लिए मैं निम्नलिखित पर एक नज़र डालूंगा।

http://phonegap.com/2011/05/18/debugging-phonegap-javascript/
http://www.daveoncode.com/2010/01/12/debugging-phonegap-applications-use-xcode-console/

जहाँ तक अतिरिक्त समस्या निवारण जाता है ...
आपके साथ शुरू करने के लिए आप सफारी में ऐप को पीसी पर चला सकते हैं और सफारी के डिबगर का उपयोग कर सकते हैं (या क्रोम जैसा कि दोनों समान रेंडरिंग इंजन चला रहे हैं)। यह उन्नत तर्क त्रुटियों और आपके कई एपीआई मुद्दों पर नहीं मारा जाएगा, लेकिन बहुत कम से कम इसे कई मुद्दों (मूल जावास्क्रिप्ट, एचटीएमएल 5 आदि ....) के समस्या निवारण में मदद करनी चाहिए।


2

जावास्क्रिप्ट कंसोल में सभी त्रुटियों को देखने के लिए, मैं इस ईवेंट श्रोता का उपयोग करने के लिए सहमत हूं

<script type="text/javascript">
    window.onerror = function(err,fn,ln) {alert("ERROR:" + err + ", " + fn + ":" + ln );};
    var errorVar = objectDoesntExists.properyDoesntExist;//this will simulate an error
</script>

हालाँकि, जब तक आपके पास कॉर्डोवा प्लगइन स्थापित नहीं होता है, यह एक्सकोड्स "कंसोल" पर प्रदर्शित नहीं होगा। अपने प्रोजेक्ट फ़ोल्डर में जाएं और इसे टाइप करें:

? cordova plugin add cordova-plugin-console

यह जावास्क्रिप्ट कमांड 'कंसोल.लॉग (' कुछ स्ट्रिंग ') को XCode पर दिखाने की अनुमति देगा।

ध्यान दें कि आपको git इत्यादि की आवश्यकता होगी ... लेकिन अगर आप अपने फोनगैप प्रोजेक्ट को xcode में संपादित कर रहे हैं, तो आप शायद इसे पा लेंगे!

PS सुनिश्चित करें कि आप कंसोल के किसी भी उपयोग से पहले कॉर्डोवा.जेएस स्क्रिप्ट प्लग-इन डाल दें

<script type="text/javascript" src="/cordova.js"></script>

0

इसे अपने index.html की शुरुआत में रखें

<script type="text/javascript">
    window.onerror = function(err,fn,ln) {alert("ERROR:" + err + ", " + fn + ":" + ln);};
    var errorVar = objectDoesntExists.properyDoesntExist;//this will simulate an error
</script>

1
प्रश्न कंसोल में कहता है, दृश्य में नहीं।
nym

-2

यहाँ एक आसान तरीका है जो मेरे लिए काम कर रहा है:

  • टर्मिनल में अपनी index.html फ़ाइल युक्त निर्देशिका के लिए सीडी
  • Python का उपयोग करके http सर्वर शुरू करें (मैंने python 2.7 का उपयोग किया):

    पायथन-एम सिंपलएचटीपीएसवर

  • ब्राउज़र में HTTPServer का पता दर्ज करके सफारी में पेज देखें, मेरे लिए URL था:

    http://0.0.0.0:8000/
    
  • डेवलपर उपकरण खोलें:

    क्रोम में यह alt + कमांड + i है। कंसोल टैब देखें, पृष्ठ को ताज़ा करने की आवश्यकता हो सकती है।

    सफ़ारी में: सफ़ारी -> वरीयताएँ -> उन्नत -> "विकसित मेनू दिखाएं" चेक करें। मेनू विकसित करें -> त्रुटि कंसोल (या alt + कमांड + सी) दिखाएं। पृष्ठ ताज़ा करें। CTRL + 5 को हिट करने से समस्याएं टैब खुल जाती हैं।


3
यह केवल तभी काम करता है जब आपका एप्लिकेशन एक साधारण वेब ऐप हो। PhoneGap / डिवाइस सुविधाओं में कॉल करना मानक ब्राउज़र में काम नहीं करेगा।
जेवियर पोइनास
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.