मैं HTML तत्व का निरीक्षण कैसे कर सकता हूं जो खोए हुए फोकस पर DOM से गायब हो जाता है?

137

मैं एक इनपुट से टेबल सेल में सीएसएस गुणों का निरीक्षण करने की कोशिश कर रहा हूं। इनपुट क्लिक पर दिखाई देता है और खोए हुए फ़ोकस पर गायब हो जाता है, जब मैं इसका निरीक्षण करने की कोशिश करता हूं। जब मैं दूसरी विंडो (इंस्पेक्टर) में जाता हूं, तो मैं खोए हुए फोकस को कैसे नहीं कर सकता हूं?

html css dom

— रोगेलियो ट्रिविनो
स्रोत

2

संभव कैसे एक तत्व का निरीक्षण करने के लिए

— जोनाथन

3

नहीं है, इस सवाल का हल यहां उपयुक्त नहीं है

— रोजेलियो ट्रिविनो

1

समाधान बहुत उपयुक्त है

— योनातन

2

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

— रोजेलियो ट्रिविनो

144

क्रोम ब्राउज़र में, डेवलपर टूल खोलें और एलिमेंट्स टैब चुनें , फिर जिस तत्व का आप निरीक्षण करना चाहते हैं, उसके मूल नोड का संदर्भ मेनू खोलें, संदर्भ मेनू में ब्रेक ऑन पर क्लिक करें > सबट्री संशोधनों ।

बाद में आपको केवल पृष्ठ पर क्लिक करने की आवश्यकता है और आप उस निरीक्षक पर ध्यान केंद्रित किए बिना या उस तत्व को खोए बिना प्राप्त करेंगे, जिसका आप निरीक्षण करना चाहते हैं।

— रोगेलियो ट्रिविनो
स्रोत

5

क्या एफएफ में भी कोई रास्ता है?

— दोस्त

2

धन्यवाद, घंटों अवरुद्ध होने के बाद मुझे यह समाधान मिला, और यहाँ प्रश्न और समाधान लिखने का फैसला किया, समय के साथ मेरी प्रतिष्ठा का मुख्य स्रोत यहाँ है, आप जानते हैं, मेरे पास "2 + 2 कैसे कर सकते हैं" जैसे प्रश्नों का समय नहीं है। जावा पर? "

— रोजेलियो ट्रिविनो

जिस तत्व का आप निरीक्षण करना चाहते हैं, उसके मूल नोड को आप कैसे खोजते हैं? मेरे पास इंस्पेक्टर में तत्व को खोलने के लिए मेरे द्वारा क्लिक किया गया बटन है, लेकिन DOM में पॉप-अप स्पष्ट रूप से असंबंधित है।

— माइकल

हां, कभी-कभी जावास्क्रिप्ट सीधे शरीर या संबंधित शीर्ष DOM तत्वों के तहत नए तत्व बनाते हैं। यदि आपका कोड कोई समस्या नहीं है, तो आपको पता होना चाहिए कि आपकी जावास्क्रिप्ट कहाँ चीज़ बना रही है, यदि नहीं, तो शायद आपको बॉडी सबट्री संशोधनों पर ब्रेक लगाना चाहिए और देव टूल्स पर जांचना चाहिए कि वास्तव में नए डोम तत्व कैसे बनाए जा रहे हैं (प्रत्यक्ष नहीं होना चाहिए) माता-पिता)

— रोजेलियो ट्रिविनो

प्रासंगिक मेनू के बारे में भ्रमित लोगों के लिए, यह डोम नोड के बाईं ओर तीन डॉट्स मेनू है।

— palerdot

92

यदि आप माउस को ले जाए बिना कीबोर्ड शॉर्टकट से जावास्क्रिप्ट एक्ज़क्यूट करते हैं तो आप गायब होने वाले तत्व को पकड़ सकते हैं। यहां बताया गया है कि आप Chrome में ऐसा कैसे करते हैं:

डेवलपर टूल खोलें और सूत्रों पर जाएं।
स्क्रिप्ट निष्पादन को रोकने के लिए शॉर्टकट पर ध्यान दें- F8।
प्रदर्शित करने के लिए तत्व प्राप्त करने के लिए UI के साथ सहभागिता करें।
मारो F8।
आप अपने माउस को कैसे घुमा सकते हैं, डोम का निरीक्षण करें, जो भी हो। तत्व वहीं रहेगा।

यह ट्रिक फ़ायरफ़ॉक्स और अन्य आधुनिक ब्राउज़रों में भी काम करती है।

— mxxk
स्रोत

12

यह कई चीजों के लिए बहुत अच्छा है - लेकिन डिबगर लॉक होने से पहले कुछ स्क्रिप्ट अभी भी ट्रिगर होंगी। उदाहरण के लिए, मेरा स्वत: पूर्ण चयन बॉक्स स्क्रिप्ट को रोकने से पहले सभी विकल्पों को छुपाता है - अंतःक्रियात्मक रूप से शैलियों को ट्विक करना बहुत मुश्किल है।

— मीर

दुर्भाग्य से यह एक क्रोम केवल संकेत है, लेकिन इसे हल किया कि मैंने इसे स्वयं क्यों आजमाया।

— वेबवेक

1

@webwake, हाँ यह विशेष उदाहरण क्रोम में है, लेकिन अधिकांश आधुनिक ब्राउज़र आपको कीबोर्ड शॉर्टकट का उपयोग करके स्क्रिप्ट निष्पादन को रोक देंगे।

— mxxk

यह पूरी तरह से काम किया और इतना आसान था! नोट: यह मैक के लिए क्रोम पर स्क्रिप्ट निष्पादन को रोकने के लिए `: +` है।

