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

वेब विकास के लिए फ़ायरफ़ॉक्स लंबे समय से पसंदीदा ब्राउज़र है। काम करने के लिए कई उपयोगी ऐड-ऑन हैं। इस पोस्ट में, हम कुछ ऐड-ऑन पर गौर करने जा रहे हैं जो मुझे लगता है कि अगर आप वेब डेवलपमेंट करने जा रहे हैं तो इसे इंस्टॉल करना जरूरी है। इसके अलावा, हम इन ऐड-ऑन में कुछ विशेषताओं को उजागर करने जा रहे हैं जो मदद कर सकते हैं.

सबसे पहले, हमें फायरबग को स्थापित करने की आवश्यकता है.

Firebug

फायरबग वेब विकास के लिए एक स्थापित-ऐड-ऑन है। यह मानते हुए कि आपको पता नहीं है कि फायरबग कहाँ मिलेगा, आप इसे यहाँ स्थापित कर सकते हैं। संभवतः, सक्रिय होने से पहले आपको अपने फ़ायरफ़ॉक्स को पुनः आरंभ करने की आवश्यकता है.

उसके बाद, आप निम्न तरीकों में से एक के माध्यम से फायरबग देख सकते हैं: इस मेनू का पालन करें उपकरण> वेब डेवलपर्स> फायरबग, वेब पेज पर राइट-क्लिक करें और चुनें “फायरबग के साथ तत्व का निरीक्षण करें”.

वैकल्पिक रूप से, आप फ़ायरफ़ॉक्स में एक फायरबग आइकन पा सकते हैं और उस पर क्लिक कर सकते हैं, यह फायरबग विंडो दिखाएगा;

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

बॉक्स आकार का समायोजन

HTML तत्व CSS बॉक्स मॉडल के साथ बना है जिसमें मार्जिन, पैडिंग और ऑब्जेक्ट आयाम (चौड़ाई / ऊंचाई) शामिल हैं। ऐसे समय होते हैं जब हमें इन गुणों को संशोधित करने की आवश्यकता हो सकती है। उस स्थिति में, आप उन तत्वों में से एक का चयन कर सकते हैं जिन्हें आप बदलना चाहते हैं, फिर जाएं ख़ाका पैनल.

इस पैनल में, आपको सीएसएस बॉक्स मॉडल का चित्रण मिलेगा, जिसमें इसकी जानकारी भी शामिल है चौड़ाई तथा ऊंचाई. भले ही ये दोनों गुण CSS में निर्दिष्ट नहीं हैं, यह उपकरण मूल्य निर्धारित करने के लिए पर्याप्त चतुर है। यदि आपको उन्हें संशोधित करने की आवश्यकता है, तो आप बस मूल्य पर क्लिक कर सकते हैं और मूल्य को बढ़ाने या घटाने के लिए ऊपर या नीचे तीर कुंजी का उपयोग कर सकते हैं.

संगणक शैली

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

फ़ॉन्ट परिवार का निरीक्षण (आसान तरीका)

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

इंस्टॉलेशन हो जाने के बाद, अपना वेबपृष्ठ लोड करें, और अब हम स्पष्ट रूप से देख सकते हैं कि कौन सा फ़ॉन्ट परिवार लागू है। हमारे मामले में यह वास्तव में है हेल्वेटिका नीयू (शॉट देखें).

प्रदर्शन का विश्लेषण

यह प्लैटिट्यूड हो सकता है, लेकिन वेबसाइट की गुणवत्ता तय करने में साइट स्पीड अब Google मापदंडों (एल्गोरिदम) में से एक है; वह वेबसाइट जो तेजी से लोड होती है, को अच्छी तरह से विकसित और सामग्री के मामले में उच्च स्थान पर माना जाता है। तो गति ऐसी चीज नहीं है जिसे अनदेखा किया जाना चाहिए.

नेट पैनल

पहली जगह जो आपको अपनी वेबसाइट के प्रदर्शन का निरीक्षण करने के लिए देखने की आवश्यकता हो सकती है वह है जाल पैनल। यह पैनल लोड होने पर आपकी वेबसाइट के HTTP अनुरोध को रिकॉर्ड करेगा। नीचे दिया गया यह स्क्रीनशॉट एक वेबपेज दिखाता है जो लोड करता है 42 अनुरोध और चारों ओर ले जाता है 4.36 सेकंड लोड करने के लिए.

तब आप एचटीएमएल, सीएसएस, और छवियाँ जैसे उनके प्रकार पर HTTP अनुरोध को सॉर्ट कर सकते हैं.

YSlow!

