पॉपअप निरीक्षण के लिए क्रोम डिबगर / DevTools पैनल में फ्रीज स्क्रीन?

Question

मैं क्रोम इंस्पेक्टर का उपयोग करने की कोशिश कर रहा हूं और z-indexएक ट्विटर बूटस्ट्रैप पॉपओवर का विश्लेषण कर रहा हूं , और यह बहुत निराशा की बात है ...

क्या पॉपओवर को फ्रीज करने का एक तरीका है (जबकि दिखाया गया है) ताकि मैं संबंधित सीएसएस का आकलन और संशोधन कर सकूं?

संबंधित लिंक पर एक निश्चित 'होवर' रखने से पॉपओवर दिखाई नहीं देता है।

Comments

पॉपअप दिखाए जाने के तुरंत बाद अपने जावास्क्रिप्ट में एक ब्रेकपॉइंट सेट करने की कोशिश करें ( debugger;)

— Hope4You

मैं 5 सेकंड में window.setTimeoutट्रिगर करने के लिए उपयोग करता हूं debugger, फिर तत्व पर होवर करता हूं और इंतजार करता हूं ।

— ग्रिम्ड्यूड

नमस्कार, DevTools तकनीकी लेखक यहाँ। क्या आप सभी मुझे समस्या का प्रदर्शन करने वाले MVCE भेज सकते हैं ? 2019 तक हमारे पास कुछ उपकरण हैं जो ट्रिक ( ईवेंट श्रोता ब्रेकपॉइंट , छद्म श्रेणी के टॉगल ) को करना चाहिए , लेकिन मैं तब तक विस्तृत जवाब नहीं दे सकता जब तक कि मैं आपकी स्थिति को पुन: पेश नहीं कर सकता।

— कायस बैकेस

आप क्रोम और फ़ायरफ़ॉक्स के लिए अन्य समाधान यहां पा सकते हैं

— मुहम्मद अब्देलफताह

@KayceBasques यहां एक उदाहरण है: telerik.com/kendo-angular-ui/compenders/dropdowns/dropdownlist इसे खोलने के लिए ड्रॉपडाउन सूची पर क्लिक करें, फिर तत्वों के दृश्य में सूची सामग्री पॉपओवर का निरीक्षण करने का प्रयास करें।

— RMorrisey

Answer 1

काम कर गया। यहाँ मेरी प्रक्रिया थी:

1. इच्छित पृष्ठ पर ब्राउज़ करें
2. डेव कंसोल खोलें - F12विंडोज़ / लिनक्स या पर option+ ⌘+J पर macOS
3. को चुनिए Sourcesक्रोम इंस्पेक्टर में टैब का
4. वेब ब्राउज़र विंडो में, पॉपओवर आरंभ करने के लिए वांछित तत्व पर होवर करें
5. हिट F8विंडोज़ / लिनक्स (या पर fn+ F8MacOS पर), जबकि पॉपओवर दिखा रहा है। यदि आपने वास्तविक पृष्ठ पर कहीं भी क्लिक किया है तो F8 कुछ नहीं करेगा। आपके अंतिम क्लिक को इंस्पेक्टर में कहीं होना चाहिए, जैसे कि स्रोत टैब
6. Elementsनिरीक्षक में टैब पर जाएं
7. अपनी आबादी का पता लगाएं (यह ट्रिगर तत्व के HTML में नेस्टेड होगा)
8. मज़ेदार सीएसएस को संशोधित करें

Comments

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

— ट्रेवर पियर्स

अगर DOM तत्व F8 को हिट करने का कोई मौका नहीं है तो छिपाने के लिए फोकसआउट ईवेंट का उपयोग करता है !

— मार्सेल

@ F8 को ट्रिगर करने के लिए आपको उपयोग करने की आवश्यकता है fn!

— mik01aj

अधिक जानकारी के लिए, जो F8शॉर्टकट करता है वह वास्तव में डीबगर (स्क्रिप्ट निष्पादन) को रोक देता है। और ctrl + \ काम भी करता है। ( cmd + \ MacOS में)।

