यदि आप कभी जानना चाहते हैं कि आपकी पसंदीदा वेबसाइटें कैसे संरचित हैं, तो ब्राउज़र की "निरीक्षण" सेवाएं एक छिपी हुई आशीर्वाद हो सकती हैं। हमने क्रोम के "निरीक्षण" टूल को कवर किया है, और फ़ायरफ़ॉक्स भी इसी तरह की पेशकश के साथ आता है।
फ़ायरफ़ॉक्स "इंस्पेक्ट एलिमेंट" टूल आपको वेबसाइट के संचालन के आधार की जांच करने में मदद कर सकता है, जिसमें एचटीएमएल और सीएसएस तत्वों का उपयोग किया जाता है, नेटवर्क पर इसका लोड, इसके लोडिंग तत्वों की विलंबता, और फाइलों को भंडारण में रखा जाता है, जैसे कि कुकीज़।
अनुभवी डेवलपर्स को इस प्राइमर में बहुत कुछ नया नहीं मिल सकता है। हालाँकि, नौसिखियों और रोज़मर्रा के वेब उपयोगकर्ताओं को फ़ायरफ़ॉक्स की क्षमताओं के लिए एक नया, शक्तिशाली पक्ष और इंटरनेट पर हर साइट के नीचे बैठने वाली फ़ाइलों और संचालन का एक गहरा कुआँ खोजना चाहिए।
इंस्टॉलेशन
यदि आप Firefox का उपयोग करते हैं, तो आपको आगे कुछ भी करने की आवश्यकता नहीं है। यदि आप फ़ायरफ़ॉक्स का उपयोग शुरू करना चाहते हैं, और आप विंडोज, लिनक्स, मैक, आईओएस या एंड्रॉइड पर हैं, तो ब्राउज़र का नवीनतम संस्करण खोजने के लिए इस लिंक का अनुसरण करें। डाउनलोड की गई इंस्टॉलर फ़ाइलों को वैसे ही स्थापित करें जैसे आप सामान्य रूप से करते हैं, उन्हें डबल-क्लिक करके या यदि आप स्मार्टफोन पर हैं तो टैप करें।
प्रमुख लिनक्स डिस्ट्रोज़ संभवतः फ़ायरफ़ॉक्स के साथ पूर्व-स्थापित होते हैं या उनके सॉफ़्टवेयर केंद्र/पैकेज रिपॉजिटरी में फ़ायरफ़ॉक्स की प्रतियां होती हैं जिन्हें उपयोगकर्ता आसानी से स्थापित कर सकता है।
“निरीक्षण तत्व” खोलना
फ़ायरफ़ॉक्स की स्थापना के बाद, आप वेबपेज पर किसी भी तत्व पर राइट-क्लिक करके इसके इंस्पेक्टर को ढूंढ सकते हैं। यह आपको एक ड्रॉपडाउन मेनू दिखाएगा जैसे कि यह नीचे चित्रित किया गया है जहां "तत्व का निरीक्षण करें" सूची के नीचे स्थित है।
इंस्पेक्टर
"इंस्पेक्ट एलिमेंट" पर क्लिक करने से आपकी स्क्रीन के नीचे इंस्पेक्टर तुरंत खुल जाएगा। इस बिंदु पर शीर्षक थोड़ा धुंधला हो जाता है क्योंकि इंस्पेक्टर ने तकनीकी रूप से अपनी सेवाओं के "इंस्पेक्टर" भाग को खोल दिया होगा।
किसी भी स्थिति में आपके द्वारा क्लिक किया गया तत्व टूल के बीच में दिखाया जाएगा, और जब आप उस तत्व पर अपना माउस चलाते हैं - जैसे <div> टैग मैं नीचे स्क्रीनशॉट में होवर करता हूं - "इंस्पेक्टर" वेबपेज में ही आपकी स्क्रीन पर उस दृश्य तत्व को हाइलाइट करेगा।
इससे यह जानना आसान हो जाता है कि आप किन तत्वों को देख रहे हैं। यह उन तत्वों के विभिन्न गुणों को खोजना भी आसान बनाता है। यदि आप "इंस्पेक्टर" के दाईं ओर देखते हैं, तो आप उस विशिष्ट <div> के गुण देखेंगे टैग, मार्जिन, पैडिंग, बॉर्डर, फ़ॉन्ट आकार और लंबवत संरेखण के लिए इसकी सेटिंग्स सहित।
यदि आप उस दाईं ओर के पैनल में स्क्रॉल करते हैं, तो आप उन गुणों को देख सकते हैं जो इसे अन्य तत्वों से विरासत में मिले हैं। आप उस विंडो में गुणों को बदल भी सकते हैं और उन्हें वास्तविक समय में वेबपेज पर दिखाई दे सकते हैं।
शैली संपादक
आप इंस्पेक्टर के शीर्ष पर टूलबार का अनुसरण करके कैस्केडिंग स्टाइल शीट (सीएसएस) के दायरे में अपनी यात्रा जारी रख सकते हैं। एक नया संवाद खोलने के लिए जहां "शैली संपादक" लिखा हो, वहां क्लिक करें जो आपकी स्क्रीन के निचले भाग में तीन नए पैनल दिखाता है।
यहां आप डकडकगो द्वारा उपयोग की जाने वाली दो स्टाइल शीट फाइलें, पहली चयनित स्टाइल शीट के तत्व और उस शीट के विभिन्न "@मीडिया" नियम देख सकते हैं, जो छोटी और बड़ी स्क्रीन के लिए उत्तरदायी डिजाइन को नियंत्रित करते हैं।
आप इन स्टाइल शीट को ठीक वैसे ही संपादित कर सकते हैं जैसे आप "इंस्पेक्टर" अनुभाग में कर सकते हैं। इस मामले में चुनने के लिए बहुत सारे नियम हैं - अकेले पहली स्टाइल शीट में 1262 नियम।
यदि आप टूलबार में "नेटवर्क मॉनिटर" पर आगे भी नेविगेट करते हैं, तो आपको उन फ़ाइलों और उनकी स्थितियों के लिए वेबसाइट के अनुरोध मिलेंगे। अन्य तत्व जैसे चित्र और फ़ॉन्ट भी उस टैब में मौजूद हो सकते हैं, और अनुरोध संसाधित होने के बाद आप उन सभी अनुरोधों और प्रत्येक फ़ाइल का आकार देख सकते हैं।
प्रदर्शन
जब आप "प्रदर्शन" टैब खोलते हैं, तो निरीक्षक को जानकारी इकट्ठा करने के लिए आपको "रिकॉर्डिंग प्रदर्शन प्रारंभ करें" बटन पर क्लिक करना होगा। कुछ ही सेकंड में यह आपके पृष्ठ पर चलने वाले फ़्रेम-प्रति-सेकंड (FPS), दस्तावेज़ ऑब्जेक्ट मॉडल (DOM) ईवेंट, और शैली पुनर्गणना, उस समय (आमतौर पर मिलीसेकंड में) की खोज करेगा, जिसमें यह उन तत्वों को ले गया था। लोड।
इस साइट के लिए आप हाइलाइट किया गया DOM ईवेंट देख सकते हैं, एक माउसओवर, लोड होने की अवधि में 6.03 मिलीसेकंड लेता है। इस पृष्ठ के लिए औसत FPS लगभग 39 था। और मेरे प्रतिक्रिया समय की सीमा दिखाने वाला चार्ट कुछ घटनाओं के लिए 9000 मिलीसेकंड तक पहुंच गया।
स्मृति
"मेमोरी" टैब में आपको एक बटन पर क्लिक करना होगा - "स्नैपशॉट लें" - जानकारी इकट्ठा करने के लिए। मेरे लिए, इसने घटनाओं का एक नक्शा तैयार किया जो लगभग 600 केबी स्ट्रिंग्स, 1 एमबी ऑब्जेक्ट्स और 1 एमबी स्क्रिप्ट्स को स्मृति में अपना रास्ता खोजने के लिए दिखाता है। आप ड्रॉपडाउन मेनू पर क्लिक करके उन्हीं तत्वों को दो अलग-अलग तरीकों से देख सकते हैं, जहां यह "ट्री मैप" कहता है, जैसा कि आप इस स्क्रीनशॉट में देख सकते हैं।
संग्रहण
अंत में, यदि आप "संग्रहण" टैब पर क्लिक करते हैं, तो आप स्थायी फ़ाइलें देख सकते हैं जो एक वेबसाइट ने आपके कंप्यूटर पर रखी हो। अधिकांश उपयोगकर्ताओं के लिए प्रासंगिक, इसमें कुकीज़ शामिल हैं। आप नीचे दी गई छवि में लोड किए गए एक को देख सकते हैं।
आप दाईं ओर के पैनल में देख सकते हैं कि यह विशेष कुकी अगले दशक के मध्य में समाप्त हो रही है और मैंने इस लेख को लिखने के सत्र के दौरान इसे एक्सेस किया है।
निष्कर्ष
फ़ायरफ़ॉक्स इंस्पेक्टर का उपयोग करते समय बहुत कुछ करना होता है। इसके कई हिस्सों का यह परिचय आपको कुछ समय के लिए व्यस्त रखना चाहिए।
साइट के HTML तत्वों को बदलने के लिए कुछ समय निकालें। उनके लोडिंग समय को देखने के लिए कुछ अलग-अलग वेबसाइटों पर जाएं। पता लगाएँ कि कोई विशेष पृष्ठ आपकी मशीन पर कितनी कुकी संग्रहीत करने का प्रयास करता है। कभी-कभी, वह जानकारी आपको विराम दे सकती है।
उम्मीद है, खोज की यह यात्रा आपको इस बात की अधिक समझ देगी कि वेबसाइटें क्या करती हैं ताकि वे आपकी अपेक्षा के अनुरूप कार्य कर सकें। यह आपके द्वारा पहले महसूस किए गए से कहीं अधिक हो सकता है।