css - देखें: क्रोम डेवलपर टूल्स में होवर स्टेटस




google-chrome hover (8)

अब आप psuedo-class नियम दोनों देख सकते हैं और उन्हें तत्वों पर मजबूर कर सकते हैं।

नियमों को देखने के लिए :hover स्टाइल फलक में :hover छोटे दाएं कोने में छोटे :hov टेक्स्ट पर क्लिक करें।

तत्व को मजबूर करने के लिए :hover स्थिति, राइट क्लिक करें।

क्रोम डेवलपर टूल्स शॉर्टकट्स में तत्व पैनल पर अतिरिक्त टिप्स।

https://code.i-harness.com

मैं देखना चाहता हूं :hover एक एंकर के लिए :hover शैली मैं क्रोम में होवर कर रहा हूं। फायरबग में, एक स्टाइल ड्रॉपडाउन है जो मुझे तत्व के लिए अलग-अलग राज्यों का चयन करने की अनुमति देता है। मुझे क्रोम में कुछ भी ऐसा नहीं लगता है। क्या मैं कुछ भूल रहा हूँ?


क्रोम डेवलपर टूल्स में होवर स्टेट शैलियों को देखने के कई तरीके हैं।

विधि 01

विधि 02

फ़ायरफ़ॉक्स डिफ़ॉल्ट डेवलपर टोल के साथ

फायरबग के साथ


मुझे नहीं लगता कि ऐसा करने का एक तरीका है। मैंने एक फीचर अनुरोध जमा किया। यदि कोई तरीका है, तो Google पर डेवलपर्स इसे इंगित करेंगे और मैं अपना जवाब संपादित कर दूंगा। यदि नहीं, तो हमें इंतजार करना होगा और देखना होगा। (आप इस मुद्दे को वोट देने के लिए स्टार कर सकते हैं)

क्रोम प्रोजेक्ट सदस्य द्वारा टिप्पणी 1 : 10.0.620.0 में, स्टाइल पैनल दिखाता है: चयनित तत्व के लिए होवर शैलियों लेकिन सक्रिय नहीं: सक्रिय।

(इस पोस्ट के रूप में) वर्तमान स्थिर चैनल संस्करण 8.0.552.224 है।

आप बीटा चैनल या देव चैनल ( प्रारंभिक एक्सेस रिलीज चैनल देखें) के साथ Google क्रोम की अपनी स्थिर चैनल स्थापना को प्रतिस्थापित कर सकते हैं।

आप क्रोम की द्वितीयक स्थापना भी स्थापित कर सकते हैं जो देव चैनल की तुलना में अधिक अद्यतित है

... कैनरी बिल्ड को देव चैनल से भी अधिक बार अद्यतन किया जाता है और इसे रिलीज़ होने से पहले परीक्षण नहीं किया जाता है। क्योंकि कैनरी बिल्ड कभी-कभी अनुपयोगी हो सकता है, इसे आपके डिफ़ॉल्ट ब्राउज़र के रूप में सेट नहीं किया जा सकता है और Google Chrome के उपर्युक्त चैनलों के अतिरिक्त स्थापित किया जा सकता है। ...


मुझे पता है कि मैं जो करता हूं वह काफी कामकाज है, हालांकि यह पूरी तरह से काम करता है और यही वह तरीका है जो मैं हर बार करता हूं।

फिर, इस तरह आगे बढ़ें:

  • सबसे पहले सुनिश्चित करें कि क्रोम डेवलपर टूल्स अनदेखा है।
  • फिर, देव उपकरण विंडो के किसी भी तरफ उस तत्व के बीच में जाएं जहां आप निरीक्षण करना चाहते हैं।

  • अंत में, तत्व को होवर करें, राइट क्लिक करें और तत्व का निरीक्षण करें, अपने माउस को देव टूल्स विंडो में ले जाएं और आप अपने तत्व के साथ खेल सकेंगे: होवर सीएसएस।

चीयर्स!


मेरे मामले में, मैं बूटस्ट्रैप टूलटिप को डबग करना चाहता हूं। लेकिन ऊपर दिए गए तरीके मेरे लिए काम नहीं करते हैं। मुझे लगता है कि बूटस्ट्रैप ने इसे माउस इन / आउट इवेंट जैसे कुछ द्वारा कार्यान्वित किया है।

वैसे भी, जब मैं एक बटन पर होवर करता हूं, तो यह बटन के नीचे एक भाई HTML तत्व उत्पन्न करेगा, इसलिए मैं "डेवलपर टूल" विंडो के "तत्व" टैब में बटन के मूल तत्व का चयन करता हूं, बटन को होवर करता हूं, और "Ctrl + C" तो मैं स्रोत कोड पेस्ट कर सकता हूं जिसमें जेनरेट कोड शामिल है। अंत में जेनरेट कोड ढूंढें, और इसे "एलिमेंट्स" टैब में "HTML के रूप में संपादित करें" द्वारा स्रोत कोड में जोड़ें।

उम्मीद है कि यह किसी की मदद कर सकता है।


मैं अपने बूटस्ट्रैप टूलटिप्स पर होवर स्टेटस देखना चाहता था। को मजबूर करना: क्रोम देव उपकरण में होवर राज्य ने आवश्यक आउटपुट नहीं बनाया है, फिर भी कंसोल के माध्यम से माउसएन्टर ईवेंट ट्रिगर करने से क्रोम में चाल चल रही है। यदि पृष्ठ पर jQuery मौजूद है तो आप चला सकते हैं:

$('.YOUR-TOOL-TIP-CLASS').trigger('mouseenter');


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

स्टाइल बदलने के लिए उपरोक्त चरणों का पालन करें और फिर - कीबोर्ड पर ctrl + TAB दबाकर अपना ब्राउज़र टैब बदलें। फिर उस टैब पर वापस क्लिक करें जिसे आप डीबग करना चाहते हैं। आपकी होवर स्क्रीन अभी भी वहां होगी। अब ध्यान से डेवलपर टूल क्षेत्र में अपना माउस लें।


यदि यह मदद करता है, तो यह नवीनतम क्रोम (47.0.2526.106) में आसान लगता है:

तत्व का निरीक्षण करें और फिर बाएं गटर में तीन सफेद बिंदुओं पर क्लिक करें:

फिर इस ड्रॉपडाउन से वांछित तत्व स्थिति चुनें:





google-chrome-devtools