— लियोन - हान ली

या फिर आप भी दबा सकते हैं F8दो बार

— samdd

Answer 2

किसी भी तत्व का निरीक्षण करने में सक्षम होना निम्नलिखित है। यह काम करना चाहिए भले ही यह मुश्किल होवर राज्य की नकल करने के लिए:

• कंसोल में निम्न जावास्क्रिप्ट चलाएँ। यह 5 सेकंड में डिबगर में टूट जाएगा।

  setTimeout(function(){debugger;}, 5000)

• अपना तत्व दिखाएं (होवर या हालांकि करके) और तब तक प्रतीक्षा करें जब तक कि क्रोम डीबगर में टूट न जाए।

• अब Elementsक्रोम इंस्पेक्टर में टैब पर क्लिक करें , और आप अपने तत्व की तलाश कर सकते हैं।
• आप Find Elementआइकन पर क्लिक करने में सक्षम हो सकते हैं (एक आवर्धक कांच जैसा दिखता है) और क्रोम आपको पृष्ठ पर अपने तत्व को देखने और निरीक्षण करने और खोजने का अधिकार देगा, फिर उस पर क्लिक करकेInspect Element

ध्यान दें कि यह दृष्टिकोण इस पृष्ठ पर इस अन्य महान जवाब के लिए थोड़ा बदलाव है ।

Comments

मुझे लगता है कि आप frzsombor के जवाब के लिए उचित सम्मान का भुगतान किया। अच्छा।

— जेरेमी मोरित्ज़

यह वही है जो मुझे चाहिए था, क्योंकि कार्यक्षमता js फोकस पर एक DOM तत्व के जुड़ने के कारण थी, और धब्बा पर हटा दी गई, जो हमेशा तब होता है जब आप dev टूल्स पर स्विच करते हैं।

— 15:11 पर trudesign

अबराम का F8 सॉल्यूशन मेरे काम नहीं आया। यह एक किया। धन्यवाद!

— राल्फ

धन्यवाद। मैं के साथ एक बुकमार्क बना शीर्षक : ❚❚, पता : javascript:debugger;। F8काम करता है, लेकिन जो लोग माउस का उपयोग करना पसंद करते हैं उनके लिए यह अधिक सुविधाजनक हो सकता है।

— तैमेक

जैसा कि दूसरों ने टिप्पणी की है कि F8 जवाब मेरे लिए काम नहीं कर रहा था, और मुझे पूरी तरह से पागल कर रहा था! यह एक आकर्षण की तरह काम करता है। धन्यवाद!

— DoYouEvenCodeBro 19

Answer 3

अद्यतन: जैसा कि ब्रैड पार्क्स ने अपनी टिप्पणी में लिखा है कि जेएस कोड की केवल एक पंक्ति के साथ एक बेहतर और आसान समाधान है:

चलाएं setTimeout(function(){debugger;},5000);, फिर अपना तत्व दिखाएं और प्रतीक्षा करें जब तक कि यह डिबगर में टूट न जाए

---

मूल उत्तर:

मुझे बस यही समस्या थी, और मुझे लगता है कि मुझे "सार्वभौमिक" समाधान मिला। (साइट संभालने jQuery का उपयोग करता है)
आशा है कि यह किसी की मदद करता है!

1. निरीक्षक में तत्वों टैब पर जाएं
2. राइट क्लिक करें <body>और "पर क्लिक करें HTML के रूप में संपादित करें "
3. निम्नलिखित तत्व जोड़ें <body>उसके बाद Ctrl + Enter दबाएं:
   <div id="debugFreeze" data-rand="0"></div>
4. इस नए तत्व पर राइट क्लिक करें, और "ब्रेक ऑन ..." -> "संशोधनों में भाग लें" चुनें
5. अब कंसोल पर जाएं और निम्नलिखित कमांड चलाएँ:
   setTimeout(function(){$("#debugFreeze").attr("data-rand",Math.random())},5000);
