उस तत्व का निरीक्षण करें जो केवल तब दिखाई देता है जब अन्य तत्व माउस ओवरडेड / दर्ज किया गया हो

119

अक्सर मैं एक तत्व (जैसे टूलटिप) का निरीक्षण करना चाहता हूं जो केवल तब दिखाई देता है जब एक अन्य तत्व माउस ओवरेड / दर्ज किया जाता है। जो तत्व दिखाई देता है, उसे jQuery के माउसेंटर इवेंट के माध्यम से दिखाई देता है।

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

क्या जेएस घटनाओं को रोकने के लिए एक तरीका है ताकि मैं तत्व पर मंडरा सकता हूं, फिर ब्राउज़र के जेएस को रोकें, और सफलतापूर्वक निरीक्षण करें?

एक उदाहरण के लिए, ट्विटर बूटस्ट्रैप के टूलटिप्स का निरीक्षण करने का प्रयास करें: http://getbootstrap.com/javascript/#tooltips ।

javascript google-chrome-devtools

— डॉन पी
स्रोत

9

बस FYI करें, यदि तत्व JS के बजाय CSS के कारण प्रकट होता है, तो आप :hover"टूल एलीमेंट स्टेट" और उसके बाद ": hover" का चयन करते हुए Dev Tools में तत्वों (DOM) दृश्य में तत्व पर राइट क्लिक करके इसे बाध्य कर सकते हैं ।

— एमएमएम

226

यह क्रोम 38.0.2094.0 में काफी आसान है।

यहाँ यह कैसा दिखेगा:

क्रमशः:

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

यदि टूलटिप सीएसएस के कारण दिखाई देता है, तो उस स्थिति में आप क्या कर सकते हैं:

क्रमशः:

DevTools खोलें
देव टूल में ट्रिगरिंग तत्व चुनें (लिंक)
राइट क्लिक करें, और "बल तत्व स्थिति" चुनें, और ": hover" चुनें
CSS टूलटिप का निरीक्षण करें

— कोई व्यक्ति
स्रोत

1

@YuriyGalanter यह बायीं तरफ ऊपर की तरफ स्पाई ग्लास के माध्यम से उपलब्ध है। बस आइकन पर क्लिक करें, फिर टूलटिप पर क्लिक करें :)

— asime Vidas

3

हाँ, मैंने एक GIF जोड़ दिया जिससे यह देखना आसान हो जाए कि मैं क्या कर रहा हूँ।

— कुछ लड़के

2

@DonnyP मैंने इस्तेमाल किया byzanz-record। यह एक पैकेज है जिसे आप प्राप्त कर सकते हैं sudo apt-get install byzanz।

— कुछ लड़के

5

लिसेक भी है , यह स्क्रीन के एक हिस्से को सीधे सुपर-अनुकूलित जीआईएफ में रिकॉर्ड करता है। विंडोज, ओएस एक्स और लिनक्स।

— २६ में

2

@ bfred.it LICEcap लिनक्स के लिए उपलब्ध नहीं है। इस गितुब मुद्दे पर देखें विषय। लगता है कि लोगों को वाइन के साथ इसे चलाने में सफलता मिल रही है ।

— आइजैक ग्रेगसन

15

दोनों सफारी और क्रोम वेब इंस्पेक्टर प्रस्तावों चेकबॉक्स चुनें जहाँ आप बदल सकते हैं :active, :focus, :hoverऔर :visitedएक तत्व के राज्य। उन का उपयोग करना और भी आसान हो सकता है।

सफारी:

सफारी में चेकबॉक्स

क्रोम:

Chrome में चेकबॉक्स

— zı zs uɐɟəʇs
स्रोत

5

टूलटिप को :hoverशैलियों द्वारा ट्रिगर नहीं किया गया है ।

— 05इमे विद

2

