नए क्रोम में ड्रॉप डाउन मेनू का निरीक्षण


85

मैं Chrome संस्करण 41.0.2272.101 मीटर (नवीनतम) पर हूं, और यह अपडेट गड़बड़ है। उन्होंने इसे तब डाला, जब आपके पास निरीक्षक खुला होता है, कि कोई भी DOM परिवर्तन बैंगनी रंग के साथ बदले हुए तत्व (जैसे फ़ायरफ़ॉक्स) पर फ्लैश करेगा, लेकिन अब मैं किसी भी होवरेड ऑब्जेक्ट (FF की तरह भी) का निरीक्षण नहीं कर सकता, यही कारण है कि मुझे पसंद नहीं है फ्रंट एंड डेवलपमेंट करते समय इसका इस्तेमाल करना)।

मैं उदाहरण के लिए सुपरफ़िश जैसे js ट्रिगर की घटनाओं के बारे में बात कर रहा हूँ। इससे पहले, मैं मेनू को देख सकता था, और निरीक्षक के साथ मेनू को कवर कर सकता था, और मेनू खुला रहता था, और मैं निरीक्षक में जा सकता था कि क्या छद्म नाम बनाए गए हैं, पैडिंग बदल सकते हैं और ऐसे सीधे, और परिवर्तन देखें। अब, जब मैं मेनू को हॉवर करता हूं, और इसे निरीक्षण करने के लिए राइट क्लिक करता है, तो मेनू बंद हो जाता है, और मैं इसका निरीक्षण नहीं कर सकता!

मैंने निरीक्षक को घसीटने की कोशिश की, लेकिन कुछ भी मदद नहीं मिली। यह नया 'फीचर' नरक के रूप में कष्टप्रद है। क्या तत्वों पर ब्रेक पॉइंट लगाने के बिना js ट्रिगर घटनाओं का निरीक्षण करने का एक तरीका है (जो काम करता है, लेकिन गधे में दर्द है)?

जवाबों:


129

अपने माउस के साथ तत्व पर होवर करें और स्क्रिप्ट निष्पादन को रोकने के लिए F8 दबाएं (यह केवल क्रोम में काम करेगा)। होवर अवस्था आपके लिए दृश्यमान रहेगी। यदि आप एक मैक पर हैं, तो आपको सिस्टम प्राथमिकताएं खोलनी पड़ सकती हैं और "सभी F1, F2, आदि का उपयोग करें" चेक बॉक्स (या बस fn + F8 का उपयोग करें) की जाँच करें।

कभी-कभी यह केवल तभी काम करता है जब आप निरीक्षक के स्रोत टैब में हों।


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

6
मैक पर आप सिर्फ fn + F8 दबा सकते हैं, जबकि आपका निरीक्षक सूत्रों के टैब पर खुला है
दिमित्री श्वेदोव

17
धीरे से, दबाने के बाद F8, हॉवर पहले गायब हो जाता है और फिर निष्पादन को रोक देता है। यह अविश्वसनीय रूप से निराशाजनक है, पता नहीं ऐसा क्यों होता है।
andras

3
शायद यह स्पष्ट है, लेकिन मुझे इसके लिए 'स्रोतों' टैब पर काम करना था। OSX और क्रोम (74.0.3729.157)
डेनिस

यदि शॉर्टकट स्रोत टैब के साथ भी काम नहीं करता है, तो सीधे स्रोत टैब में "पॉज़" बटन पर क्लिक करें
jpenna

88

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

एक तरह से मैं तत्व का निरीक्षण करने में सक्षम था, धब्बा घटना को ट्रिगर होने से रोकने के लिए है धब्बा घटना श्रोता को हटाकर:

  • Chrome पर इनपुट तत्व का निरीक्षण करें
  • इवेंट श्रोता टैब पर जाएं और ब्लर ईवेंट को हटा दें यहाँ छवि विवरण दर्ज करें

एक बार धब्बा घटना को हटा दिए जाने के बाद, आप मेनू को खोल सकते हैं और इसे गायब किए बिना निरीक्षण कर सकते हैं


3
यह इनपुट तत्वों के लिए काम कर सकता है। मैंने सिर्फ एक चुनिंदा तत्व के लिए प्रयास किया, यह अभी भी गायब है
राल्फ

आप एक जीवनरक्षक हैं ad
आदित्य

52

Chrome में, डेवलपर कंसोल खोलने के लिए F12 दबाएं, फिर सेटिंग्स पर क्लिक करें (cogwheel आइकन) या F1 दबाएं:

देव उपकरण सेटिंग्स

फिर "एक केंद्रित पृष्ठ का अनुकरण करें" विकल्प ढूंढें और जांचें।

जाँचें एक केंद्रित पृष्ठ विकल्प का अनुकरण करें


5
धन्यवाद, यह अब तक का सबसे सरल और सबसे आसान जवाब है
beeftosino

2
यह सही उत्तर है। खोजने के लिए उम्र ले ली, और इतनी यातना से बचाया, यह सोने के रूप में दुर्लभ है।
एशियाई

1
यह बिना किसी हैक के सबसे अच्छा जवाब है। शुद्ध सोना
अंधेरा

