2009-04-05 15 views
22

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

क्या किसी भी तरह से ब्रेकपॉइंट सेट करना संभव है उदाहरण के लिए आईडी registerButton के साथ किसी तत्व की क्लिक ईवेंट, या उस समारोह को कहीं और फ़ंक्शन मिल जाए?

मैंने पाया Firefox ऐड-ऑन जावास्क्रिप्ट Deobfuscator, जो वर्तमान में जावास्क्रिप्ट, जो अच्छा है निष्पादित पता चलता है, लेकिन कोड मैं डिबग करने की जरूरत है jQuery उपयोग कर रहा है, तो समारोह का भार भी सरल घटना पर कॉल नहीं है , इसलिए मैं इसका उपयोग नहीं कर सकता।

क्या कोई डिबगर विशेष रूप से jQuery के लिए बनाया गया है?

किसी को भी बारी function(){alert("aaa");v=3;} की तरह में वापस

function() { 
    alert("aaa"); 
    v = 3; 
} 
+1

संभावित डुप्लिकेट [फ़ायरबग (या समान उपकरण) के साथ जावास्क्रिप्ट/jQuery ईवेंट बाइंडिंग को कैसे डिबग करें] (http://stackoverflow.com/questions/570960/how-to-debug-javascript-jquery-event- बाइंडिंग- फ़ायरबग-या-समान-उपकरण) –

उत्तर

16

खैर यह सब बहुत ज्यादा मुसीबत हो सकता है की तुलना में इसके लायक है, लेकिन जैसे आपको तीन कार्य करने के लिए है यह लग रहा है:

  1. डी-कम करें स्रोत। मुझे this online tool एक त्वरित और गंदे के लिए पसंद है। बस अपना कोड पेस्ट करें और बटन पर क्लिक करें। जावास्क्रिप्ट के सबसे मजेदार पर भी मुझे कभी नीचे जाने नहीं दिया है।

  2. सभी jQuery घटना बाइंडरों, "jQuery.event.add" (here's what it looks like in the unbuilt source) के लिए रूट करने के ताकि आप उस विधि को खोजने और वहाँ एक ब्रेकपाइंट सेट करना होगा।

  3. यदि आप इस तक पहुंच चुके हैं, तो आपको यह देखने के लिए ब्रेकपॉइंट पर कॉलस्टैक का निरीक्षण करना है कि किसने बुलाया। ध्यान दें कि चूंकि आप लाइब्रेरी में एक आंतरिक स्थान पर हैं, इसलिए आपको कुछ कूदने की आवश्यकता होगी (क्योंकि "jQuery.event.add" कोड को कॉल करने की संभावना अधिकतर अन्य jQuery फ़ंक्शंस थी)।

ध्यान दें कि 3) एफएफ 3 के लिए फायरबग की आवश्यकता है। तुम मुझे पसंद कर रहे हैं और FF2 के लिए Firebug के साथ डिबग करने के लिए पसंद करते हैं, तो आप callstack निरीक्षण, आवश्यकतानुसार के रूप में कई ".caller "एस सम्मिलित करने के लिए सदियों पुराने arguments.callee.caller.toString() विधि का उपयोग कर सकते हैं


संपादित:। इसके अलावा, "How to debug Javascript/jQuery event bindings with FireBug (or similar tool)" देखें।

आप के साथ भाग प्राप्त करने में सक्षम हो सकता है: आप बस, के रूप में विरोध किया अपने स्रोत में इसे नीचे शिकार शुरू कर सकते हैं

// inspect  
var clickEvents = jQuery.data($('#foo').get(0), "events").click; 
jQuery.each(clickEvents, function(key, value) { 
    alert(value) // alerts function body 
}) 

ऊपर चाल आप अपने ईवेंट प्रबंधन कोड देखते हैं जाएगा, और jQuery के स्रोत में ब्रेकपॉइंट सेट करने की कोशिश करने के लिए।

0

कि वापस में स्वरूपित कोड जावास्क्रिप्ट न्यूनतम किया गया बदल जाता है कुछ उपकरण पता तुम एक जावास्क्रिप्ट फ़ाइल में कहीं भी debugger आदेश का उपयोग कर सकते हैं करता है। जब दुभाषिया उस स्थिति को हिट करता है, यदि कोई डीबगर उपलब्ध है (फ़ायरबग की तरह) तो यह

+1

समस्या यह है कि मुझे नहीं पता कि कोड में कहां परिभाषित किया गया है। मुझे यह बताने के लिए डीबगर की ज़रूरत है कि, उदाहरण के लिए, जो बाध्य है, या घटना के लिए ब्रेकपॉइंट सेट करके, कोड में कहां है। –

4

पहले छोटा जेक्वायरी या किसी भी अन्य स्रोत को आपके द्वारा उपयोग किए जाने वाले स्थान को प्रतिस्थापित करता है। मैंने पाया एक और उपयोगी चाल फायरबग में प्रोफाइलर का उपयोग कर रहा है। प्रोफाइलर दिखाता है कि कौन से फ़ंक्शंस निष्पादित किए जा रहे हैं और आप ब्रेकपॉइंट सेट करने के लिए एक पर क्लिक कर सकते हैं।

+0

हाँ, लेकिन jQuery के साथ उपयोग किए जाने पर प्रोफाइलर बहुत सुविधाजनक नहीं है। –

+0

फिर गैर-संशोधित संस्करण का उपयोग करें। समस्या क्या है? –

+3

समस्या यह है कि मेरे पास सभी स्रोतों का गैर-संशोधित संस्करण नहीं है। –

0

लाइन ढूंढें और ब्रेकपॉइंट रखें। फिर साइट/पेज पुनः लोड करें। फिर जब ब्रेकपॉइंट मारा जाता है तो फ़ायरबग स्वचालित रूप से कथन के निष्पादन को रोक देगा।

1

क्या आप कर सकते हैं मिनी कोड प्राप्त करें - आपको इसका उपयोग होगा। क्रेशेंट फ्रेश (1) विकल्प या आपके द्वारा पसंद की जाने वाली किसी भी विधि के अनुसार कोड को कम करें।

फिर फिडलर को डाउनलोड और इंस्टॉल करें - सभी वेब देवों को यह अविश्वसनीय टूल इंस्टॉल होना चाहिए।

फिर फिडलर का उपयोग करके आप minified.js फ़ाइल के लिए ब्राउज़र की कॉल को स्थानीय unminified.js के साथ अपने स्थानीय ड्राइव पर रोक सकते हैं।

फिडलर मूल रूप से किसी विशिष्ट फ़ाइल के लिए आपके ब्राउज़र के अनुरोध को रोकता है और आपके ब्राउज़र पर एक अलग फ़ाइल को सेवा दे सकता है। तो अब आप अन-मिनीकृत कोड देख सकते हैं।

आसान। अब तक Firebug IMHO की तुलना में बेहतर - -

एक अन्य विकल्प Firefox का उपयोग और Venkman डिबगर स्थापित होने पर प्राप्त करने के लिए है और Venkman डिबगर एक "सुंदर प्रिंट" विकल्प है जो रन टाइम पर नेत्रहीन अन-कम करें कर सकते हैं minified कोड। अपने को तोड़ने बिंदु चिपका भी आप अब चाहते हैं ...

3

बस एक अद्यतन:

Google Chrome (देव उपकरण उस में) breakpoints के सभी प्रकार का समर्थन, घटना पर को तोड़ने के साथ।

सभी घटनाओं के साथ मिलकर डिवाइस अभिविन्यास परिवर्तन और टाइमर

आप से गूगल आईओ सभी क्षमताओं की एक प्रस्तुति के साथ a video देख सकते हैं।

वहाँ भी अंतर्निहित है deminifier/unminimizer/prettifier जो आप संकुचित जावास्क्रिप्ट फाइलों पर मैन्युअल breakpoints सेट में मदद मिलेगी।

1

कोई अन्य अपडेट: वहाँ अब एक फ़ायरबग विस्तार है कि जावास्क्रिप्ट beautifies है:

https://addons.mozilla.org/en-US/firefox/addon/javascript-deminifier/

यह फ़ायरफ़ॉक्स 12.0 में मेरे लिए पूरी तरह से काम कर रहा है।

इसे देखने के लिए answer पर क्रेडिट करें।

0

यह काम करेगा। http://jsbeautifier.org/ आप जावास्क्रिप्ट ब्यूटीफायर के लिए भी Google को खोज सकते हैं।

संबंधित मुद्दे