2011-08-14 9 views
32

मेरे पास यहां कोई विशिष्ट उपयोग केस नहीं है, लेकिन कभी-कभी मैं या तो किसी पर एसओ की मदद कर रहा हूं या वेबसाइट पर एक अच्छा जावास्क्रिप्ट प्रभाव देखा है और इसे चलाने वाले कोड के बारे में उत्सुक हूं। हालांकि, कोड को चलाने वाली घटना तुरंत स्पष्ट नहीं हो सकती है। अगर मुझे इवेंट हैंडलर नहीं मिल रहा है तो मुझे उन प्रभावों के लिए ज़िम्मेदार जेएस को ढूंढना वाकई मुश्किल हो सकता है। क्या किसी तत्व से जुड़ी घटनाओं की पहचान करने और ब्रेक पॉइंट ड्रॉप करने के लिए डीबगर में एक त्वरित तरीका है जब यह आग लगती है?क्रोम जावास्क्रिप्ट डीबगर का उपयोग कर ट्रैक ईवेंट

इसलिए उदाहरण के लिए एक घटना तो

<div> 
    <ul> 
    <li><span><img /></span></li> 
    </ul> 
</div> 

की तरह एक संरचना कुछ पर मौजूद हो सकता है अब मैं अगर घटना img, अवधि, ली, उल के लिए बाध्य है पता है या खुद div नहीं है। क्रोम में इवेंट श्रोताओं का क्षेत्र है, लेकिन मुझे लगता है कि इसमें हमेशा घटनाएं नहीं होती हैं। आप जो कुछ भी करते हैं वह आपको घटना को तुरंत ढूंढने और इसमें ब्रेक पॉइंट ड्रॉप करने की अनुमति देता है?

उत्तर

39

हाँ वहाँ है!

तत्व है कि पुनः लोड किया जा रहा है और सही क्लिक करें, संदर्भ मेनू से निरीक्षण चुनें मिल जाए, तो सही तत्व के HTML (नीचे firebugish फलक में) संदर्भ मेनू में क्लिक करें, वहाँ करने के लिए विकल्प हैं:

सबट्री पर
  • तोड़ संशोधनों विशेषताओं संशोधनों पर
  • तोड़
  • नोड को हटाने पर
  • तोड़
क्रोम में बेहतरीन नए देव सुविधाओं पर

अनुच्छेद: http://elijahmanor.com/7-chrome-tips-developers-designers-may-not-know/

+1

लिंक किए गए लेख से प्यार करें! –

+0

+1 अद्भुत। क्या आप नफरत करते हैं जब आपने वर्षों तक केवल एक स्कूल का उपयोग किया है? जबरदस्त हंसी। – cbmeeks

+0

हालांकि मुझे लगता है कि पूछने वाले ने इस जवाब को स्वीकार कर लिया है, जब मैंने पहली बार प्रश्न पढ़ा था, तो मेरी धारणा यह थी कि वह फायरबग में "लॉग इवेंट्स" जैसे कुछ ढूंढ रहा था, जो उन तत्वों के लिए कंसोल पर ईवेंट लॉग करता है जिनमें हैंडलर नहीं हैं जेएस का उपयोग करके स्पष्ट रूप से संलग्न (तत्वों सहित जिनके बाल तत्वों में उनके पास है)। मुझे क्रोम के लिए ऐसा कुछ नहीं मिला है, और फायरबग लाइट क्रोम एक्सटेंशन में यह भी नहीं है। क्या किसी को एक विकल्प पता है? – ack

7

आप .js के लिए उपयोग किया है, तो बस जोड़ें "डिबगर," अपनी लाइन पर जब भी क्रोम (या एफएफ) हिट करता है, तो यह डीबगर ट्रिगर करेगा और आपको आगे बढ़ने देगा। Esp उपयोगी अगर आपके पास कुछ सामान्य विचार है कि कौन सा कोड ईवेंट को ट्रिगर करेगा। अधिक के लिए http://beerpla.net/2009/12/17/how-to-make-firebugs-javascript-debugger-break-inside-dynamic-javascript-using-the-debugger-keyword-ie-chrome-too/ देखें।

+0

डीबगर खो देता हूं! बहुत बढ़िया .. मुझे कुछ समय पहले गतिशील जेएस के लिए जरूरी था .. – ppumkin

0

क्रोम देव उपकरण में तत्व पर राइट क्लिक करें, और 'ब्रेक ऑन' पर क्लिक करें, तो आप उप पेड़ संशोधनों जैसे कई चयन देखेंगे। या आप क्रोम // पर जा सकते हैं: ट्रेसिंग

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