यह सबसे आसान विकल्प था लेकिन ऐसा लगता है कि इसे क्रोम संस्करण 86 से हटा दिया गया है :(
शिक्षार्थी

13

मैक पर, आप ड्रॉपडाउन खोलने के बाद स्क्रिप्ट को रोकने के लिए cmd+ दबा सकते हैं \। फिर आप तत्वों का निरीक्षण करने के लिए shift+ cmd+ cका उपयोग कर सकते हैं।


1
बहुत खुबस! नोट: आपको सबसे पहले देव टूल्स में सोर्स टैब पर जाना होगा। अन्यथा जब आप cmd- \ h दबाते हैं तो होवर बंद हो जाता है क्योंकि यह आपको वहां ले जाता है।
ग्रीनएजेड जेड

7

अब, जब मैं मेनू को हॉवर करता हूं, और इसे निरीक्षण करने के लिए राइट क्लिक करता है, तो मेनू बंद हो जाता है, और मैं इसका निरीक्षण नहीं कर सकता!

मुझे उसी मुद्दे का सामना करना पड़ा और मैंने जो उपयोग किया वह क्रोम देव उपकरणों पर पुनरावर्ती विकल्प का विस्तार था :

कदम हैं:

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

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

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


3

आप हर सेकंड जेएस कंसोल में दिए गए तत्व की सामग्री को लिखने वाले अंतराल को सेट कर सकते हैं। इसे कंसोल में छोड़ें और ड्रॉपडाउन खोलें।

setInterval(() => 
    console.log(document.querySelector('.Select-menu-outer').outerHTML),
1000)

प्रतिक्रिया-चयन के लिए बिल्कुल सही
रूटएनोड

2

फ़ायरफ़ॉक्स में

इंस्पेक्टर में, ड्रॉपडाउन वाले नोड पर राइट क्लिक करें, चुनें:

ब्रेक ऑन ...> सबट्री संशोधन

यह उस समय की गिरावट को अंजाम देगा ... अच्छी तरह से ... नीचे गिरा दिया गया।


0

मुझे लगता है कि आप क्रोम एडिटर का उपयोग क्रोम में एक राज्य, उदाहरण के लिए, 'होवर' की स्थिति को लागू करने के लिए कर सकते हैं।

डेवलपर टूल में, आप एक तत्व का चयन करते हैं। दाहिने हाथ पर आपके ऊपर एक तीर के साथ एक वर्ग है। उस पर क्लिक करें और आप एक राज्य चुन सकते हैं। उदाहरण के लिए, होवर करें और आप अपनी विंडो और सीएसएस अपडेट दोनों को देखेंगे जैसे कि तत्व अभी मँडरा रहा है।


2
हाँ, लेकिन यह केवल उस सीएसएस स्थिति को ट्रिगर करेगा जिसे आपने मैन्युअल रूप से रखा है element:hover, या element:activeया element:focus। मेरा परिवर्तन js आधारित है। एक प्लगइन एक वर्ग जोड़ देगा, और शैली बदलता है (उदाहरण के लिए सुपरफ़िश करता है)। तो राज्य टॉगल यहाँ मदद नहीं करेगा ...
dingo_d

0

उपर्युक्त उपायों में से कोई भी मेरे लिए काम नहीं करता है। जैसे ही हमारा ड्रॉप डाउन (प्रतिक्रिया आधारित) किसी एक क्लिक (दाएं या बाएं) पर बंद हो जाएगा, इसलिए हमने नीचे दिए गए वर्कअराउंड का पता लगाया:

  • Chrome ओपन डेवलपर टूल में
  • पहले ढह गई स्थिति में ड्रॉप-डाउन पर क्लिक करें और विकल्पों के साथ इसका विस्तार करें
  • फिर तत्व अनुभाग के तहत, डिव नोड पर राइट-क्लिक करें (सुनिश्चित करें कि राइट-क्लिक करने से पहले लेफ्ट क्लिक न करें), जिसमें ड्रॉप-डाउन आइटम का विवरण है
  • फिर विकल्प का चयन करें ' विस्तारपूर्वक '
  • फिर आवश्यक विवरण दिखाए गए यहाँ छवि विवरण दर्ज करें

0

एलिमेंट्स विंडो में HTML बदलना

  • उस मेनू पर होवर करें जिसे आप निरीक्षण मोड में खुला रखना चाहते हैं ।
  • मेनू के खुले / बंद राज्यों के बीच तत्व विंडो में तत्व पर HTML परिवर्तनों का निरीक्षण करें । ज्यादातर समय यह एक शैली परिवर्तन है।
  • जब आपको पता चलता है कि मेनू क्या खोलता है और बंद हो जाता है (इस उदाहरण में "ड्रॉपडाउन ओपेन" नामक एक क्लास को जोड़ा गया और मेनू स्टेट्स के बीच हटा दिया गया), तो एलिमेंट टैब में HTML पर डबल क्लिक करें और आवश्यक बदलाव करें। इस उदाहरण में हम "dropdownOpen" वर्ग को तत्व में जोड़ते हैं ।<li>

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

कंसोल विंडो में jQuery का उपयोग करना

यदि आपको इस व्यवहार को दोहराने की आवश्यकता है तो आप jQuery का उपयोग कर सकते हैं। आप jQuery का उपयोग करने वाले तत्व का चयन करते हैं और कंसोल में आवश्यक परिवर्तन करते हैं । इस उदाहरण में, हम तत्व को उसकी आईडी से चुनते हैं और "dropdownOpen" वर्ग को इस तरह से जोड़ते हैं:

jQuery("#menu-item-11012").addClass("dropdownOpen");

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

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