मैं-ब्राउज़र में छद्म तत्वों के बाद और पहले: और निरीक्षण कैसे कर सकता हूं?

Question

मैंने छद्म तत्व के बाद a: के साथ कुछ काफी विस्तृत DOM तत्वों का निर्माण किया है, और मैं उन्हें क्रोम निरीक्षक या फायरबग या समकक्ष में निरीक्षण और ट्विक करने में सक्षम होना चाहता हूं।

इस वैबसाइट / सफारी ब्लॉग पोस्ट (दिनांक २०१०) में इस सुविधा का उल्लेख होने के बावजूद , मुझे यह सुविधा क्रोम या सफारी में बिल्कुल भी नहीं मिल सकती है। Chrome के पास निरीक्षण करने के लिए कम से कम चेकबॉक्स हैं: होवर,: विज़िट की गई और: सक्रिय अवस्थाएँ, लेकिन: इससे पहले और बाद: कहीं नहीं देखी जा सकती हैं।

इसके अतिरिक्त, इस ब्लॉग पोस्ट (दिनांक 2009!) में यह क्षमता IE देव उपकरणों में मौजूद है, लेकिन मैं वर्तमान में मैक ओएस का उपयोग कर रहा हूं, इसलिए यह मेरे लिए कोई मदद नहीं है। इसके अतिरिक्त, IE एक ब्राउज़र नहीं है जिसे मैं मुख्य रूप से लक्षित कर रहा हूं।

क्या इन छद्म तत्वों का निरीक्षण करने का कोई तरीका है?

संपादित करें: फायरबग इन तत्वों का निरीक्षण करने में असमर्थ होने के बारे में गलत होने के अलावा, मैंने ओपेरा को निरीक्षण से पहले और बॉक्स के बाहर तत्वों के बाद बहुत अच्छा पाया है।

Comments

फायरबग के साथ आप उन छद्म व्यवस्थाओं की शैली का निरीक्षण कर सकते हैं ।

— Fabrizio Calderan

@ F.Calderan कैसे? यदि मैं उन्हें संशोधित करता हूं तो क्या यह पृष्ठ को अद्यतन करता है?

— मेजाकेन

हां, मैं Fx11 / MacOS पर फ़ायरबग 1.9.1 के माध्यम से छद्म गुणों के लिए गुण बदलने में सक्षम हूं

— Fabrizio Calderan

आह हाँ, मैं इसे भी देखता हूँ। माफी, मैं फ़ायरफ़ॉक्स नए गलत कर रहा था, इनबिल्ट देव टूल्स (जो कि ईद से पहले इस्तेमाल नहीं किया गया था) कुछ कम सुविधाओं के साथ फायरबग रिडिजाइन के लिए। मैं दुरुस्त खड़ा हूं;)

— मेजाकेन

क्रोम और फ़ायरफ़ॉक्स स्टैकओवरफ़्लो में pseudoelements का परीक्षण करने के लिए इस उत्तर की जाँच करें stackoverflow.com/a/20716179/1868660

— सुबोध घुलाक्से

Answer 1

में Chrome की देव उपकरण , एक छद्म तत्व की शैली पैनल में दिखाई दे रहे हैं:

अन्यथा, आप जावास्क्रिप्ट कंसोल में निम्न लाइन भी इनपुट कर सकते हैं, और लौटी हुई CSSStyleDeclarationवस्तु का निरीक्षण कर सकते हैं :

getComputedStyle(document.querySelector('html > body'), ':before');

• window.getComputedStyle
• document.querySelector

Comments

मैं यह नहीं देखता। पैनल में इसे देखने के लिए आप किस तत्व का निरीक्षण कर रहे हैं? इसके अलावा, क्रोम के किस संस्करण का आप उपयोग कर रहे हैं?

— मेज़ैकसन

@ माजाकसन क्रोम 18.0 उबंटू 11.10। xइस डेमो में निरीक्षण करें : jsfiddle.net/2M6JA

— Rob W

मुझे आपके डेमो में pseudoclasses दिखाई देता है, लेकिन मेरे कोड में नहीं, जिससे मुझे संदेह है कि मुझे एक और समस्या है। किसी भी मामले में, यह स्पष्ट है कि आप सही हैं इसलिए मैं इसे हल कर दूंगा - बहुत धन्यवाद!

