यदि आप कभी जानना चाहते हैं कि आपकी पसंदीदा वेबसाइटें कैसे संरचित हैं, तो ब्राउज़र की "Inspect" सेवाएं एक छिपा हुआ वरदान हो सकती हैं। हमने Chrome के "Inspect" टूल को कवर किया है, और Firefox एक समान पेशकश के साथ आता है।
Firefox "Inspect Element" टूल आपको HTML और CSS एलिमेंट्स, नेटवर्क पर इसके लोड, इसके लोडिंग एलिमेंट्स की लेटेंसी, और उन फाइलों की जांच करने में मदद कर सकता है जिन्हें यह स्टोरेज में रखता है, जैसे कुकीज।
अनुभवी डेवलपर्स को इस प्राइमर में बहुत नया नहीं मिल सकता है। हालांकि, नौसिखियों और रोजमर्रा के वेब उपयोगकर्ताओं को Firefox की क्षमताओं का एक नया, शक्तिशाली पक्ष और फ़ाइलों और संचालन का एक गहरा कुआं मिलना चाहिए जो इंटरनेट पर हर साइट के नीचे बैठते हैं।
इंस्टालेशन
यदि आप Firefox का उपयोग करते हैं, तो आपको कुछ और करने की आवश्यकता नहीं है। यदि आप Firefox का उपयोग शुरू करना चाहते हैं, और आप Windows, Linux, Mac, iOS, या Android पर हैं, तो ब्राउज़र के नवीनतम संस्करण को खोजने के लिए इस लिंक का पालन करें। डाउनलोड की गई इंस्टॉलर फ़ाइलों को सामान्य रूप से इंस्टॉल करें, उन्हें डबल-क्लिक करके या टैप करके यदि आप स्मार्टफोन पर हैं।
प्रमुख Linux डिस्ट्रोस संभवतः Firefox के साथ प्री-इंस्टॉल्ड आते हैं या उनके सॉफ्टवेयर सेंटर/पैकेज रिपॉजिटरी में Firefox की प्रतियां होती हैं जिन्हें उपयोगकर्ता आसानी से इंस्टॉल कर सकता है।
"Inspect Element" खोलना
Firefox इंस्टॉलेशन के बाद, आप किसी वेबपेज पर किसी भी एलिमेंट पर राइट-क्लिक करके इसके इंस्पेक्टर को ढूंढ सकते हैं। यह आपको नीचे चित्रित ड्रॉपडाउन मेनू जैसा एक मेनू दिखाएगा जहां "Inspect Element" सूची के नीचे के पास स्थित है।
Inspector
"Inspect Element" पर क्लिक करने से तुरंत आपकी स्क्रीन के नीचे इंस्पेक्टर खुल जाएगा। इस बिंदु पर शीर्षक थोड़े धुंधले हो जाते हैं क्योंकि इंस्पेक्टर तकनीकी रूप से अपनी सेवाओं के "Inspector" भाग को खोल देगा।
किसी भी मामले में, आपके द्वारा क्लिक किया गया एलिमेंट टूल के बीच में दिखाया जाएगा, और जब आप उस एलिमेंट पर अपना माउस चलाते हैं - जैसे नीचे स्क्रीनशॉट में मैं जिस <div> टैग पर होवर कर रहा हूं - "Inspector" उस विजुअल एलिमेंट को वेबपेज पर ही हाइलाइट कर देगा।
इससे यह जानना आसान हो जाता है कि आप किन एलिमेंट्स को देख रहे हैं। यह उन एलिमेंट्स के विभिन्न गुणों को ढूंढना भी आसान बनाता है। यदि आप "Inspector" के दाईं ओर देखते हैं, तो आप उस विशिष्ट <div> टैग के गुण देखेंगे, जिसमें मार्जिन, पैडिंग, बॉर्डर, फ़ॉन्ट आकार, और वर्टिकल अलाइनमेंट के लिए इसकी सेटिंग्स शामिल हैं।
यदि आप उस दाएं साइड पैनल के माध्यम से स्क्रॉल करते हैं, तो आप उन गुणों को देख सकते हैं जो इसे अन्य एलिमेंट्स से विरासत में मिले हैं। आप उस विंडो में गुणों को भी बदल सकते हैं और उन्हें वेबपेज पर रीयल-टाइम में दिखाई देते हुए देख सकते हैं।
Style Editor
आप इंस्पेक्टर के शीर्ष पर टूलबार का अनुसरण करके कैस्केडिंग स्टाइल शीट्स (CSS) के क्षेत्र में अपनी यात्रा जारी रख सकते हैं। जहां "Style Editor" लिखा है वहां क्लिक करके एक नया डायलॉग खोलें जो आपकी स्क्रीन के नीचे तीन नए पैनल दिखाता है।
यहां आप DuckDuckGo द्वारा उपयोग की जाने वाली दो स्टाइल शीट फाइलें, पहले चयनित स्टाइल शीट के एलिमेंट्स, और उस शीट के विभिन्न "@media" नियम देख सकते हैं, जो छोटी और बड़ी स्क्रीन के लिए रिस्पॉन्सिव डिजाइन को नियंत्रित करते हैं।
आप इन स्टाइल शीट्स को ठीक उसी तरह संपादित कर सकते हैं जैसे आप "Inspector" सेक्शन में कर सकते हैं। इस मामले में चुनने के लिए बहुत सारे नियम हैं - अकेले पहली स्टाइल शीट में 1262 नियम।
यदि आप टूलबार में और आगे "Network Monitor" पर नेविगेट करते हैं, तो आपको उन फाइलों के लिए वेबसाइट के अनुरोध और उनकी स्थिति मिलेगी। अन्य एलिमेंट्स जैसे इमेज और फॉन्ट भी उस टैब में मौजूद हो सकते हैं, और आप उन सभी अनुरोधों और अनुरोध प्रोसेस होने के बाद प्रत्येक फाइल का आकार देख सकते हैं।
Performance
जब आप "Performance" टैब खोलते हैं, तो आपको इंस्पेक्टर को जानकारी इकट्ठा करने के लिए "Start Recording Performance" बटन पर क्लिक करना होगा। कुछ सेकंड में यह पता लगाएगा कि आपका पेज कितने फ्रेम-प्रति-सेकंड (FPS) पर चलता है, डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM) इवेंट जो हुए, और स्टाइल रीकैलकुलेशन, साथ ही वह समय (आमतौर पर मिलीसेकंड में) जो उन एलिमेंट्स को लोड होने में लगा।
इस साइट के लिए आप देख सकते हैं कि हाइलाइट किया गया DOM इवेंट, एक माउसओवर, लोड होने में 6.03 मिलीसेकंड की अवधि लेता है। इस पेज के लिए औसत FPS लगभग 39 था। और मेरी प्रतिक्रिया समय की रेंज दिखाने वाला चार्ट कुछ इवेंट्स के लिए 9000 मिलीसेकंड तक पहुंच गया।
Memory
"Memory" टैब में आपको एक बटन पर क्लिक करना होगा - "Take Snapshot" - जानकारी इकट्ठा करने के लिए। मेरे लिए, इसने इवेंट्स का एक मैप जनरेट किया जो लगभग 600 Kb स्ट्रिंग्स, 1 Mb ऑब्जेक्ट्स, और 1 Mb स्क्रिप्ट्स को मेमोरी में अपना रास्ता खोजते हुए दिखाता है। आप उन समान एलिमेंट्स को कुछ अलग तरीकों से देख सकते हैं उस ड्रॉपडाउन मेनू पर क्लिक करके जहां "Tree Map" लिखा है, जैसा कि आप इस स्क्रीनशॉट में देख सकते हैं।
Storage
अंत में, यदि आप "Storage" टैब पर क्लिक करते हैं, तो आप उन स्थायी फाइलों को देख सकते हैं जो एक वेबसाइट ने आपके कंप्यूटर पर रखी होंगी। अधिकांश उपयोगकर्ताओं के लिए प्रासंगिक, इसमें कुकीज शामिल हैं। आप नीचे दी गई इमेज में एक लोडेड देख सकते हैं।
आप दाएं साइड पैनल में देख सकते हैं कि यह विशेष कुकी अगले दशक के मध्य में एक्सपायर होती है और मैंने इस लेख को लिखने के सत्र के दौरान इसे एक्सेस किया था।
निष्कर्ष
Firefox इंस्पेक्टर का उपयोग करते समय बहुत कुछ देखना होता है। इसके कई भागों का यह परिचय आपको थोड़ी देर के लिए व्यस्त रखना चाहिए।
किसी साइट के HTML एलिमेंट्स को बदलने में कुछ समय बिताएं। उनकी लोडिंग समय देखने के लिए कुछ अलग वेबसाइट्स पर जाएं। पता लगाएं कि कोई विशेष पेज आपकी मशीन पर कितनी कुकीज स्टोर करने की कोशिश करता है। कई बार, वह जानकारी आपको विराम दे सकती है।
उम्मीद है, खोज की यह यात्रा आपको इस बात की अधिक समझ देगी कि वेबसाइटें क्या करती हैं ताकि वे आपकी अपेक्षा के अनुसार कार्य कर सकें। यह आपके द्वारा पहले महसूस किए गए से कहीं अधिक हो सकता है।
