Chrome में होवर किए गए तत्व का निरीक्षण करें?

106

मैं Chrome के डेवलपर टूल के माध्यम से यह देखने का प्रयास कर रहा हूं कि टूलटिप्स किसी साइट पर कैसे संरचित हैं। हालांकि, यहां तक कि जब मैं आइटम पर मँडरा जाता हूं, जब मैं "तत्व का निरीक्षण करता हूं", तो html में टूलटिप के लिए कुछ भी नहीं दिखाता है। मुझे पता है कि मैं स्टाइल को सेट कर सकता हूं :hover, लेकिन मैं अभी भी टूलटिप का html या सीएसएस नहीं देख सकता।

कोई विचार?

— Skitterm
स्रोत

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

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

80

मुझे वास्तव में ट्विटर बूटस्ट्रैप टूलटिप्स के साथ ऐसा करने की एक चाल मिली। यदि आप किसी अन्य मॉनीटर पर dev टूल (F12) खोलते हैं, तो टूलटिप को लाने के लिए तत्व पर होवर करें, राइट क्लिक करें जैसे कि आप 'इंस्पेक्ट एलिमेंट' का चयन करने के लिए थे। उस संदर्भ मेनू को खुला छोड़ते हुए, फ़ोकस को देव टूल्स पर ले जाएँ। टूलटिप के लिए HTML को HTML के लिए टूलटिप के तत्व के बगल में दिखाना चाहिए। फिर आप इसे ऐसे देख सकते हैं जैसे कि वह कोई दूसरा तत्व हो। यदि आप क्रोम पर वापस जाते हैं तो HTML गायब हो जाता है ताकि कुछ पता चले।

एक अजीब तरह का है, लेकिन यह मेरे लिए काम किया है तो मुझे लगा कि मैं इसे साझा करूंगा।

— जस्टिन चमुरा
स्रोत

12

खैर हाँ, लेकिन मैक पर नहीं।

— एक्टिमेल

2

- चरण 1: उस तत्व का निरीक्षण करें जो क्रोम देव टूल्स को लाने के लिए टूलटिप बनाता है। - चरण 2: तत्व पर मँडराते समय, आपका टूलटिप दिखाई देगा। तत्व को छोड़े बिना, एक नई विंडो खोलें (मैक पर कमांड-एन, अन्यत्र Ctrl-N) । - चरण 4: नीचे स्क्रॉल करें, जहाँ आपके टूलटिप को DOM से जोड़ा गया है। इसके स्टाइल को देखने के लिए तत्व पर क्लिक करें।

— पैग्लू

2

PS यह टूलटिप्स के लिए काम नहीं करता है, जो तत्व के स्वयं के शीर्षक विशेषता से जावास्क्रिप्ट के माध्यम से उत्पन्न होता है, उदाहरण के लिए SO पर होता है। उन टूलटिप्स एक डिफ़ॉल्ट स्टाइल का उपयोग करते हैं।

— पैग्लू

इससे मुझे Kendo में टूलटिप्स के लिए मदद मिली

— k29

1

चाल: पहले स्रोत टैब पर जाएं। तब आप F8 बटन के साथ जावास्क्रिप्ट को रोक सकते हैं। विराम कुंजी F8 / Ctrl + \ के शॉर्टकट के साथ है (इस पृष्ठ पर @Rajan से उत्तर)

— rostamiani

85

यह समाधान बिना किसी अतिरिक्त कोड के काम करता है।

command-option-jकंसोल खोलने के लिए मारो । कंसोल के ऊपरी दाएं कोने पर विंडो-लुकिंग बटन पर क्लिक करके कंसोल को एक अलग विंडो में खोलें।

