2010-04-16 14 views
9

की जांच के लिए फ़ायरफ़ॉक्स ऐड-ऑन मैं काफी बड़ी साइट पर काम कर रहा हूं और मुझे जेड-इंडेक्स प्रबंधित करने में परेशानी हो रही है। क्या कोई फ़ायरफ़ॉक्स ऐड-ऑन है जो एक पृष्ठ को देखेगा और मुझे जेड-इंडेक्स घोषित किए गए प्रत्येक तत्व की ऑर्डर की गई सूची देगी? इससे उन मामलों के लिए कई बार बचाया जाएगा जहां एक जेड-इंडेक्स गलत था या खोजने में मुश्किल थी।जेड-इंडेक्स

+0

मैं इस उपयोगी पाया: http://www.erichynds.com/jquery/visualizing-your-z-index-stacks-with-jquery/ – camcam

उत्तर

19

उसे यहां प्राप्त

https://addons.mozilla.org/en-US/firefox/addon/60

जब आप वेब डेवलपर एक्सटेंशन स्थापित किया है, अपने मेनू से चुन

Information > Display Topographic information 
+0

मैं कोई सूची कैसे की जांच करते हैं वेब डेवलपर का उपयोग कर जेड इंडेक्स के साथ तत्वों का? – hekevintran

+1

आमतौर पर एक वेब डेवलपर टूलबार होता है, जानकारी पर क्लिक करें, फिर एलिमेंट जानकारी प्रदर्शित करें, उस तत्व के चारों ओर एक छोटा लाल बॉक्स दिखाई देगा, जिस पर आप होवर कर रहे हैं, उस पर क्लिक करें और तत्व के सभी गुणों के साथ शीर्ष बाएं कोने में एक छोटा पीला बॉक्स दिखाई देगा किया जाता है। कीबोर्ड शॉर्टकट Ctrl + Shift + F। – Kyle

+6

इसी तरह, उसी जानकारी में डोरपडाउन, "स्टैक स्तर प्रदर्शित करें" पर क्लिक करें। – Kyle

2

मैं सुझाव है कि आप FireBug http://getfirebug.com/ का उपयोग आप आप जांच कर सकते हैं जेड इंडेक्स सहित पूरे डोम।

आप z के सूचकांक सभी तत्वों को खोजने में मदद करने के लिए थोड़ा जावास्क्रिप्ट का उपयोग करें: 1. लोड jQuery 2. डालने इस जावास्क्रिप्ट:

<script type="text/javascript"> 
//replacethis by the elemets that could have a z index ('div, span, etc..') 
$('replacethis').each(function(){ 
if ($(this).css('z-index')) { 
    var zindex = $(this).css('z-index') 
    if (window.console) { 
    console.log($(this), zindex) 
    }else{ 
    $(this).css('border', '1px solid red').prepend('<strong>' + zindex +'</strong>') 
    } 
}; 

}); 
</script> 

अगर आपके फ़ायरबग कंसोल लोड नहीं है यह एक दे देंगे जेड-इंडेक्स वाले सभी तत्वों के लिए लाल सीमा और बॉक्स में जेड-इंडेक्स मान को लंबित करें।

+0

मैं फ़ायरबग का उपयोग करता हूं, लेकिन इसमें कोई ऐसा दृश्य नहीं है जो केवल उन तत्वों को दिखाता है जो z- इंडेक्स सही है? – hekevintran

+0

सही हाँ है, लेकिन तत्व पर क्लिक करके आप देख सकते हैं कि कोई जेड-इंडेक्स है या नहीं। फायरबग का उपयोग करें और एक छोटी जावास्क्रिप्ट का उपयोग करें जो आपको जेड इंडेक्स के साथ सभी तत्वों को खोजने में मदद करता है: 1. लोड jquery 2।इस जावास्क्रिप्ट को सम्मिलित करें: <स्क्रिप्ट टाइप = "टेक्स्ट/जावास्क्रिप्ट"> // एजे इंडेक्स ('div, span, etc ..') $ ('replacethis') हो सकता है कि elemets द्वारा replacethis। प्रत्येक (समारोह () { अगर ($ (this) .css ('z- सूचकांक')) { console.log ($ (this)) } }) सुनिश्चित करें कि आपके फ़ायरबग कंसोल पर है – meo

0

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

https://addons.mozilla.org/en-US/firefox/addon/tilt/

फ़ायरफ़ॉक्स यहां तक ​​कि कुछ संस्करणों के लिए पूर्वावलोकन प्रपत्र किसी तरह का में एम्बेडेड एक ही विशेषता थी लेकिन बाद में इसे हटा दिया। उपर्युक्त ऐड-ऑन 2011 से अपडेट नहीं किया गया है, लेकिन अभी भी समय के लिए काम करता है। स्वास्थ्य चेतावनी: फ़ायरफ़ॉक्स में बहु-प्रक्रिया समर्थन लगातार फ़ायरफ़ॉक्स संस्करणों के साथ जीवन में आ रहा है, और यह ऐड-ऑन मल्टी-प्रोसेस (जिसे इलेक्ट्रोलिसिस या केवल 'ई 10 एस' के रूप में भी जाना जाता है) के साथ काम नहीं करता है। यहाँ अधिक जानकारी:

https://wiki.mozilla.org/Electrolysis