— माजाकसन

यह सीम करता है: कुछ मामलों में छद्म शैलियों का निरीक्षण नहीं किया जा सकता है। @Rob W fiddle: jsfiddle.net/RQsY6 => एक टैग पर छद्म तत्व का निरीक्षण नहीं किया जा सकता है।

— फाबिन क्वात्रावाक्स

@FabienQuatravaux क्रोम 23 में कम से कम, मैं - स्क्रीनशॉट: i.stack.imgur.com/nQ2TZ.png केdiv::before साथ देखता हूं । संपादित करें: हमारी पहेलियां बिल्कुल अलग नहीं हैं। क्या आप के साथ प्रतिस्थापित करना चाहते थे ? फिर भी, छद्म तत्व का अभी भी निरीक्षण किया जा सकता है: jsfiddle.net/RQsY6/1 (डोम ट्री में लंगर टैग का चयन करें)। content: 'x';diva

— रोब डब्ल्यू

Answer 2

निम्न चित्र में दिखाए अनुसार Chrome 31 छद्म तत्व अपने माता-पिता के बाल तत्वों के रूप में तत्व पैनल में दिखाते हैं:

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

ऐसा प्रतीत होता है कि विरासत में मिली सीएसएस शैलियाँ देखने योग्य नहीं हैं और आप तत्वों के पैनल से सीएसएस सामग्री को संपादित नहीं कर सकते।

Comments

ओह !! धन्यवाद :)

— R Claven

Answer 3

Chrome, DOM- ट्री में छद्म तत्वों के बाद और पहले नहीं दिखाएगा, यदि वे "सामग्री" विशेषता को याद करते हैं। इसे सेट किया जाना चाहिए, भले ही यह कुछ भी नहीं करने के लिए सेट हो।

यह नहीं दिखाया जाएगा:

:after {
  background-color: red;
}

यह इंस्पेक्टर में दिखाई देगा:

:after {
  content: "";   
  background-color: red;    
}

आशा करता हूँ की ये काम करेगा।

Answer 4

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

स्पष्ट रूप से, छद्म तत्वों के क्रोम / क्रोमियम की हैंडलिंग काफी बेहतर होती है, क्योंकि उन्हें चुना जा सकता है (दस्तावेज़ के पेड़ में और सीधे पृष्ठ पर दोनों) और नियमित रूप से तत्वों की तरह निरीक्षण किया, जिसमें लेआउट, गुण और सब कुछ, उनके मालिक से स्वतंत्र है। "।

वर्तमान में उपयोग किए जा रहे ब्राउज़र संस्करण: क्रोमियम 40.0.2214.91, फ़ायरफ़ॉक्स 31.3.0।

Answer 5

फ़ायरफ़ॉक्स में अभी थोड़ी देर के लिए यह सुविधा है, बस राइट क्लिक करें, "तत्व का निरीक्षण करें", और निरीक्षक के दाहिने पैनल में तत्वों के पहले और बाद में देखें।

Comments

मैं "मूल" निरीक्षक उपकरण में :afterऔर :beforeछद्म तत्वों को नहीं देखता - छद्म तत्वों को टॉगल करना मुझे देता है hover, activeऔर focusकेवल। मैं हालांकि उन्हें फायरबग में देख सकता हूं।

— वही

@sameers क्या आप राइट क्लिक मेनू पर टॉगल के बारे में बात कर रहे हैं? क्योंकि: इससे पहले और: के बाद आप वहाँ टॉगल कुछ नहीं कर रहे हैं, वे हमेशा सीएसएस निरीक्षक में दिखाना चाहिए।

— NoBugs

Answer 6

तत्वों का चयन करें -> चयनित होवर का चयन करें ---> आप तत्वों से पहले और बाद में देख सकते हैं

Answer 7

क्रोम 62 के बाद से कम से कम वहाँ 'दिखाएँ उपयोगकर्ता एजेंट छाया डोम' के लिए DevTools में एक सेटिंग है जो दिखाता है इनपुट प्लेसहोल्डर जैसे अतिरिक्त छद्म तत्वों , जो अन्यथा डोम वृक्ष में दिखाई नहीं होगा।

अधिक जानकारी: https://stackoverflow.com/a/26853319/3963594