फ़ायरफ़ॉक्स डेवलपर संस्करण 6 सबसे अच्छे उपकरण आज़माने के लिए

फ़ायरफ़ॉक्स डेवलपर संस्करण आज एकमात्र ब्राउज़र है जो विशेष रूप से डेवलपर्स के लिए बनाया गया है। मानक संस्करण में डेवलपर उपकरण पहले डेवलपर संस्करण में दिखाई देते हैं और डेवलपर संस्करण में ऐसे उपकरण हैं जो मानक संस्करण में उपलब्ध नहीं हैं और उपलब्ध नहीं कराए जाएंगे। आज हम कुछ ऐसे उपकरणों पर नज़र डालने जा रहे हैं जो इस समय हैं केवल डेवलपर संस्करण में पाया जा सकता है.

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

1. एनिमेशन इंस्पेक्टर टूल

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

उपकरण तक पहुँचने के लिए, खोलें इंस्पेक्टर एनिमेटिंग एलिमेंट पर राइट क्लिक करके और "इंस्पेक्ट एलिमेंट" को सेलेक्ट करें, फिर देव टूल विंडो के दाईं ओर "ट्यूटोरियल" पर क्लिक करें।.

2. एनिमेशन टाइमिंग फंक्शन एडिटर

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

यदि आप पहले से ही क्यूबिक बेजियर एनीमेशन फ़ंक्शन से परिचित नहीं हैं, तो मैं इस पोस्ट को इसके बारे में और जानने के लिए सलाह देता हूं.

सीएसएस गुणों के लिए 3. रंग बीनने

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

में हर सीएसएस रंग मूल्य के बगल में नियम का खंड इंस्पेक्टर उपकरण, एक आइकन है जो क्लिक करने पर एक रंग पहिया पॉप अप खोलेगा। आप पहिये से कौन सा रंग चुन सकते हैं.

यदि आपके पास पहले से ही एक रंग है जो आप चाहते हैं, और एक जो पेज पर होना है, बस रंग बीनने वाले को खोलने के लिए पॉपअप के नीचे आईड्रॉपर टूल पर क्लिक करें, फिर पिकर को इच्छित रंग पर खींचें, और उस पर क्लिक करें । सीएसएस रंग मान को चयनित रंग में बदल दिया जाएगा.

4. मापने का उपकरण

यह टूल आपको चयनित भाग के पिक्सल में कर्सर की XY स्थिति, और ऊंचाई, चौड़ाई और विकर्ण माप को देखने देता है। टूल का उपयोग करने के लिए, आपको पहले इसे डेवलपर में सक्षम करना होगा टूलबॉक्स विकल्प, "उपलब्ध टूलबॉक्स बटन" के अंतर्गत "पृष्ठ के एक हिस्से को मापें" नाम के चेकबॉक्स को चेक करके.

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

5. सीएसएस फिल्टर संपादक

यदि आपने पृष्ठ पर एक तत्व के लिए सीएसएस फ़िल्टर लागू किया है, तो आपको उसके बगल में एक आइकन दिखाई देगा नियम का खंड इंस्पेक्टर टूल, जो क्लिक करने पर CSS फ़िल्टर एडिटर खोलता है.

फ़िल्टर हटाने के लिए, फ़िल्टर नाम के दाईं ओर × चिह्न पर क्लिक करें। फ़िल्टर जोड़ने के लिए, नीचे दिए गए फ़िल्टर बॉक्स पर क्लिक करें और जिस फ़िल्टर को जोड़ना चाहते हैं उसे चुनें + संकेत। आप प्रत्येक आइटम को खींचकर फ़िल्टर को किसी भी क्रम में पुनर्व्यवस्थित कर सकते हैं.

6. मेमोरी टूल

आप इस टूल की मदद से यह पता लगा सकते हैं कि आपके वेब पेज में मेमोरी क्या है। यह आपको स्मृति उपयोग कम करने और इसके परिणामस्वरूप आपकी पृष्ठ गति में सुधार करने के लिए कदम उठाने में मदद करता है.

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

उपकरण का उपयोग करने के लिए, "स्नैपशॉट ले लो" या कैमरा बटन पर क्लिक करें। आपको वस्तुओं की एक सूची दिखाई देगी, जैसे ऑब्जेक्ट और स्क्रिप्ट जो मेमोरी ले रहे हैं .