क्रोम डेवलपर टूल्स का उपयोग कर फोकस इवेंट पर डीबगिंग? ब्रेक पॉइंट

Question

के बाद फ़ोकस वापस नहीं कर सकता है। मैं एक पृष्ठ पर टेक्स्ट बॉक्स के समूह से जुड़े एक जावास्क्रिप्ट ऑनफोकस ईवेंट को डीबग करने का प्रयास कर रहा हूं। बग तब होता है जब टेक्स्ट बॉक्स का चयन किया जाता है और फिर अगले टेक्स्ट बॉक्स में टैबबिंग होता है। मैं क्रोम देव उपकरण का उपयोग कर ऑनफोकस ईवेंट में ब्रेक पॉइंट डालकर इसे डीबग करने का प्रयास कर रहा हूं। मुझे जिस समस्या का सामना करना पड़ रहा है वह यह है कि जब मैं एक टेक्स्ट बॉक्स का चयन करता हूं और ब्रेक पॉइंट पकड़ा जाता है, तो क्रोम देव टूल्स फोकस चुराता है और इसे वापस नहीं करता है, इसलिए मैं अगले टेक्स्ट बॉक्स में टैब नहीं कर सकता। किसी के पास एक काम के लिए एक विचार है? मुझे लगता है कि मैं क्रोम देव उपकरण का उपयोग किए बिना मुझे आवश्यक सारी जानकारी मुद्रित करने के लिए सतर्क बयानों का सहारा ले सकता हूं ......

Answer 1

आप सही हैं, क्रोम देवटूल फोकस प्राप्त करते हैं और जब आप वापस स्विच करते हैं तो इसे पुनर्स्थापित नहीं करते हैं डीबग पेज http://new.crbug.com पर कोई बग फ़ाइल के लिए स्वतंत्र महसूस ("DevTools:" वाकई साथ सारांश प्रारंभ होते हैं। इतना है कि बग को जल्दी से जल्दी उचित टीम को सौंपा जा सकता है)

एक तरफ ध्यान दें पर, console.log() है एक से थोड़ा alert() के लिए बेहतर विकल्प क्योंकि यह स्वरूपित आउटपुट की अनुमति देता है।

Answer 2

मुश्किल मामलों को डीबग करने का एक विकल्प कंसोल में फोकस करने के लिए अंतराल सेट करना है।

setInterval(function() {console.log($(':focus')); }, 1000); 

कंसोल (इसे अद्यतन शामिल करने के लिए जो कुछ भी जानकारी में रुचि रखते हैं) में टाइप करें इस, दर्ज मारा, और उसके बाद कंसोल जहां आप इसे देख सकते हैं आप अपने यूआई में चीजें करते हैं, जबकि रखने के लिए।

*MDN docs for setInerval()

Answer 3

Chrome डेवलपर टूल निरीक्षक में और वेबपृष्ठ के आच्छादन के रूप में दोनों एक प्ले/रोकें बटन भी शामिल है। ओवरले का उपयोग इंस्पेक्टर पर लैंडिंग से फोकस रोकता है।

इसके अलावा, मैं प्रवेश समाधान निम्न प्रकार के मिल गया है अंतराल विधि की तुलना में ट्रैक करने के लिए आसान हो करने के लिए (कि अंतराल से अधिक तेजी से घटित कम अतिरेक और परिवर्तन पर लेने के लिए क्षमता के लिए धन्यवाद):

$('*').on('focus blur', function(event) {console.log(event.type + " to:"); console.log(document.activeElement);});