— जॉर्डन ग्रे

1

सुनकर अच्छा लगा @ जोर्डनग्रे। क्या आपका मतलब है- ⌘बैकस्लैश? मेरे लिए यह F8काम के साथ-साथ यह दोनों कहता है ।

— mxxk

73

यदि अन्य सभी विफल रहता है, तो कंसोल में यह लिखें:

setTimeout(() => { debugger; }, 5000)

फिर आपको जो भी डिबग करना है, उसे दिखाने के लिए आपको 5 सेकंड का समय मिला है (या किसी और चीज़ के लिए मूल्य बदलें)।

अन्य उत्तर में से कोई भी मेरे लिए काम किया - डोम पेड़ संशोधित हो रही रखा (यानी सामान के बारे में मैं गायब हो गया परवाह) सही से पहले स्क्रिप्ट रोक दिया है।

— निक फारिना
स्रोत

7

यह समाधान बहुत हैक है, लेकिन यह वास्तव में काम करता है! धन्यवाद!

— मंजर

1

उन सभी का सबसे विश्वसनीय सरल समाधान।

— जेम्स

13

सुनिश्चित नहीं है कि यह आपकी स्थिति में काम करता है, लेकिन सामान्य रूप से (और इस मामले में उल्लेख के लायक हर मामले में यह एक महान उपकरण है) क्रोम डेवलपर टूल में आप तत्व राज्यों को अनुकरण कर सकते हैं और एक भी है :focus ।

ऐसा करने के लिए Elementsडेवलपर टूल में टैब पर जाएं और सुनिश्चित करें कि आप Stylesदाईं ओर अनुभाग में हैं (यह डेवलपर उपकरण शुरू करते समय डिफ़ॉल्ट स्थान होना चाहिए)। अब बस दाएं कोने में ऊपर की ओर शैलियाँ हैं, आपके पास एक आइकन है Toggle Element State। उस पर क्लिक करने आप अनुकरण कर सकते हैं :active, :hover, :focusऔर :visitedतत्व के लिए आप अपने कोड को ध्यान में रखते बाईं तरफ का चयन किया।

यहाँ छवि विवरण दर्ज करें

— डंबा एफ।
स्रोत

3

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

— Rogelio Triviño

9

परीक्षण के तहत पृष्ठ के लिए डेवलपर टूल पृष्ठ पर Chrome में ... विकल्प मेनू पर क्लिक करें और वरीयताओं के लिए सेटिंग्स खोलें ... DevTools के अंतर्गत 'एक केंद्रित पृष्ठ का अनुकरण करें' सक्षम करें

फिर परीक्षण पृष्ठ में तत्व दिखाई देते हैं। यह मेरे पॉपअप खोज परिणामों को स्क्रीन पर बनाए रखने के लिए केंद्रित है ताकि मैं इसके साथ काम कर सकूं।

— user10864281
स्रोत

8

वास्तविक समाधान नहीं है, लेकिन यह आमतौर पर काम करता है:

तत्व पर ध्यान दें
संदर्भ मेनू के लिए राइट क्लिक करें
डेवलपर टूल पर जाएं

— दिमित्री विप्रिकेंको
स्रोत

1

अभी भी जनवरी 2020 तक क्रोम पर काम करता है, इसके लिए धन्यवाद! अच्छा समाधान

— मैनरो

2

मेरे पास एक बहुत ही कठिन स्थिति थी और कोई भी जवाब यहाँ से काम नहीं कर रहा था (मैंने कंटेनर को बदलने वाले उत्तरों को सत्यापित नहीं किया, जो कि मेरे लिए शरीर है, या मूल घटना है, क्योंकि मुझे यह नहीं पता है)। मुझे अंत में क्रोम इंस्पेक्टर में कंट्रोल इवेंट श्रोता ब्रेकप्वाइंट के माध्यम से तोड़कर एक वर्कअराउंड मिला। शायद यह भी जटिल परिस्थितियों के लिए तोड़ने का एक क्रॉस ब्राउज़र तरीका है जहां F8 या राइट क्लिकिंग माउस फिर से पॉपअप छिपाते हैं:

— जनवरी
स्रोत

1

ब्राउज़र डेवलपर कंसोल में निम्नलिखित जावास्क्रिप्ट पेस्ट करें:

// Delayed console log of parent element with disappearing child element(s)
// Once code is trigger, you have 3 seconds to trigger the hidden element before it snapshots.
// The hidden elements should appear in the console ready to inspect.

var timer = 3000; //time before snapshot
var parent_of_element_to_inspect = 'div.elementcontainer'; //container of element to snapshot
setTimeout(function(){
 console.log(document.querySelector(parent_of_element_to_inspect).cloneNode(true));
},timer);

— ईडीसी
स्रोत

0

मेरे पास जल्दी ठीक है क्योंकि मैं उपकरण का उपयोग करने के साथ बहुत अच्छा नहीं हूं, यहां मैं क्या कर रहा हूं।

event.originalEvent.preventDefault();
event.originalEvent.stopImmediatePropagation();
event.originalEvent.stopPropagation();

— हिमांशु पंत
स्रोत

-1

यदि आप Chrome DevTools खोलते हैं और फिर कीबोर्ड शॉर्टकट का उपयोग करके तत्व निरीक्षक को ट्रिगर करते हैं, तो यह समस्या को हल करना चाहिए।

मैक: Cmd+Opt+J और फिरCmd+Opt+C

विंडोज: Ctrl+Shift+J और फिरCtrl+Shift+C

[

— applemonkey496
स्रोत