हाल के महीनों में वेब डेवलपर्स की बढ़ती संख्या ने फ़ायरफ़ॉक्स पर स्विच किया है, जो फ़ायरफ़ॉक्स क्वांटम की रिलीज़ से प्रेरित है, क्योंकि इसने Google क्रोम के साथ प्रदर्शन में सुधार किया है।
हालांकि फ़ायरफ़ॉक्स अपने सीएसएस ग्रिड इंस्पेक्टर जैसी नवीन सुविधाओं के साथ डिफ़ॉल्ट रूप से डेवलपर्स के लिए अच्छा टूलिंग प्रदान करता है, फिर भी इसके ऐड-ऑन पारिस्थितिकी तंत्र के माध्यम से ब्राउज़र में और अधिक रोमांचक सुविधाओं को जोड़ना संभव है।
इसे ध्यान में रखते हुए, यहां कुछ एक्सटेंशन दिए गए हैं जिन्हें आपको वेब विकास के लिए फ़ायरफ़ॉक्स का उपयोग करने पर आज़माना चाहिए।
<एच2>1. कंपैट रिपोर्ट
कम्पेट रिपोर्ट वेबसाइटों या वेब अनुप्रयोगों को विकसित करते समय संभावित ब्राउज़र संगतता मुद्दों की पहचान करने में आपकी सहायता करती है। यह इस समय केवल CSS के लिए काम करता है।
एक बार जब आप एक्सटेंशन इंस्टॉल कर लेते हैं, तो डेवलपर टूल में एक नया "संगतता" पैनल जोड़ा जाएगा। वहां से आप यह देख पाएंगे कि किसी भी साइट से प्रत्येक प्रमुख ब्राउज़र पर कैसा प्रदर्शन करने की अपेक्षा की जाती है
बिना संगतता समस्याओं वाले ब्राउज़र संस्करण हरे रंग के होते हैं, कुछ पीले रंग के होते हैं, और कई लाल रंग के होते हैं। समस्याओं का कारण बनने वाले सटीक CSS नियमों को देखने के लिए आप विशिष्ट ब्राउज़र संस्करणों में खुदाई कर सकते हैं।
2. JSON लाइट
यदि आप अक्सर JSON API के साथ काम करते हैं, तो आपको ब्राउज़र में JSON डेटा देखने में परेशानी हो सकती है। ऐसा इसलिए है क्योंकि ब्राउज़र डिफ़ॉल्ट रूप से इसे ठीक से प्रारूपित नहीं करता है जिससे इसे पढ़ना मुश्किल हो जाता है।
JSON लाइट JSON और JSONP प्रतिक्रियाओं को उचित सिंटैक्स हाइलाइटिंग और एक नोड ढहने की सुविधा के साथ स्वरूपित करके उस समस्या को हल करता है जो विशाल JSON डेटा का निरीक्षण करते समय आसान होता है।
यदि आपको JSON लाइट द्वारा प्रदान की जाने वाली सभी सुविधाओं की आवश्यकता नहीं है, तो आप फ़ायरफ़ॉक्स में बिल्ट-इन JSON व्यूअर को एड्रेस बार में "about:config" टाइप करके, फिर devtools.jsonview.enabled सर्च करके सक्षम कर सकते हैं। कोड> . विकल्प पर डबल-क्लिक करके, फिर परिणाम देखने के लिए किसी भी JSON फ़ाइल को अपने ब्राउज़र में लोड करके इसे "सही" पर सेट करें।
3. प्रतिक्रिया Devtools
रिएक्ट आज वेब डेवलपमेंट इकोसिस्टम में सबसे लोकप्रिय पुस्तकालयों में से एक है। यदि आप रिएक्ट के साथ वेब एप्लिकेशन विकसित करते हैं, तो आप अपने कोड को डीबग करने के लिए इसके ब्राउज़र एक्सटेंशन का उपयोग करने में बहुत महत्व देखेंगे।
एक बार यह स्थापित हो जाने के बाद, आप इसका उपयोग करने वाली किसी भी वेबसाइट पर रिएक्ट कोड की जांच करने में सक्षम होंगे। ऐड-ऑन आइकन ब्राउज़र टूलबार में दिखाई देगा, और आपको अन्य DevTools पैनल के साथ एक रिएक्ट टैब भी मिलेगा। रिएक्ट पैनल एक रिएक्ट ट्री का निरीक्षण करने की अनुमति देगा, जिसमें घटक पदानुक्रम, प्रॉप्स, स्थिति और बहुत कुछ शामिल है।
यदि आप किसी भी पुस्तकालय के साथ विकसित करते हैं तो आप Vue.js devtools और Redux DevTools भी स्थापित कर सकते हैं।
4. फोंटानेलो
Fontanello किसी भी वेबसाइट पर फोंट की पहचान करने का एक बहुत तेज़ तरीका प्रदान करता है। इस ऐड-ऑन के साथ, अब आपको केवल यह पता लगाने के लिए devtools खोलने की आवश्यकता नहीं है कि कोई वेबसाइट किस फ़ॉन्ट का उपयोग करती है। Fontanello फ़ायरफ़ॉक्स में राइट-क्लिक संदर्भ मेनू में टेक्स्ट की मूल टाइपोग्राफ़िक शैलियों को प्रदर्शित करता है।
5. वैपलाइज़र
क्या आपने कभी सोचा है कि आपकी पसंदीदा वेबसाइट बनाने के लिए किन तकनीकों का उपयोग किया जाता है? Wappalyzer आपको एक क्लिक में यह जानकारी प्रदान कर सकता है। यह विभिन्न सामग्री प्रबंधन प्रणालियों, ईकामर्स प्लेटफॉर्म, वेब सर्वर, जावास्क्रिप्ट फ्रेमवर्क, डेटाबेस सॉफ्टवेयर, एनालिटिक्स टूल और कई अन्य का पता लगा सकता है।
रैपिंग अप
यदि आप अपने विकास वर्कफ़्लो को सुपरचार्ज करना चाहते हैं, तो आप ऊपर बताए गए किसी भी एक्सटेंशन के साथ गलत नहीं हो सकते। नीचे टिप्पणी अनुभाग में अपने पसंदीदा साझा करना न भूलें।
यह लेख पहली बार अक्टूबर 2010 में प्रकाशित हुआ था और मार्च 2018 में अपडेट किया गया था।