Google Chrome न केवल एक तेज़ उपभोक्ता ब्राउज़र है - यह अपने हुड के नीचे डेवलपर सुविधाओं की एक मेजबानी भी छुपाता है। आप "इंस्पेक्ट" टूल के साथ इस शक्ति के कुछ हिस्से को प्रकट कर सकते हैं। जबकि शुरुआत में यह भारी लग सकता है, यह टूल आपको इस बात की जानकारी देता है कि वेबसाइट्स कैसे बनाई जाती हैं, और यह आपकी अपनी साइट्स को डीबग करने में मदद कर सकता है।
इंस्पेक्ट टूल तक पहुंचना
इंस्पेक्ट टूल Chrome के कॉन्टेक्स्ट मेनू में पाया जा सकता है।
अपने ब्राउज़र में किसी भी एलिमेंट पर राइट-क्लिक करें और कॉन्टेक्स्ट मेनू में "इंस्पेक्ट" पर क्लिक करें।
Chrome ब्राउज़र के साइड से एक विंडो पॉप आउट होगी जैसा कि नीचे देखा गया है। इसे DevTools पैनल कहा जाता है। यदि आपने कभी Firefox पर Firebug का उपयोग किया है, तो आप इसके कुछ हिस्सों को पहचान सकते हैं।
यहां बहुत कुछ है, तो आइए व्यक्तिगत टुकड़ों की जांच करें।
इंस्पेक्टर का निरीक्षण
इंस्पेक्ट पैनल कई अलग-अलग टैब्स में विभाजित है जो विंडो के शीर्ष पर दिखाई देते हैं। हम डिफ़ॉल्ट Elements टैब पर ध्यान केंद्रित करेंगे।
इन टैब्स के बगल में दो उपयोगी बटन हैं। पहला है इंस्पेक्ट एलिमेंट टूल।
यह टूल आपको विभिन्न DOM एलिमेंट्स पर माउस घुमाकर और उन्हें चुनकर इंस्पेक्ट करने की अनुमति देता है।
दूसरा बटन डिवाइस प्रीव्यू मोड चालू करता है। इस मोड में आप देख सकते हैं कि आपका वेबपेज विभिन्न रिज़ॉल्यूशन और स्क्रीन आकारों पर कैसा दिखता है।
यदि आप उस बटन पर क्लिक करते हैं, तो आप अपने वेबपेज को एक नए व्यू में स्नैप होते देखेंगे।
फिर आप पेज प्रीव्यू के ऊपर ड्रॉप-डाउन मेनू या पेज प्रीव्यू के किनारों पर हैंडल का उपयोग करके डिवाइस प्रीव्यू विंडो का आकार बदल सकते हैं।
HTML व्यू
DevTools टैब का अधिकांश हिस्सा HTML पेन द्वारा घिरा होता है।
यह पेन एक सुपर-पावर्ड "व्यू सोर्स" की तरह है। यह DOM के अनुसार संरचित है, जिसमें एलिमेंट्स अपने पैरेंट एलिमेंट्स के अंदर नेस्टेड हैं।
आप देखेंगे कि आपने शुरुआत में जिस एलिमेंट को "इंस्पेक्ट" किया था वह स्वचालित रूप से ग्रे या नीले बैकग्राउंड के साथ हाइलाइट हो जाता है। यहां, मैंने एक इमेज को इंस्पेक्ट किया है जो एक लिंक में समाहित है। उम्मीद के मुताबिक, मुझे एक हाइलाइटेड एंकर टैग दिखाई देता है।
लेकिन मेरी इमेज कहां है? मैं टैग के बगल में डिस्क्लोजर ट्रायंगल पर क्लिक करके एंकर टैग में नेस्टेड किसी भी DOM एलिमेंट को प्रकट कर सकता हूं। इस मामले में तीर उस टैग को प्रकट करता है जिसे मुझे खोजने की उम्मीद थी।
आप HTML पेन के नीचे एक छोटा मेनू बार भी देखेंगे।
इसे ब्रेडक्रंब ट्रेल कहा जाता है, और यह चयनित एलिमेंट के सभी पैरेंट एलिमेंट्स को दिखाता है। उन एलिमेंट्स में से किसी एक पर नेविगेट करने के लिए, बस उस पर क्लिक करें।
स्टाइल्स
HTML व्यू के नीचे हम एक पेन भी देखते हैं जो हमारे एलिमेंट पर लागू होने वाले किसी भी CSS नियमों को दिखाता है। इसे स्टाइल्स पेन कहा जाता है, और इस मामले में हम उन सभी नियमों को देखते हैं जो पहले इंस्पेक्ट किए गए एंकर टैग पर लागू होते हैं।
आप इस पर होवर करके और उसके बगल में चेक बॉक्स पर क्लिक करके एक नियम को चालू और बंद कर सकते हैं।
आप इस परिवर्तन को पेज प्रीव्यू में तुरंत प्रतिबिंबित होते देखेंगे। और यदि आप सीधे एक नियम पर क्लिक करते हैं, तो आप उसका नाम और मान बदल सकते हैं।
आप फिल्टर सर्च बॉक्स का उपयोग करके विशेष नियमों को भी खोज सकते हैं।
स्टाइल्स पेन इससे कहीं अधिक करने में सक्षम है। स्टाइल पेन के कई कार्यों के पूर्ण विवरण के लिए Google के दस्तावेज़ देखें।
बॉक्स मॉडल और कम्प्यूटेड स्टाइल
स्टाइल व्यू के बगल में मेरे चयनित एलिमेंट के लिए बॉक्स मॉडल है। यदि आप परिचित नहीं हैं, तो बॉक्स मॉडल किसी विशेष एलिमेंट पर लागू मार्जिन, बॉर्डर, पैडिंग और कंटेंट आकार का एक अमूर्त चित्रण है।
इस मामले में मैं देख सकता हूं कि मेरे एलिमेंट का प्राथमिक आकार 461 x 209 पिक्सल है। इसमें कोई मार्जिन, बॉर्डर या पैडिंग नियम नहीं हैं, इसलिए वे बॉक्स खाली हैं।
यदि आप कुछ पोजीशन, मार्जिन, बॉर्डर या पैडिंग नियमों वाले एलिमेंट को चुनते हैं, तो आपका बॉक्स मॉडल इससे अधिक इस तरह दिख सकता है।
यदि आप इंस्पेक्ट एलिमेंट टूल सक्षम करके DOM एलिमेंट्स पर माउस घुमाते हैं तो आप एक इन सीटू बॉक्स मॉडल भी देख सकते हैं।
बॉक्स मॉडल के नीचे इस विशेष एलिमेंट पर लागू होने वाले सभी स्टाइलिंग नियमों की सूची है। यह स्टाइल्स पेन से थोड़ा अलग है। यह CSS की वास्तविक लाइनों को प्रदर्शित नहीं करता - केवल उन नियमों के प्रभाव। इसे ऑब्जेक्ट की "कम्प्यूटेड स्टाइल" कहा जाता है, और यह आपके CSS का संयुक्त परिणाम है।
अंत में, आप फिल्टर बॉक्स में टाइप करके विशेष नियमों को खोज सकते हैं।
निष्कर्ष
यदि आप वेब पेजेज के साथ अक्सर काम करते हैं, तो Chrome का इंस्पेक्ट टूल खोजने लायक है। और DevTools में अन्य टैब्स, जैसे कंसोल और नेटवर्क, डेवलपर्स के लिए अमूल्य हो सकते हैं। उससे कहीं अधिक है जिसे हम अभी कवर कर सकते हैं, लेकिन Google का अपना दस्तावेज़ीकरण विस्तृत और उपयोगी है।
