जब ठीक से कॉन्फ़िगर किया जाता है, तो फ़ायरफ़ॉक्स अंतिम वेब विकास टूल बन सकता है, जिससे आप जिस पेज पर काम कर रहे हैं उस तक सीधे पहुंच प्रदान कर सकते हैं ताकि आप रीयल-टाइम में अपना पेज स्टाइल कर सकें, जावास्क्रिप्ट डीबग कर सकते हैं या एचटीएमएल भी संपादित कर सकते हैं।
वेब विकास के लिए अलग प्रोफ़ाइल बनाएँ
इन सभी विकास उपकरणों को स्थापित करने से फ़ायरफ़ॉक्स को एक बहुत ही भारी ब्राउज़र में लाया जाएगा, इसलिए हमें पहले फ़ायरफ़ॉक्स के लिए एक नई प्रोफ़ाइल बनाना चाहिए।
आप इन तर्कों के साथ एक नया शॉर्टकट बनाकर अपनी नियमित प्रोफ़ाइल के रूप में एक ही समय में एक अलग प्रोफ़ाइल लॉन्च कर सकते हैं, वेबडेव को अपनी प्रोफ़ाइल के नाम से बदल सकते हैं। ऐसा करने के तरीके के बारे में एक और विस्तृत स्पष्टीकरण भी है।
firefox.exe -P WebDev -no-remote
अब जब आप वेब विकास के लिए फ़ायरफ़ॉक्स को एक अलग प्रोफाइल के साथ कॉन्फ़िगर कर चुके हैं, तो चलिए फ़ायरफ़ॉक्स को अंतिम वेब विकास टूल में बनाने के लिए उपयोग किए जा सकने वाले एक्सटेंशन को देखें।
वेब देव एक्सटेंशन होना चाहिए
ये सभी एक्सटेंशन हैं जिन्हें मैं वेब विकास के लिए नियमित आधार पर उपयोग करता हूं।
Firebug
फायरबग जावास्क्रिप्ट डीबग करने, सीएसएस और एचटीएमएल देखने के लिए सबसे शक्तिशाली विस्तार है। आप कोड और सीएसएस में गतिशील परिवर्तन कर सकते हैं, और अपने अजाक्स कोड को डीबग करने के लिए इसका इस्तेमाल कर सकते हैं। यह वास्तव में वहां का सबसे अच्छा विस्तार है।
वेब डेवलपर एक्सटेंशन
एक्स साल चलने के लिए सबसे अच्छे एक्सटेंशन में से एक। यह किसी भी डेवलपर के लिए होना चाहिए, लेकिन आप इसके बारे में पहले से ही सुना है।
आर्डवर्क्स एक्सटेंशन
यह एक्सटेंशन एक बहुत ही हल्का विस्तार है जो आपको आसानी से पृष्ठ और उनके असाइन किए गए वर्ग / आईडी पर तत्व दिखाएगा। उस समय के लिए वेब डेवलपर एक्सटेंशन की तुलना में उपयोग करना आसान है जब आपको किसी तत्व के लिए त्वरित जानकारी की आवश्यकता होती है। आप पृष्ठ से तत्वों को हटाने के लिए इसका भी उपयोग कर सकते हैं।
ColorZilla
आसानी से रंग का चयन करें। स्टाइलशीट में कहीं भी एम्बेडेड रंग ढूंढने का कोई और दर्द नहीं।
स्रोत के साथ देखें
विभिन्न अनुप्रयोगों में स्रोत खोलने के लिए आप एकाधिक व्यू स्रोत प्रोफाइल सेट अप कर सकते हैं।
एचटीएमएल सत्यापनकर्ता
यह एक्सटेंशन आपको अपने पृष्ठ HTML को आसानी से सत्यापित करने और दृश्य स्रोत पैनल में इंस्टॉल करने देता है।
तेल बंदर
यह बिल्कुल एक वेब डेवलपर एक्सटेंशन नहीं है, लेकिन Greasemonkey बहुत ही कम है, कम से कम आमतौर पर किए गए कार्यों को स्वचालित करने की क्षमता के लिए, जो वेब डेवलपर्स के लिए एक अच्छा समय बचाने वाला है।
इसे मापो
आसानी से इस एक्सटेंशन के साथ स्क्रीन पर एक दूरी को मापें। एक बार जब आप किसी क्षेत्र को माप लेते हैं, तो आप तुलना के रूप में उपयोग करने के लिए स्क्रीन के चारों ओर आयताकार खींच सकते हैं।
आईई देखें / आईई टैब / OperaView / FirefoxView / सफारी व्यू / आईई देखें लाइट
ये एक्सटेंशन (अपना चयन करें) आपको विभिन्न ब्राउज़रों में वर्तमान पृष्ठ को आसानी से देखने देते हैं। यदि आप इतने इच्छुक थे, तो आईई टैब आपको आईई को एक टैब के अंदर भी चलाने देगा।
साफ़ कैश बटन
कैश साफ़ करता है। नए सीएसएस परिवर्तनों की जांच के लिए विशेष रूप से उपयोगी।
फ़ायरफ़ॉक्स को पुनरारंभ करें
फ़ायरफ़ॉक्स एक्सटेंशन को पुनरारंभ करना फ़ायरफ़ॉक्स को बंद करने और सभी टैब और सत्रों के साथ पुनरारंभ करने के लिए बहुत उपयोगी है।
टैब मिक्स प्लस
टैब मिक्स प्लस एक्सटेंशन सामान्य रूप से एक बड़ा विस्तार है, लेकिन वेब डेवलपर्स के लिए कुछ अनिवार्य रूप से उपयोगी विशेषताएं हैं: डुप्लिकेट टैब और कॉपी टैब यूआरएल।
YSlow
वाईएसएलओ एक्सटेंशन याहू से एक नया विस्तार है जो आपके पृष्ठ का विश्लेषण करेगा और आपको बताएगा कि आप कहां गलतियां कर रहे हैं। यह आपको आपकी साइट के प्रदर्शन पर एक ग्रेड भी देगा। आपको निचले दाएं कोने में थोड़ा गेज दिखाई देगा … यह आपको अपने पृष्ठ के साथ-साथ लोड समय का कुल आकार बताता है। बहुत उपयोगी विस्तार, लेकिन इसे फायरबग एक्सटेंशन की आवश्यकता होती है।
डमी Lorem Ipsum
डमी लिप्सम जनरेटर एक्सटेंशन आपके लिए प्रसिद्ध लॉरम इप्सम टेक्स्ट के आधार पर डमी सामग्री उत्पन्न करेगा जो आपकी साइट में नकली सामग्री डालने के लिए बहुत उपयोगी है।
चित्रपट पकड़ना!
स्क्रेंग्राब एक्सटेंशन आपको पृष्ठों के स्क्रीनशॉट लेने देगा, लेकिन कुछ नियमित स्क्रीनशॉट उपकरण नहीं कर सकता है - यह पूरे पृष्ठ की एक छवि ले सकता है, केवल देखने योग्य भाग नहीं।
इस बिंदु पर, अब आपने फ़ायरफ़ॉक्स को अंतिम वेब विकास टूल में बदल दिया है। विशेष रूप से फ़ायरबग का उपयोग कैसे करें सीखने के लिए समय लें।