मैं एक ब्राउज़र में गायब होने वाले तत्व का निरीक्षण कैसे कर सकता हूं?


152

मैं एक तत्व का निरीक्षण कैसे कर सकता हूं जो मेरे माउस के चले जाने पर गायब हो जाता है? उदाहरण ड्रॉपडाउन जो गायब हो जाता है

मुझे नहीं पता कि यह आईडी, कक्षा या कुछ भी है लेकिन इसका निरीक्षण करना चाहते हैं।

समाधान मैंने कोशिश की है:

कंसोल के अंदर jQuery चयनकर्ता चलाएँ, $('*:contains("some text")')लेकिन मुख्य रूप से कोई भाग्य नहीं था क्योंकि तत्व छिपा नहीं है, लेकिन संभवतः DOM ट्री से हटा दिया गया है।

परिवर्तनों के लिए डोम ट्री का मैन्युअल रूप से निरीक्षण करने से मुझे कुछ भी नहीं मिलता है क्योंकि ऐसा लगता है कि जो कुछ भी बदल गया है उसे नोटिस करना बहुत तेज़ है।

सफलता:

मैं इवेंट ब्रेक पॉइंट के साथ सफल रहा हूं। विशेष रूप से - मेरे मामले में मूसडाउन। बस Sources-> Event Listener Breakpoints-> Mouse-> mousedownChrome में जाएं। उसके बाद मैंने उस तत्व पर क्लिक किया जिसका मैं निरीक्षण करना चाहता था और अंदर Scope Variablesमैंने कुछ उपयोगी दिशाएँ देखीं।


2
आपके प्रश्न ने मदद की हालांकि मुझे सूत्रों का उपयोग करके ब्रेकपॉइंट पर नहीं मिला, मैंने कंसोल में निम्नलिखित स्क्रिप्ट को निष्पादित किया: document.body.addEventListener('mouseup',function(){ debugger; })मुझे ब्रेक में मिला और मैं बनाए गए तत्वों का निरीक्षण कर सकता था।
एचएमआर

आपने धमाल मचाया। प्रतिक्रिया-चयन नियंत्रण के साथ यह सटीक समस्या थी, जहां मैं सूची आइटम के HTML को नहीं देख सका क्योंकि सबट्री किसी भी समय दूर हो जाएगी। सेलेनियम का उपयोग करके क्लिकों को स्वचालित करने के लिए आइटम आईडी की आवश्यकता है। धन्यवाद!
araisbec

जवाबों:


177

(यह उत्तर केवल Chrome डेवलपर टूल पर लागू होता है। नीचे अपडेट देखें।)

ऐसा तत्व खोजें जिसमें लुप्त तत्व हो। तत्व पर राइट क्लिक करें और "ब्रेक ऑन ...> सबट्री मोडिफिकेशन" लागू करें। यह तत्व के गायब होने से पहले डिबगर पॉज फेंक देगा, जो आपको रुके हुए अवस्था में तत्व के साथ बातचीत करने की अनुमति देगा।

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

अपडेट 22 अक्टूबर 2019: वी। 70 की रिलीज के साथ, ऐसा लग रहा है कि फायरफॉक्स अंत में इस तरह के डिबगिंग 2 3 का समर्थन करता है :

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


1
कुछ संभावित भ्रम से बचने के लिए - जब आप इवेंट को ट्रिगर कर रहे हैं, तो डिबगर एक जगह के नाम पर टाइप करना शुरू कर देगा। जब स्क्रीन डोम पर ही प्ले बटन दबाती है और आप ईवेंट को ट्रिगर कर पाएंगे।
डायलन पियर्स

यह काम नहीं करता है यदि पृष्ठ ने राइट-क्लिक पर कब्जा कर लिया है और क्या यह राइट-क्लिक पर अपनी चीज है।
माइकल

यह एक ही कंटेनर में पहले दो संवादों के लिए काम नहीं करता है
स्टिल_लर्निंग

@Still_learning क्या आप समझा सकते हैं कि "एक ही कंटेनर में दो संवाद" से आपका क्या मतलब है।
arxpoetica

<v-container><v-dialog></v-dialog><v-dialog></v-dialog></v-container>- मेरे मामले में पहला संवाद केवल तब तक प्रदर्शित होता है जब तक कि डीबी से डेटा नहीं आता है, लगभग 1 सेकंड
स्टिल_लर्निंग फेंस

92