6. अब ब्राउज़र विंडो पर वापस जाएं और आपके पास अपने तत्व को खोजने के लिए 5 सेकंड हैं और ब्रेकपॉइंट हिट होने से पहले ही इसे क्लिक करें।
7. अब आप शांति से अपने क्लिक किए गए / होवरेड / केंद्रित / आदि तत्व का निरीक्षण कर सकते हैं।

बेशक, आप जावास्क्रिप्ट और समय को संशोधित कर सकते हैं, अगर आपको विचार मिलता है।

Comments

अरे! शानदार विचार ... आपको अतिरिक्त डीवा जोड़ने की भी आवश्यकता नहीं है ... बस इसके बजाय इस जावास्क्रिप्ट को चलाएं setTimeout(function(){debugger;}, 5000);, फिर अपना तत्व दिखाएं और तब तक प्रतीक्षा करें जब तक कि यह डिबगर में टूट न जाए। फिर क्रोम इंस्पेक्टर में "एलिमेंट्स" टैब पर क्लिक करें, और आप वहां अपने एलिमेंट की तलाश कर सकते हैं। आप "फाइंड एलीमेंट" आइकन (मैग्निफाइंग ग्लास जैसा दिखता है) पर क्लिक करने में सक्षम हो सकते हैं और क्रोम आपको पृष्ठ पर अपने तत्व को देखने और निरीक्षण करने और उसे राइट क्लिक करके खोजने देगा, फिर "इंसिस्टेंट एलिमेंट" का चयन करें।

— ब्रैड पार्क

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

— frssombor

Answer 4

1. एलिमेंट्स टैब के अंदर कहीं भी राइट क्लिक करें
2. चुनें Breakon... > subtree modifications
3. आप जिस पॉपअप को देखना चाहते हैं उसे ट्रिगर करें और अगर वह DOM में बदलाव देखता है तो उसे फ्रीज कर देगा
4. यदि आप अभी भी पॉपअप नहीं देखते हैं, तो क्रोम के ऊपरी शीर्ष केंद्र के Step over the next function(F10)पास बटन पर क्लिक करें Resume(F8)जब तक आप पॉपअप को फ्रीज नहीं कर लेते, जिसे आप देखना चाहते हैं।

Comments

धन्यवाद! मुझे यह पता नहीं था और इसकी मुझे बचाने

— आर क्लॅवेन

Answer 5

मैंने पाया कि यह क्रोम में वास्तव में अच्छा काम करता है।

उस तत्व पर राइट क्लिक करें जिसका आप निरीक्षण करना चाहते हैं, फिर Force Element State> Hover पर क्लिक करें। स्क्रीनशॉट संलग्न है।

Comments

यह तभी काम करेगा जब पॉपुलेशन को css द्वारा ट्रिगर किया जाएगा।

— mik01aj

Answer 6

इसे कंसोल टैब में रखें:

setTimeout(function(){debugger;}, 5000)

फिर पॉपअप दिखाने के लिए 5 क्लिक करें, बाद में - स्क्रीन जमी होगी और सीएसएस को मज़ेदार कस्टमाइज़ किया जाएगा।

Answer 7

मेरा आसान तरीका:

setTimeout(function(){ debugger; }, 3000);

Comments

यह ठीक वैसा ही है जैसा 3 साल पहले ब्रैड पार्क्स के समाधान में पोस्ट किया गया था

— frzsombor

Answer 8

मैंने यहां दूसरे समाधानों की कोशिश की, वे काम करते हैं लेकिन मैं आलसी हूं इसलिए यह मेरा समाधान है

1. विस्तारित अवस्था को ट्रिगर करने के लिए तत्व पर होवर करें
2. ctrl+ shift+c
3. तत्व पर फिर से मंडराना
4. दाएँ क्लिक करें
5. डीबगर पर नेविगेट करें

राइट क्लिक करके यह अब माउस इवेंट को पंजीकृत नहीं करता है क्योंकि एक संदर्भ मेनू पॉप अप होता है, इसलिए आप माउस को सुरक्षित रूप से दूर ले जा सकते हैं