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