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

फ़ायरफ़ॉक्स "निरीक्षण तत्व" टूल आपको वेबसाइट के संचालन के आधार पर जांच करने में मदद कर सकता है, जिसमें एचटीएमएल और सीएसएस तत्वों का उपयोग किया जाता है, नेटवर्क पर इसका भार, इसके लोडिंग तत्वों की विलम्ब, और भंडारण में रखी गई फाइलें, जैसे कि कुकीज़।

अनुभवी डेवलपर्स को इस प्राइमर में बहुत नया नहीं मिल सकता है। हालांकि, नौसिखियों और रोजमर्रा के वेब उपयोगकर्ताओं को फ़ायरफ़ॉक्स की क्षमताओं के लिए एक नई, शक्तिशाली पक्ष और इंटरनेट पर हर साइट के नीचे बैठने वाली फ़ाइलों और संचालनों का गहराई से पता होना चाहिए।

स्थापना

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

मेजर लिनक्स डिस्ट्रोज़ फ़ायरफ़ॉक्स के साथ पूर्व-स्थापित हो सकता है या फ़ायरफ़ॉक्स की प्रतियां उनके सॉफ़्टवेयर सेंटर / पैकेज रिपॉजिटरीज़ में हैं जो उपयोगकर्ता आसानी से इंस्टॉल कर सकते हैं।

"तत्व का निरीक्षण करें" खोलना

फ़ायरफ़ॉक्स की स्थापना के बाद, आप वेबपेज पर किसी तत्व को राइट-क्लिक करके अपने इंस्पेक्टर को पा सकते हैं। इससे आपको एक ड्रॉपडाउन मेनू दिखाया जाएगा जैसे कि नीचे चित्रित किया गया है जहां "तत्व का निरीक्षण करें" सूची के नीचे स्थित है।

इंस्पेक्टर

"निरीक्षण तत्व" पर क्लिक करने से तुरंत आपकी स्क्रीन के निचले भाग में इंस्पेक्टर खुल जाएगा। इस बिंदु पर शीर्षक थोड़ा आलसी हो जाते हैं क्योंकि इंस्पेक्टर तकनीकी रूप से अपनी सेवाओं के "इंस्पेक्टर" हिस्से को खोला होगा।

किसी भी मामले में आपके द्वारा क्लिक किया गया तत्व टूल के बीच में दिखाया जाएगा, और जब आप उस तत्व पर अपना माउस चलाते हैं - जैसे टैग मैं नीचे स्क्रीनशॉट में होवर करता हूं - "इंस्पेक्टर" वेबपृष्ठ में आपकी स्क्रीन पर उस दृश्य तत्व को हाइलाइट करेगा।

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

यदि आप उस दाएं तरफ पैनल से स्क्रॉल करते हैं, तो आप अन्य तत्वों से प्राप्त गुणों को देख सकते हैं। आप उस विंडो में गुणों को भी बदल सकते हैं और उन्हें वास्तविक समय में वेबपृष्ठ पर दिखाई दे सकते हैं।

स्टाइल संपादक

इंस्पेक्टर के शीर्ष पर टूलबार का पालन करके आप कैस्केडिंग स्टाइल शीट्स (सीएसएस) के दायरे में अपनी यात्रा जारी रख सकते हैं। एक नई वार्तालाप खोलने के लिए "स्टाइल संपादक" कहां क्लिक करें, जो आपकी स्क्रीन के नीचे तीन नए पैनल दिखाता है।

यहां आप दो स्टाइल शीट फाइलों को देख सकते हैं डकडकगो, पहली चयनित स्टाइल शीट के तत्व, और उस शीट के विभिन्न "@media" नियम, जो छोटी और बड़ी स्क्रीन के लिए उत्तरदायी डिज़ाइन को नियंत्रित करते हैं।

आप इन स्टाइल शीट्स को संपादित कर सकते हैं जैसे कि आप "इंस्पेक्टर" अनुभाग में कर सकते हैं। इस मामले में अकेले पहली स्टाइल शीट में 1262 नियमों का चयन करने के लिए बहुत सारे नियम हैं।