फ़ायरफ़ॉक्स पर फ़ायरबग में एक ही चीज़ है (शून्य :visited, जो स्नूपिंग को रोकने के लिए प्रतिबंधित है) - एचटीएमएल टैब पर, यह दाईं ओर "स्टाइल" ड्रॉपडाउन में है

— इज़काता

1

@Izkata फ़ायरफ़ॉक्स के मूल डेवलपर टूल के लिए, ब्रेडक्रंब में तत्व को राइट-क्लिक करें, या HTML / DOM ट्री, और से चुनें :hover, :activeया :focus।

— किरण मूल्य

4

यह करने के लिए एक और मुश्किल तरीका भी है:

उस तत्व पर जाएं जो आपके टूलटिप को प्रकट करता है।
प्रासंगिक मेनू खोलने के लिए राइट क्लिक करें।
अपने माउस को अपने देव टूल विंडो में ले जाएं और बाईं ओर देव टूल पैनल में कहीं भी क्लिक करें।

आपका टूलटिप दिखाई देगा, तब आप तत्व टैब में उसका निरीक्षण कर पाएंगे।

क्रोम पर परीक्षण किया गया। फ़ायरफ़ॉक्स पर काम करने के लिए प्रतीत नहीं होता है।

— निकोलस फ़ॉर्नी
स्रोत

1

मैंने पिछले दिनों ऐसा ही किया है, लेकिन @ SomeGuy का जवाब सबसे अच्छा और आसान तरीका है।

— जॉन वाशम

@JohnDubya नहीं यह वास्तव में नहीं है। यह आधिकारिक तरीका हो सकता है लेकिन यह निश्चित रूप से आसान नहीं है। अभी तक बहुत सारे कदम शामिल हैं।

— मिनीरग्नरोक

यह वही है जो मैं आमतौर पर करता हूं, लेकिन यह हमेशा काम नहीं करता है।

— सिनटेक

3

जबकि @ SomeGuy का उत्तर उत्कृष्ट है (एनिमेटेड gifs के लिए t-up), एक विकल्प के रूप में आप इसे हमेशा प्रोग्राम कर सकते हैं। बस पॉप खोलें कंसोल और घटना के नाम में टाइप करें

document.getElementById('id').dispatchEvent(new Event('event-type'));

(शुद्ध जावास्क्रिप्ट विशिष्ट सिंटैक्स ब्राउज़र के साथ भिन्न हो सकते हैं)

JQuery के साथ और भी आसान:

$('#id').trigger('event-type');

आपके उदाहरण ( http://getbootstrap.com/javascript/#tooltips ) में, कंसोल खोलें और टाइप करें, उदाहरण के लिए:

$("button:contains('Tooltip on right')").mouseenter();

और टूलटिप DOM में दिखाई देता है और इसे मैन्युअल रूप से निरीक्षण / संशोधित किया जा सकता है:

<div style="top: 14406.9px; left: 1048.25px; display: block;"
id="tooltip952596" class="tooltip fade right in" role="tooltip">
<div style="" class="tooltip-arrow"></div>
<div class="tooltip-inner">Tooltip on right</div></div>

जैसा कि टिप्पणियों में, यदि आप पृष्ठ फ़्रेम पर माउस पॉइंटर को स्थानांतरित करते हैं, तो आप अन्य घटनाओं जैसे कि ट्रिगर कर सकते हैं mouseout। इसे रोकने के लिए आप दबा सकते हैं F8(जैसा कि उत्तर में है। उत्तर) या प्रकार debugger;(जो इसकी स्क्रिप्ट समतुल्य है)

— blgt
स्रोत

1

तत्व का निरीक्षण करते हुए आप अभी भी अन्य घटनाओं (जैसे mouseout) को ट्रिगर कर सकते हैं , इसलिए यह पहली जगह में समस्या को हल नहीं करता है। इसे चुनते समय आपको काफी सावधान रहना होगा। लेकिन यह एक वैकल्पिक तरीका है।

— MMM