इसके अलावा, आप भी स्थापित कर सकते हैं YSlow, याहू से Firebug के लिए एक विस्तार !. इसके सक्रिय होने के बाद, आपको अतिरिक्त पैनल स्पष्ट रूप से Yslow कहा जाएगा!.

के समान जाल पैनल, Yslow! लोड होने पर वेबपृष्ठ के प्रदर्शन को रिकॉर्ड करेगा, लेकिन फिर यह आपको यह भी बताएगा कि वेबपृष्ठ धीमा क्यों है और हम इसे हल करने के लिए क्या कर सकते हैं। इस उदाहरण में, हम एक वेबपेज के लिए एक परीक्षण चलाते हैं और इसे स्कोर किया जाता है समग्र प्रदर्शन के लिए 86, जिसे ठीक माना जाता है.

पृष्ठ गति

वैकल्पिक रूप से, आप Google से पृष्ठ गति भी स्थापित कर सकते हैं। के समान YSlow!, यह वेबसाइट की गति के प्रदर्शन का परीक्षण करता है, भले ही परीक्षा परिणाम थोड़ा अलग हो। यह उदाहरण दिखाता है कि एक ही वेबपेज पेज स्पीड के हिसाब से 82 रन बनाए.

वेब डेवलपर उपकरण

वेब डेवलपर्स टूल स्पष्ट रूप से वेब डेवलपर्स के लिए है और इसमें इस टूलबार में पैक की गई सुविधाओं का एक समूह है। लेकिन यह नीचे एक मेरे पसंदीदा में से एक है.

छवि निरीक्षण

ऐसे समय होते हैं जब हमें वेबपृष्ठ से छवि जानकारी प्राप्त करने की आवश्यकता हो सकती है। मैं आमतौर पर लोगों को ब्राउज़र में ठोकर खाते हुए या छवि को राइट-क्लिक करके और चयन करके देखता हूं चित्र जानकारी देखें, इस तरह:

लेकिन यह तरीका काफी कुशल नहीं है जब हमें कई छवियों से जानकारी प्राप्त करने की आवश्यकता होती है। उस स्थिति में, हम इसका उपयोग कर सकते हैं इमेजिस ऐड-ऑन से सुविधा। यह सुविधा टूलबार से छवि मेनू से आसानी से सुलभ है.

और, यह उदाहरण दिखाता है कि हम एक साथ छवि आयाम और छवि फ़ाइल आकार कैसे दिखाते हैं:

फ़ायरफ़ॉक्स निर्मित उपकरण

हाल के संस्करणों में, फ़ायरफ़ॉक्स ने वेब डेवलपर्स के लिए अपनी अंतर्निहित सुविधाओं में जबरदस्त वृद्धि की है, उनमें से कुछ हैं:

मूल निरीक्षण तत्व

यह मूल निवासी तत्व का निरीक्षण फ़ायरफ़ॉक्स के समान लग सकता है “फायरबग में तत्व का निरीक्षण करें”, लेकिन यह वास्तव में विभिन्न तरीकों से कार्य करता है.

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

का उपयोग करते हुए 3 डी दृश्य आप वेबपेज संरचना को गहराई से देख सकते हैं। इस दृश्य को सक्रिय करने के लिए, आप दाईं ओर नीचे बटन पा सकते हैं “फ़ायरफ़ॉक्स मूल निवासी निरीक्षण”. इस प्रकार है 3 डी दृश्य की तरह लगता है.

हालांकि मैं इसे अन्य विशेषताओं के रूप में अक्सर उपयोग नहीं करता, लेकिन यह मोज़िला मैं मानता हूँ और निश्चित रूप से कुछ स्थितियों में बहुत उपयोगी है।.

वेब डिज़ाइन दृश्य

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

यह दृश्य इस मेनू से उपलब्ध है: उपकरण> वेब डेवलपर> वेब डिज़ाइन दृश्य. और, यह दृश्य कैसा दिखता है.

शैली संपादक

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

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

स्टाइल संपादक निम्नलिखित मेनू से उपलब्ध है: उपकरण> वेब डेवलपर> शैली संपादक.

फाइनल थॉट

इन फ़ायरफ़ॉक्स ऐड-ऑन में पैक की गई सुविधाओं का एक समूह है और यहां जिन लोगों पर चर्चा की गई है उनमें से कुछ ऐसे फीचर्स हैं जिनका मैं वेब विकास के दौरान अक्सर उपयोग करता हूं। फिर भी, आपके पास कुछ अन्य युक्तियां हो सकती हैं जो फ़ायरफ़ॉक्स में वेब विकास उत्पादकता बढ़ाने के लिए उपयोगी हो सकती हैं.

आप बार-बार किन विशेषताओं का उपयोग करते हैं? आप अपने विचार नीचे कमेंट बॉक्स में साझा कर सकते हैं.