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