क्रोम में एक वैकल्पिक विधि:

  • ओपन देवटूल (F12)।
  • "स्रोत" टैब चुनें।
  • जिस तत्व को आप चाहते हैं वह प्रदर्शित होता है, F8 (या Ctrl + /) दबाएं। यह स्क्रिप्ट निष्पादन को तोड़ देगा और इसे प्रदर्शित होने के साथ ही डोम को "फ्रीज" कर देगा।
  • इस बिंदु से, तत्व का चयन करने के लिए Ctrl + Shift + C का उपयोग करें।

3
उत्तम!! यह वही है जो मैं चाहता था
डैनियल लोइटर्टन

2
मैंने देखा कि यह तभी काम करता है जब आपके पास डेवलपर उपकरण पहले से ही 'स्रोत' टैब में खुले हों।
३०

3
यह कोड को निष्पादन से मुक्त करता है लेकिन तत्व अभी भी गायब है (मैं रिएक्ट का उपयोग कर रहा हूं)।
लोरम इप्सम डोलर

मेरा Chrome F8 या Crtl + \ (Crtl + / नहीं) कहता है। इसके अलावा, Crtl + \ मेरे मामले में काम नहीं करता है ...
रोजर Veciana

यह Google वीडियो नियंत्रण पॉप-अप पर काम नहीं करता है ... जैसे ही आप कुंजी दबाते हैं, नियंत्रण दृश्य से फीका हो जाता है, और फ्रीज होने से पहले पूरी तरह से फीका हो जाता है।
माइकल

18
  1. कंसोल खोलें
  2. में टाइप करें setTimeout(()=>{debugger;},5000);
  3. एंटर दबाए

अब आपके पास अपना तत्व दिखने के लिए 5 सेकंड हैं। एक बार जब यह दिखाई दिया, तब तक प्रतीक्षा करें जब तक डिबगर हिट न हो जाए। जब तक आप फिर से शुरू नहीं करते हैं, तब तक आप अपने तत्व के साथ खेल सकते हैं और यह गायब नहीं होगा।


हर बार उपरोक्त चरणों को दोहराने से बचने के लिए उपयोगी टिप:

इसे बुकमार्क के रूप में जोड़ें:

  1. किसी भी पृष्ठ को बुकमार्क करें
  2. इस नए बुकमार्क को संपादित करें
  3. URL / स्थान को इसके साथ बदलें: javascript:(function(){setTimeout(()=>{debugger;},5000);})();

अगली बार जब आप इसका उपयोग करना चाहते हैं, तो बस इस बुकमार्क पर क्लिक / टैप करें।


1
यह गायब तत्वों को डिबग करने का सबसे तेज और सबसे स्थिर तरीका है ^
वार्मविस्की

8

मैं मैक पर क्रोम का उपयोग कर रहा हूँ वहाँ मैंने ऊपर के चरणों का पालन किया है लेकिन मैं थोड़ा और समझाने की कोशिश करूँगा:

  1. तत्व का निरीक्षण करने के लिए राइट क्लिक करें और जाएं।
  2. स्रोतों टैब पर जाएं।
  3. फिर तत्व पर मंडराना।
  4. फिर कीबोर्ड का उपयोग कर F8 या Command(Window) \ । यह एक स्थिर स्थिति में स्क्रीन को रोक देगा और तत्व बाहर होवर पर गायब नहीं होगा।

1
धन्यवाद, विस्तृत निर्देशों के लिए धन्यवाद! चरम निपुणता के प्रदर्शन के बाद - एक बटन पर क्लिक करना, दबाव डालना Ctr + Shift + C, माउस को तत्व के ऊपर मंडराना, और F8एक दूसरे और आधे स्थान के भीतर दबाना - अंत में मुझे निरीक्षण मोड में मेरा तत्व मिल गया
चित्र 11 में

2

फायरबग में इसके लिए अलग-अलग समाधान हैं:

  1. आप HTML पैनल के अंदर ब्रेक ऑन म्यूट का उपयोग कर सकते हैं । (इसके साथ आप यह भी पता लगा पाएंगे कि यह कौन सा तत्व है)
  2. आप तत्व को राइट-क्लिक कर सकते हैं और फायरबग के साथ निरीक्षण तत्व चुन सकते हैं

इसके अलावा, आप 551 समस्या का पालन करना चाह सकते हैं , जो विशिष्ट घटनाओं को अस्थायी रूप से अवरुद्ध करने का एक तरीका पूछता है।

संपादित करें:

