2012-09-17 8 views
9

Firebug महान है, और मुझे सभी सीएसएस डोम आपके द्वारा चुने गए में एक तत्व के लिए लागू देखने की अनुमति देता है, लेकिन या तो आप कर सकते हैं:क्या कोई सीओएम तत्व लागू करने के लिए कोई सीएसएस प्राप्त करने के लिए ब्राउज़र एक्सटेंशन है?

क) यह लाइन लाइन द्वारा देखें, सीएसएस में परिभाषित के रूप में में, लागू ऑर्डर (बहुत उपयोगी लेकिन जो मैं खोज रहा हूं) या

बी) इसे "गणना" देखें, जो सभी सीएसएस नियम और इस तत्व के मान हैं।

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

  1. मैं एक तत्व मैं बिल्कुल अपनी स्वयं की वेबसाइट (एक बटन की तरह) एक वेबसाइट पर दोहराना चाहते हैं या देखें:

    मूल रूप से मैं करने में सक्षम होना चाहता हूँ।

  2. उस तत्व पर लागू सीएसएस का एक समूह प्राप्त करने के लिए इस टूल का उपयोग करें।
  3. अपने स्वयं के सीएसएस पर पेस्ट करें।
  4. मेरी वेबसाइट में वही दिखने वाला तत्व प्राप्त करें। वाह!

कोई विचार?

उत्तर

5

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

+0

केवल फ़ायरफ़ॉक्स में "आपको बस इतना ही चाहिए", मेरा जवाब देखें ... –

+1

ऐसा लगता है कि मैं लगभग चाहता हूं। एकमात्र समस्या यह है कि वे आपको _all_ सीएसएस नियमों और उनके मूल्यों को दिखाते हैं, इसके बजाय पृष्ठ में सभी सीएसएस परिभाषाओं से तत्व ने क्या लागू किया है। मेरा मतलब है, इसमें क्लिप हो सकता है: ऑटो, क्लिप-पथ: कोई नहीं; इत्यादि। अगर इस तत्व के लिए इसके डिफ़ॉल्ट मान से ओवरराइड नहीं किया गया है, तो मूल रूप से इस उपकरण के तत्व के लिए गणना की गई सीएसएस में अनावश्यक सीएसएस कोड है। – manuelflara

1

Google क्रोम में "क्रोम डेवलपर टूल्स" नामक फ़ायरबग जैसे टूल हैं। यह मेरे अनुभव से बेहद शक्तिशाली है और मैंने एक साल पहले फ़ायरफ़ॉक्स/फ़ायरबग से क्रोम में स्विच किया था। डेवलपर टूल्स को पाने के कई तरीके हैं। आप https://developers.google.com/chrome-developer-tools/docs/overview

पर विस्तृत दस्तावेज़ प्राप्त कर सकते हैं जब आपके पास चयनित तत्व के साथ तत्व टैब के लिए क्रोम डेवलपर टूल खुलते हैं, तो आप दाईं ओर गणना की गई शैलियों क्षेत्र का विस्तार कर सकते हैं और उस तत्व को बनाने वाली सभी शैलियों को देख सकते हैं।

enter image description here

विशिष्ट शैली, उसके बाईं ओर एक विस्तार योग्य त्रिकोण है, तो आप क्या स्टाइलशीट और जहां स्टाइल से आता है पता कर सकते हैं।

enter image description here

1

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

4

मुझे पता है कि सवाल लगभग 4 साल पुराना है, लेकिन अगर कोई आज इसे ढूंढ रहा है, तो क्रोम एक्सटेंशन है जो इसे संभालता है। https://github.com/kdzwinel/SnappySnippet

यह क्रोम इंस्पेक्टर में एक नया टैब जोड़ता है और आपको चयनित तत्व और उसके बच्चों के सभी एचटीएमएल और सीएसएस प्राप्त करने के लिए बस एक बटन क्लिक करने की आवश्यकता है। फिर आप इसे कोडेपेन, जेएसफ़िल्ड और जेएसबीएन में निर्यात कर सकते हैं, या कॉपी और पेस्ट कर सकते हैं।

0

मैंने SnappySnippet को आजमाया है और CSSSteal को बेहतर बनाने के लिए पाया है।यह सिर्फ सीएसएस को पकड़ लेगा, और उसी प्रारूप में ऐसा करेगा जैसा कि दस्तावेज़ में है, SnappySnippet के विपरीत।

संबंधित मुद्दे

 संबंधित मुद्दे