यदि आप टूलबार में "नेटवर्क मॉनीटर" पर और भी नेविगेट करते हैं, तो आपको उन फ़ाइलों और उनकी स्थितियों के लिए वेबसाइट के अनुरोध मिलेंगे। छवियों और फोंट जैसे अन्य तत्व भी उस टैब में उपस्थित हो सकते हैं, और अनुरोध के संसाधित होने के बाद आप उन सभी अनुरोधों और प्रत्येक फ़ाइल के आकार को देख सकते हैं।

प्रदर्शन

जब आप "प्रदर्शन" टैब खोलते हैं, तो इंस्पेक्टर जानकारी इकट्ठा करने के लिए आपको "रिकॉर्डिंग प्रदर्शन प्रारंभ करें" बटन पर क्लिक करना होगा। कुछ ही सेकंड में यह आपके पृष्ठ पर चलने वाले फ्रेम-प्रति-सेकंड (एफपीएस), दस्तावेज ऑब्जेक्ट मॉडल (डीओएम) घटनाओं, और शैली के पुनर्मूल्यांकन, समय के साथ (आमतौर पर मिलीसेकंड में) की खोज करेगा, जो कि उन तत्वों को ले गया था भार।

इस साइट के लिए आप हाइलाइट किए गए डीओएम ईवेंट को देख सकते हैं, एक माउसओवर, लोड होने की अवधि में 6.03 मिलीसेकंड ले लिया। इस पृष्ठ के लिए औसत एफपीएस लगभग 39 था। और कुछ घटनाओं के लिए प्रतिक्रिया समय की मेरी सीमा दिखाते हुए चार्ट 9 000 मिलीसेकंड तक पहुंच गया।

याद

"मेमोरी" टैब में आपको जानकारी एकत्र करने के लिए - "स्नैपशॉट लें" बटन पर क्लिक करने की भी आवश्यकता होगी। मेरे लिए, इसने घटनाओं का नक्शा उत्पन्न किया जो लगभग 600 Kb स्ट्रिंग्स, 1 एमबी ऑब्जेक्ट्स और 1 एमबी स्क्रिप्ट्स को मेमोरी में अपने तरीके खोजने के लिए दिखाता है। ड्रॉपडाउन मेनू पर क्लिक करके आप उन तत्वों को दो अलग-अलग तरीकों से देख सकते हैं, जहां यह "ट्री मैप" कहता है, जैसा कि आप इस स्क्रीनशॉट में देख सकते हैं।

भंडारण

अंत में, यदि आप "स्टोरेज" टैब पर क्लिक करते हैं, तो आप अपने कंप्यूटर पर एक वेबसाइट रखी गई स्थायी फाइलें देख सकते हैं। अधिकांश उपयोगकर्ताओं के लिए प्रासंगिक, इसमें कुकीज़ शामिल हैं। आप नीचे दी गई छवि में लोड एक देख सकते हैं।

आप दाएं तरफ पैनल में देख सकते हैं कि यह विशेष कुकी अगले दशक के मध्य में समाप्त हो जाती है और मैंने इस लेख को लिखने के सत्र के दौरान इसे एक्सेस किया।

निष्कर्ष

फ़ायरफ़ॉक्स इंस्पेक्टर का उपयोग करते समय घूमने के लिए बहुत कुछ है। इसके कई हिस्सों में यह परिचय आपको थोड़ी देर व्यस्त रखेगा।

साइट के HTML तत्वों को बदलने के लिए कुछ समय लें। अपने लोडिंग समय देखने के लिए कुछ अलग-अलग वेबसाइटों पर जाएं। पता लगाएं कि एक विशेष पृष्ठ कितनी कुकीज आपकी मशीन पर स्टोर करने की कोशिश करता है। कभी-कभी, वह जानकारी आपको रोक सकती है।

उम्मीद है कि खोज की यह यात्रा आपको वेबसाइटों की अधिक समझ प्रदान करेगी ताकि वे आपकी अपेक्षा के अनुसार काम कर सकें। इससे पहले कि आप पहले महसूस किया उससे कहीं अधिक हो सकता है।

छवि क्रेडिट: जमा फ़ोटो द्वारा फ़ायरफ़ॉक्स क्वांटम होम पेज