फिर, क्रोम विंडो में, पॉपओवर को ट्रिगर करने वाले तत्व पर होवर करें, command-`हालांकि कई बार आपको कंसोल पर ध्यान केंद्रित करने की आवश्यकता होती है, फिर टाइप करें debugger। वह पृष्ठ को फ्रीज कर देगा, फिर आप एलिमेंट्स टैब में तत्व का निरीक्षण कर सकते हैं।

— joeyyang
स्रोत

6

यह उत्तर वास्तव में अच्छा है। न्यूनतम कोड, कोई jQuery या दोहरी मॉनिटर सेटअप नहीं है।

— uKolka

1

इसने काम कर दिया! प्रारंभ में कुछ ग़लतफ़हमी के कारण, मैं डिफ़ॉल्ट HTML टूलटिप्स देख रहा था न कि बूटस्ट्रैप टूलटिप्स। उस समस्या को हल करने के बाद, आपके समाधान ने काम किया। धन्यवाद।

— DFB

2

इसके अतिरिक्त यदि आप debuggerकंसोल पर लिखते समय ध्यान केंद्रित करते हैं , तो आप alt+tabतत्व पर मँडराते समय दबा सकते हैं । यह विंडोज पर क्रोमियम ऐप्स के लिए काम करता था।

— Orcun

1

यह एक महान जवाब था!

— नोबिता

Chrome DevTools कीबोर्ड शॉर्टकट पृष्ठ कहता है कि यह कंसोल पर वापस ध्यान केंद्रित करने के लिए कमांड + `के बजाय एक नियंत्रण +` है। शायद यह बदल गया।

— rinat.io

85

F8 डिबगिंग को रोक देगा।

टूलटिप पर माउस, और F8प्रदर्शित होने पर दबाएं ।

अब आप CSS को देखने के लिए निरीक्षक का उपयोग कर सकते हैं।

— dwjohnston
स्रोत

4

मुझे पसंद है कि कैसे स्टैकओवरफ़्लो में, जब तक आप नीचे स्क्रॉल करते रहते हैं, आप पाएंगे कि वास्तव में अच्छा जवाब जो कि बाकी की तुलना में दूर और बेहतर है। यह अतिरिक्त स्क्रिप्ट के बिना सरल और आसान है।

— अलेक्जेंडर डिक्सन

2

F8 ने किसी कारण से मेरे लिए काम नहीं किया, लेकिन ठहराव ctrl- \

— ब्रायन लार्सन

यहां सबसे अच्छा समाधान

— NiallMitch14

मेरे जर्मन कीबोर्ड लेआउट पर न तो <kbd> F8 </ kbd> और न ही <kbd> AltGr </ kbd> - <kbd> RCtrl </ kbd> - <kbd> ß </ kbd>।

— परीक्षण

63

आपको बस टूलटिप को इस तरह दिखाने के लिए मजबूर करना होगा

$('.myelement').tooltip('open');

अब टूलटिप राज्य की परवाह किए बिना दिखाएगा।

DOM के नीचे स्क्रॉल करें जहाँ आपको मार्कअप देखना चाहिए।

अपडेट बूटस्ट्रैप 3 के लिए cneuro की टिप्पणी देखें।

$('.myelement').tooltip('show');

अपडेट देखें क्रोम और जाहिरा तौर पर सफारी के लिए मार्को ग्रीज़क का उत्तर और $0वर्तमान में चयनित तत्व के लिए शॉर्टकट के रूप में उपयोग किया जा सकता है। यह सफारी में भी काम करता प्रतीत होता है।

$($0).tooltip('show')

— एडम ग्रांट
स्रोत

1

$ ('myelement')। टूलटिप ('ओपन') जो मेरे लिए काम करता है।

— टेकुमारा

6

बूटस्ट्रैप 3 के रूप में, यह अब .tooltip('show') getbootstrap.com/javascript/#tooltips-methods

— cneuro

2

Chrome में, वर्तमान में चयनित तत्व $0को कंसोल में एक्सेस किया जा सकता है । इसलिए आप उस तत्व का चयन कर सकते हैं जो टूलटिप को चलाता है और चलाता है $($0).tooltip('show')।

— मार्को ग्रीस्क

31

क्लिक करें f12कंसोल टैब पर जाएँ और निम्नलिखित जोड़ें:

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

यह आपको 5 सेकंड देगा जो आप चाहते हैं और यह टूट जाएगा 5 seconds। तब आप लक्ष्य तत्व का निरीक्षण कर सकते हैं

(पूर्व तत्व मँडराएँ और 5 सेकंड रुकें फिर निरीक्षण करें ..)

— अली क्लिट
स्रोत

इलेक्ट्रॉन में भी काम करता है।

— xmedeko

24

मेरे लिए, स्वीकृत उत्तर काम नहीं आया: DevTools में क्लिक करने से टूलटिप तुरंत बंद हो गई।

हालाँकि, मुझे /superuser/249050/chrome-keyboard-shortcut-to-pause-script-execution मिला जिसने मेरी मदद की:

कंसोल में :, रन:

    const F12 = 123
    window.addEventListener('keydown', function(event) { 
      if (event.keyCode === F12 ) {
        debugger; 
      }
    });

निरीक्षक के साथ तत्व को हाइलाइट करें
F12 मारो

अब आप तत्व का निरीक्षण कर सकते हैं, जावास्क्रिप्ट के साथ रोका गया है ताकि DOM परिवर्तित न हो।

— mikemaccana
स्रोत

1

चतुर ! ठीक वही जो मेरे द्वारा खोजा जा रहा था। धन्यवाद :) हालांकि यह किसी कारण से मेरे सेटअप के साथ F12 के साथ काम नहीं करता था, इसलिए मैंने keyCode == 13 का उपयोग किया और ENTER दबाया।

— जेरेमी एफ।

2

महान समाधान! मैं इस उपयोगी स्निपेट को SOURCE -> SNIPPETS क्षेत्र के क्रोम में सहेजने का सुझाव दूंगा ताकि आप इसे केवल एक डबल क्लिक के साथ निष्पादित कर सकें;)

— Magico

1

यह समाधान स्वीकृत की तुलना में कहीं बेहतर है। मैं इसे एक बुकमार्कलेट में बनाने जा रहा हूँ!

— लुलु

1

महान समाधान। बहुत चालाक।

— चार्ली डलास 21

1

उत्तम। सही / स्वीकृत उत्तर होना चाहिए!

— ब्रोसिग

10

सिंगल विंडो उत्तर, जिसमें कोई कोडिंग नहीं है

अन्य उत्तरों में से कोई भी बहुत सही नहीं है, या पर्याप्त विवरण है, इसलिए यहां मेरा प्रयास है।

F12 / Ctrl + Shift + I (विंडोज / लिनक्स) या कमांड + विकल्प + I (मैक) का उपयोग करके क्रोम के DevTools खोलें।
DevTools विंडो में स्रोत टैब चुनें ।
माउस का उपयोग करके, उस तत्व पर होवर करें जिसे आप निरीक्षण करना चाहते हैं, टूलटिप को दृश्यमान बनाने के लिए।
स्क्रिप्ट निष्पादन को रोकने के लिए F8 (Windows / Linux / Mac) दबाएँ। मुख्य विंडो ग्रे हो जाएगी, और "डीबग्ड में रुका हुआ" पॉपअप दिखाई देगा।
DevTools विंडो में, एलिमेंट्स टैब चुनें
बूटस्ट्रैप टूलटिप्स के लिए, टूलटिप अंतिम <div>में दिखाई देगा<body>

— TobyLL
स्रोत

5

जेएस सक्रिय टूलटिप्स के लिए कोई कोड समाधान नहीं:

Chrome के devtools टूलटिप के युक्त / मूल तत्व का निरीक्षण करते हैं। "एलिमेंट्स" टैब में, उस कंटेनर DOM तत्व पर राइट क्लिक करें, फिर ">" "सबट्री संशोधनों" पर "ब्रेक" चुनें। अगली बार जब आप DOM के टूलटिप पर रखे जाते हैं, तो जेएस कोड आपको टूलटिप की सामग्री का निरीक्षण करने की अनुमति देगा।

— clhenrick
स्रोत

4

इन कदमों का अनुसरण करें

Inspectक्रोम में खुली खिड़की।
टूलटिप पर माउस रखें।
दबाएँ F8

जेएस निष्पादन को रोक दिया जाएगा और फिर आप टूलटिप का निरीक्षण कर सकते हैं।
F8निष्पादन शुरू करने और F10डीबग करने के लिए फिर से दबाएं ।

— परवेज अहमद
स्रोत

2

यहाँ एक सरल उपाय है: यदि आपके पास गतिशील टूलटिप्स हैं, तो आप ट्रिगर इवेंट को बदलकर (अस्थायी रूप से) उन्हें "लगातार" बना सकते हैं click। इसका प्रभाव यह होगा कि टूलटिप केवल एक क्लिक-आउट पर गायब हो जाता है:

$('body').tooltip({
    selector: "[data-toggle='tooltip']",
    trigger: "click"
});

इस तरह, यह एफएफ या क्रोम के डीबगिंग टूल के साथ आसानी से निरीक्षण किया जा सकता है।

— lxg
स्रोत

2

1) F12 पर क्लिक करके निरीक्षण विंडो खोलें

2) सोर्स टैब पर जाएं (कंसोल के बगल में)

3) अब निरीक्षण करने के लिए तत्व पर होवर करें और अपने माउस को वहाँ रखें।

4) बटन को थामने के लिए नियंत्रण को स्थानांतरित करने के लिए कीबोर्ड (टैब या शिफ्ट + टैब) का उपयोग करके या छवि को देखें

5) जब प्ले बटन पर कीबोर्ड फोकस होता है। हिट दर्ज करें। आपका होवर तत्व फ्रीज हो जाएगा अब आप कुछ भी कर सकते हैं

— राजन
स्रोत

1

इन टूलटिप्स को संपादित करना इतना सरल है।

चरण 1 : उस तत्व का निरीक्षण करें जिसमें टूलटिप है। सुनिश्चित करें कि यह भक्तों में नीले रंग के साथ हाइलाइट किया गया है।

चरण 2 : तत्व पर (devtools भाग में) राइट-क्लिक करें और चुनें: विशेषता संशोधनों, ब्रेक ऑन के तहत

चरण 3 : निरीक्षण किए गए तत्व पर होवर करें और एक छोटे पाठ के साथ साइट पर एक ग्रे ओवरले दिखाई देगा: डीबगर में रुका हुआ

आपकी स्क्रीन के शीर्ष पर

चरण 4 : जब तक हॉवर स्थिति का चयन नहीं किया जाता है तब तक नीले तीर पर क्लिक करें।

चरण 5 : टूलटिप का निरीक्षण और संपादन करें

— Catalin
स्रोत

0

मुझे इससे समस्या थी इसलिए मैंने दस्तावेज़ पर जाकर उस टूलटिप का निरीक्षण किया जो पहले से ही पृष्ठ पर प्रस्तुत है। इससे मुझे टूलटिप की डोम संरचना को देखने और तदनुसार संपादित करने में मदद मिली।

— फिलिप
स्रोत

0

लिनक्स पर चोम में यह जेएस द्वारा उत्पन्न टूलटिप्स के लिए प्राप्त किया जा सकता है जैसे विकीपीडिया पर निम्नलिखित के लिए संदर्भ के लिए उन जैसे:

जैसा कि ऊपर कहा गया है, एफ 12 का उपयोग करके देव उपकरण खोलें। उन्हें दूसरी विंडो में खोलें। टूलटिप को हाइलाइट करें और Ctrl-Shift-C (HTML इंस्पेक्टर) पर क्लिक करें। जैसे ही आप टिप पर जाते हैं, देव विंडो उपयुक्त अनुभाग दिखाएगा।

यदि आपको माउस को छोड़ते समय टिप को खुला रखने की आवश्यकता होती है, तो इसे अन्य विंडो में अधिक अच्छी तरह से निरीक्षण करने में सक्षम होने के लिए, फिर टूलटिप पर राइट क्लिक करें और संदर्भ मेनू को ऊपर छोड़ दें, और देव टूल विंडो पर क्लिक करें। इस परिदृश्य में यह wikipedia विंडो में टिप को छोड़ देता है।

एक हद तक यह बूटस्ट्रैप युक्तियों के साथ भी काम करता है।

— user1806949
स्रोत

0

किसी कारण से यहाँ दिए गए उत्तर मेरे लिए विंडोज पर काम नहीं कर रहे थे। मैं devt टूल्स को खोलकर टूलटिप का निरीक्षण करने में सक्षम था, फिर उस टूल पर मँडराता है जो टूलटिप को ऊपर लाता है, फिर उस तत्व पर राइट क्लिक (टूलटिप नहीं)। फिर, कर्सर को इंस्पेक्टर पैनल में ले जाएँ और नीचे की ओर स्क्रॉल करें। टूलटिप तत्व अभी भी होना चाहिए।

— नोलन लिंडके
स्रोत

0

देव टूल्स एक टूलटिप जैसे होवरेड तत्व का निरीक्षण करने का एक तरीका प्रदान करता है।

1 - F12 का उपयोग करके उपकरण खोलें।

2 - "तत्वों" टैब का चयन करें।

3 - उस मूल तत्व का चयन करें जिसमें टूलटिप शामिल है।

4 - "..." (मूल तत्व की रेखा पर) पर क्लिक करें और "ब्रेक ऑन" / "सबट्री संशोधनों" का चयन करने के बाद (नीचे दी गई छवि देखें)

5 - अंत में एप्लिकेशन पर वापस जाएं और टूलटिप शो अप करें। टूलटिप दिखाई देने के बाद इसे निष्पादन को रोकना चाहिए

आशा है कि यह किसी के लिए उपयोगी हो सकता है!

— रिकार्डो मैगलहेस
स्रोत

0

एक और समाधान मैंने इस समस्या के लिए पाया। Chrome में मोबाइल या टैबलेट दृश्य के माध्यम से Chrome में क्रोम देव Crt + Shift + M मोबाइल दृश्य के लिए दबाएँ । ToolTip div पर क्लिक (टैप) करें और आप टूलटिप पर राइट क्लिक से इसका निरीक्षण कर सकते हैं

— HERAwais
स्रोत

0

command-option-jकंसोल खोलने के लिए मारो । कंसोल के ऊपरी दाएं कोने पर विंडो-लुकिंग बटन पर क्लिक करके कंसोल को एक अलग विंडो में खोलें।

फिर, क्रोम विंडो में, पॉपओवर को ट्रिगर करने वाले तत्व पर होवर करें, command-हालांकि कई बार आपको कंसोल पर ध्यान केंद्रित करने की आवश्यकता होती है, फिर टाइप करें debugger। वह पृष्ठ को फ्रीज कर देगा; तब आप एलिमेंट्स टैब में तत्व का निरीक्षण कर सकते हैं।

— Okau123
स्रोत

0

यहाँ है कि मैंने इसे मैक पर कैसे किया:

उस तत्व पर होवर करें, जिसमें क्रोम डैटूल के साथ टूलटिप खोला गया है।
टूलटिप के प्रदर्शित होने की प्रतीक्षा करें।
एक कीबोर्ड शॉर्टकट के साथ ओपन devtools कमांड पैलेट। Cmd+Shift+Pमेरे लिए काम किया।
टाइप करें Disable JavaScriptऔर दबाएँEnter

यह जावास्क्रिप्ट का उपयोग करने वाले सभी टूलटिप्स को लुप्त होने से रोकेगा।

— savchenkoto
स्रोत

-1

ध्यान देने योग्य बात यह है कि: देव उपकरणों के भीतर से हॉवर स्थिति का केवल तभी प्रभाव पड़ता है जब संकेत पाठ को CSS: होवर नियमों के माध्यम से पहले स्थान पर सक्षम किया जाता है। टॉगल केवल हॉवर स्थिति को उद्देश्यों को प्रस्तुत करने के लिए तत्व पर लागू करता है, लेकिन एक संगत जावास्क्रिप्ट माउसओवर इवेंट को ट्रिगर नहीं करता है।

AngularJS जैसी कई चौखटें डायनामिक रूप से टूलटिप HTML को डॉक्यूमेंट बॉडी के नीचे जावास्क्रिप्ट के माध्यम से संलग्न करती हैं, जब एक टारगेट एलिमेंट को हॉवर किया जाता है, इसलिए टारगेट एलिमेंट को हॉवर करने और निरीक्षण करने में कोई भी मदद नहीं करेगा।

@ joeyyang के जवाब ने इस परिदृश्य में मेरे लिए बहुत अच्छा काम किया।

— जॉन रिक्स
स्रोत

-2

मैंने पाया सबसे आसान तरीकों में से एक है:

क्रोम देव टूल खोलें
तत्व पर होवर करें
दाएँ क्लिक करें
Dev टूल्स पर क्लिक करें
अब आप शैलियों का निरीक्षण और परिवर्तन कर सकते हैं

— कास्पर्स सिरीसेनको
स्रोत

यह सहायक नहीं है @Kaspars

— Es Noguera

@EsNoguera अधिक विशिष्ट क्यों हो सकता है। यह मेरे लिए काम करने का तरीका है। चूंकि मुझे ऐसा तरीका मिला जो काम करता है इसलिए सुझाव दिया जाना बुरा है?

— कास्पर्स सिरिंको