यह पता लगाने के लिए कि यह कौन सा तत्व है आप HTML पैनल के विकल्पों को भी बदल सकते हैं। परिवर्तन , विस्तार परिवर्तन और स्क्रॉल में परिवर्तन देखें को HTML पैनल के अंदर दिखाई देने योग्य बना सकते हैं।

सेबस्टियन


क्रोम के साथ-साथ सभ्य इंस्पेक्टर भी है। समस्या यह है - तत्व पर राइट क्लिक यह मेरे मामले में गायब हो जाता है। क्रोम में DOM म्यूट पर भी ब्रेक है। इस समस्या के साथ - मुझे नहीं पता कि यह किस तत्व के रूप में गतिशील रूप से उत्पन्न होता है
lukas.pukenis

1
मैंने सिर्फ एक संकेत देने के लिए अपने उत्तर को संपादित किया कि कैसे पता चले कि यह कौन सा तत्व है।
सेबस्टियन जार्टनर

2

मेरे मामले में, मैंने Google क्रोम पर विस्तार से पुनरावर्ती विकल्प का उपयोग किया :

कदम हैं:

  1. ड्रॉपडाउन फ़ील्ड का निरीक्षण करें
  2. डायनामिक DOM (बैंगनी हाइलाइट) खोजें
  3. उस डायनामिक DOM पर राइट-माउस क्लिक करें
  4. विस्तार से पुनरावर्ती चुनें : यहाँ छवि विवरण दर्ज करें
  5. हम देख सकते हैं कि सभी तत्व वहां मौजूद हैं

यहाँ एक डेमो है:

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


2

अपने माउस के साथ तत्व पर होवर करें और स्क्रिप्ट निष्पादन को रोकने के लिए F8 (क्रोम में) दबाएं। होवर अवस्था आपके लिए दृश्यमान रहेगी।

यह आपको स्रोत टैब पर ले जाता है। एलिमेंट्स टैब पर वापस जाएं। इस बार कोड गायब नहीं होगा।


0

आप तत्वों के तहत निरीक्षक में दिखाई देने वाले और गायब होने वाले तत्वों को देख सकते हैं। यदि आप तत्व के लिए नेविगेट करते हैं, तो यह दिखाई देता है कि आप इसे गायब होने पर देख सकते हैं या स्थिति बदलने पर इसका सीएसएस बदल सकते हैं।

फायरबॉक्स में फायरबग या क्रोम में निर्मित इंस्पेक्टर के साथ यह संभव है।


1
हाँ। मैंने कहा है कि परिवर्तन डोम और पेज में बहुत तेजी से होता है, इसलिए डोम को भारी रूप से संशोधित किया जाता है, इसलिए यह वास्तव में एक समाधान नहीं है क्योंकि मैं अपने आवश्यक तत्वों को हर जगह संशोधनों के गुच्छा से अलग नहीं कर पा रहा हूं :)
lukas.pukenis

आप यह पता लगाने की कोशिश कर सकते हैं कि कंसोल का उपयोग करके क्या चल रहा है। उदाहरण के लिए, फ़ंक्शन की शुरुआत में आप ऑब्जेक्ट सीएसएस इत्यादि देख सकते हैं या परिवर्तनों को धीमा कर सकते हैं जब तक कि आप नहीं जानते कि वे ठीक से काम करते हैं और फिर गति को आप में बदल दें। यह चाहते हैं कि उदाहरण के लिए jquery में छिपाना ('धीमा') हो
matpol

समस्या यह है - यह मेरा अपना कोडबेस नहीं है, यह एक विरासत है, बड़ी, पुरानी, ​​कोडबेस जहां फाइलों के माध्यम से सरल खोज मुझे कुछ नहीं देती है .. :)
lukas.pukenis

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

2
इसके बारे में कैसे: stackoverflow.com/questions/10213703/…
मैटोल

0

मेरे पास एक ही समस्या थी लेकिन मैं फ़ायरफ़ॉक्स का उपयोग करता हूं जैसे ही मैं गायब हो जाता हूं जैसे ही खुले निरीक्षण तत्व ने एक समाधान पाया: 4 डैश खोलें (सेटिंग्स) वेब डेवलपर पर जाएं> डीबगर और तुरंत F8 दबाएं जो कि स्क्रिप्ट को रोकने वाले ठहराव के लिए शॉर्टकट है इससे पहले कि आप किक करें और पता लगा लें कि आपने डेवलपर्स टूल्स को खोला है

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.