वेब डेवलपर - देखें छवि जानकारी कैसे ठीक करें

कुछ बिंदु पर, प्रिय वेब डेवलपर के सभी लोगों ने ग्राफिक्स → छवि सूचना अनुभाग में पृष्ठभूमि चित्र दिखाना बंद कर दिया है। यदि, उदाहरण के लिए, आप वेबसाइट webo.in की छवियों के बारे में जानकारी को देखते हैं, तो हमें एक आइकन के अलावा वहां कुछ भी दिखाई नहीं देगा। पायनियर्स के महल से मेनू आइकन, लोगो, बैनर और इवाश्का कहां गए? ऑफसाइट पर, इस बग का एक रिकॉर्ड है और मंच पर कई विषयों , 2006 में पहले से ही एक है।

चलो इसे ठीक करने की कोशिश करते हैं।

हम प्रोफ़ाइल फ़ोल्डर में जाते हैं, फिर एक्सटेंशन / {c45c406e-ab73-11d8-be73-000a95be3b12} । यह एक एक्सटेंशन फोल्डर है। लिपियों के रूप में हमारे लिए जो कार्यात्मक है वह क्रोम / वेबडेवलपर्स.जर में पैक किया गया है, इसे अनपैक करें ( क्रोम में फ़ोल्डर की सामग्री , स्थान और त्वचा दिखाई देनी चाहिए)। अब हमें यह सुनिश्चित करने की आवश्यकता है कि ब्राउज़र बिल्कुल अनपैक्ड सामग्री का उपयोग करता है, इसके लिए हम रूट फोल्डर में chrome.manifest को सही करेंगे, सभी संदर्भों को वहां जार में बदलकर : chrome / webdeveloper.jar! बस क्रोम पर । सटीकता के लिए, .jar फ़ाइल को हटाएं या नाम बदलें, ब्राउज़र को पुनरारंभ करें और एक्सटेंशन के संचालन की जांच करें। अब तक, सब कुछ काम कर रहा है।

अब आइए उस .jar संग्रह से निकाले गए सामग्री फ़ोल्डर पर ध्यान दें, और अधिक सटीक रूप से, इसमें संलग्न वेबदेवल फ़ोल्डर की सामग्री पर। आप webdeveloper.xul फ़ाइल में प्राप्त कर सकते हैं, जिसे हमने ओवरले लाइन में प्रकट में देखा था, इसमें वांछित मेनू आइटम ढूंढें और देखें कि इसमें ऑनकैमैंड क्या है। और आप देख सकते हैं, अन्य बातों के अलावा, images.js फ़ाइल (सबसे अधिक संभावना है, यह वह है जो ग्राफिक्स के साथ संचालन के लिए ज़िम्मेदार है) और इसमें जानकारी की तलाश करें। यह दोनों और एक अन्य तरीका हमें तेजी से webdeveloper_viewImageInformation () फ़ंक्शन तक ले जाता है जिसमें हम निम्नलिखित बातें देखते हैं:

imageList = webdeveloper_getImagesForDocument(pageDocument, true, true); 

हम फाइल फंक्शन / वेबदेवलियर / कॉमन / डोम.जेएस में इस फंक्शन को ढूंढते हैं और बैकग्राउंड को लाने के लिए जिम्मेदार कोड को देखते हैं:

 else if(includeBackgroundImages) { computedStyle = element.ownerDocument.defaultView.getComputedStyle(element, null); // If the computed style is set if(computedStyle) { backgroundImage = computedStyle.getPropertyCSSValue("background-image"); // If this element has a background image and it is a URI if(backgroundImage && backgroundImage.primitiveType == cssURI) { image = new Image(); image.src = backgroundImage.getStringValue(); // If this is not a chrome image if(image.src.indexOf("chrome://") != 0) { images.push(image); } } } } 

जाहिर है, पकड़ कहीं न कहीं इस जगह की है। मुझे नहीं पता है कि एक्सटेंशन को डिबग कैसे किया जाता है, इसलिए मैंने अभी कुछ अलर्ट जोड़े और पाया कि प्राइमेटाइप टाइप की जा रही प्रॉपर्टी हमेशा अपरिभाषित है । आइए दस्तावेज़ीकरण देखें : CSSValue ऑब्जेक्ट में cssValueType गुण है, और, चीजों के तर्क और विस्तार के लेखक के अनुसार, पृष्ठभूमि-छवि को CSS_PRIMITIVE_VALUE (1) के बराबर होना चाहिए। हालांकि, व्यवहार में, यह CSS_VALUE_LIST (2) के बराबर है, यही कारण है कि यह स्पष्ट नहीं है। लेकिन भगवान उसे आशीर्वाद देते हैं, चलो CSSVueueList इंटरफ़ेस को देखें, जो इस मामले में हमारी वस्तु को लागू करता है। इसमें एक आइटम () विधि है जो CSSValue ऑब्जेक्ट लौटाती है, और हम इसका उपयोग करेंगे:

 else if(includeBackgroundImages) { computedStyle = element.ownerDocument.defaultView.getComputedStyle(element, null); // If the computed style is set if(computedStyle) { backgroundImage = computedStyle.getPropertyCSSValue("background-image"); // If this element has a background image if(backgroundImage) { // If property is CSSValueList (WTF?) if (backgroundImage.cssValueType == backgroundImage.CSS_VALUE_LIST) { backgroundImage = backgroundImage.item(0); } // If background image is a URI if (backgroundImage.primitiveType == cssURI) { image = new Image(); image.src = backgroundImage.getStringValue(); } // If this is an image and not a chrome image if(image && image.src && image.src.indexOf("chrome://") != 0) { images.push(image); } } } } 

अब, जब CSSValueList का पता चला है , हम बैकग्राउंड ऑब्जेक्ट को उसके पहले तत्व से बदल देते हैं और पहले की तरह काम करते हैं। ब्राउज़र को पुनरारंभ करें और जांचें - वॉइला! डेटा सहित 14 छवियां : यूआरआई । अब आप एक्सटेंशन फ़ोल्डर की सामग्री को ज़िप संग्रह में पैक कर सकते हैं, इसे एक्सटेंशन .xpi दे सकते हैं और भविष्य की स्थापना के लिए उपयोग कर सकते हैं।

अपडेट: एफएफ 3.6-4.0b12, वेब डेवलपर 1.1.9, विंडोज 7।