फ़ायरफ़ॉक्स के वेब डेवलपर टूल का उपयोग कैसे करें
फ़ायरफ़ॉक्स के वेब डेवलपर मेनू में पृष्ठों का निरीक्षण करने, मनमाने ढंग से जावास्क्रिप्ट कोड निष्पादित करने और HTTP अनुरोधों और अन्य संदेशों को देखने के लिए उपकरण हैं। फ़ायरफ़ॉक्स 10 ने एक सब-नया इंस्पेक्टर टूल जोड़ा और स्क्रैचपैड अपडेट किया.
फ़ायरफ़ॉक्स और वेब डेवलपर टूलबार जैसे भयानक वेब-डेवलपर ऐड-ऑन के संयोजन में फ़ायरफ़ॉक्स की नई वेब डेवलपर सुविधाएँ, फ़ायरफ़ॉक्स को वेब डेवलपर्स के लिए एक आदर्श ब्राउज़र बनाती हैं। सभी उपकरण फ़ायरफ़ॉक्स के मेनू में वेब डेवलपर के तहत उपलब्ध हैं.
पेज इंस्पेक्टर
किसी विशेष तत्व का निरीक्षण करके उसे राइट-क्लिक करके चुनें निरीक्षण (या दबाकर क्यू)। आप भी लॉन्च कर सकते हैं इंस्पेक्टर वेब डेवलपर मेनू से.
आपको स्क्रीन के नीचे एक टूलबार दिखाई देगा, जिसका उपयोग आप निरीक्षक को नियंत्रित करने के लिए कर सकते हैं। आपके चयनित तत्व को हाइलाइट किया जाएगा और पृष्ठ पर अन्य तत्व मंद हो जाएंगे.
यदि आप एक नया तत्व चुनना चाहते हैं, तो क्लिक करें निरीक्षण टूलबार पर बटन, पृष्ठ पर अपने माउस को घुमाएं और अपने तत्व पर क्लिक करें। फ़ायरफ़ॉक्स आपके कर्सर के तहत तत्व को उजागर करता है.
आप टूलबार पर ब्रेडक्रंब पर क्लिक करके माता-पिता और बच्चे के तत्वों के बीच नेविगेट कर सकते हैं.
HTML इंस्पेक्टर
दबाएं एचटीएमएल वर्तमान में चयनित तत्व का HTML कोड देखने के लिए बटन.
HTML इंस्पेक्टर आपको HTML टैग का विस्तार और पतन करने की अनुमति देता है, जिससे एक नज़र में कल्पना करना आसान हो जाता है। यदि आप एक फ्लैट फ़ाइल में पृष्ठ का HTML देखना चाहते हैं, तो आप चयन कर सकते हैं पृष्ठ का स्त्रोत देखें वेब डेवलपर मेनू से.
सीएसएस इंस्पेक्टर
दबाएं अंदाज चयनित तत्व पर लागू सीएसएस नियमों को देखने के लिए बटन.
एक सीएसएस गुण पैनल भी है - क्लिक करके दोनों के बीच स्विच करें नियम तथा गुण बटन। विशिष्ट गुण खोजने में आपकी मदद करने के लिए, गुण पैनल में एक खोज बॉक्स शामिल है.
आप नियम पैनल से फ्लाई पर तत्व के सीएसएस को संपादित कर सकते हैं। एक नियम को निष्क्रिय करने के लिए किसी भी चेक बॉक्स को अनचेक करें, एक नियम को बदलने के लिए पाठ पर क्लिक करें, या अपने स्वयं के नियमों को फलक के शीर्ष पर स्थित तत्व में जोड़ें। यहाँ, मैंने जोड़ा है फोंट की मोटाई: बोल्ड; सीएसएस नियम, तत्व के पाठ को बोल्ड बनाता है.
जावास्क्रिप्ट स्क्रैचपैड
स्क्रैचपैड ने फ़ायरफ़ॉक्स 10 के साथ एक अपडेट भी देखा, और अब इसमें सिंटैक्स हाइलाइटिंग है। वर्तमान पृष्ठ पर चलने के लिए आप जावास्क्रिप्ट कोड टाइप कर सकते हैं.
आपके पास एक बार, क्लिक करें निष्पादित मेनू और चयन करें रन. वर्तमान टैब में कोड चलता है.
वेब कंसोल
वेब कंसोल पुराने त्रुटि कंसोल को बदल देता है, जिसे हटा दिया गया है और भविष्य के फ़ायरफ़ॉक्स के संस्करण में हटा दिया जाएगा.
कंसोल चार अलग-अलग प्रकार के संदेश प्रदर्शित करता है, जिन्हें आप - नेटवर्क अनुरोध, सीएसएस त्रुटि संदेश, जावास्क्रिप्ट त्रुटि संदेश और वेब संदेश संदेशों की दृश्यता को टॉगल कर सकते हैं.
वेब डेवलपर संदेश क्या है? यह window.console ऑब्जेक्ट पर मुद्रित संदेश है। उदाहरण के लिए, हम चला सकते हैं window.console.log ("हैलो वर्ल्ड"); कंसोल पर डेवलपर संदेश प्रिंट करने के लिए स्क्रैचपैड में जावास्क्रिप्ट कोड। वेब डेवलपर इन संदेशों को डीबगिंग में मदद करने के लिए अपने जावास्क्रिप्ट कोड में एकीकृत कर सकते हैं.
पृष्ठ को रीफ़्रेश करें और आपको उत्पन्न नेटवर्क अनुरोध और अन्य संदेश दिखाई देंगे.
संदेशों को फ़िल्टर करने के लिए खोज बॉक्स का उपयोग करें; यदि आप अधिक विवरण देखना चाहते हैं तो एक अनुरोध पर क्लिक करें.
फ़ायरफ़ॉक्स 10 के रूप में, वेब कंसोल पेज इंस्पेक्टर के साथ मिलकर काम कर सकता है। $ 0 चर निरीक्षक में वर्तमान में चयनित वस्तु का प्रतिनिधित्व करता है। इसलिए, उदाहरण के लिए, यदि आप वर्तमान में चयनित ऑब्जेक्ट को छिपाना चाहते हैं, तो आप चला सकते हैं $ 0.style.display = "कोई नहीं" कंसोल में.
यदि आप कंसोल और इसके अंतर्निहित कार्यों का उपयोग करने के बारे में अधिक जानने में रुचि रखते हैं, तो मोज़िला डेवलपर वेबसाइट पर वेब कंसोल पेज देखें।.
अधिक उपकरण प्राप्त करें
अधिक उपकरण प्राप्त करें विकल्प आपको मोज़िला ऐड-ऑन वेबसाइट पर वेब डेवलपर के टूलबॉक्स ऐड-ऑन संग्रह पर ले जाता है। इसमें वेब डेवलपर्स के लिए कुछ बेहतरीन ऐड-ऑन शामिल हैं, जिनमें फायरबग और वेब डेवलपर टूलबार शामिल हैं.
यदि आप कुछ वर्षों से फ़ायरफ़ॉक्स का उपयोग कर रहे हैं, तो आपको DOM इंस्पेक्टर याद हो सकता है। फ़ायरफ़ॉक्स के एकीकृत डेवलपर उपकरण तब से एक लंबा सफर तय कर चुके हैं.
