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

निरीक्षण उपकरण तक पहुंच

निरीक्षण उपकरण क्रोम के संदर्भ मेनू में पाया जा सकता है।

अपने ब्राउज़र में किसी भी तत्व पर राइट क्लिक करें और संदर्भ मेनू में "निरीक्षण" पर क्लिक करें।

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

यहां बहुत कुछ है, तो चलिए अलग-अलग टुकड़ों की जांच करें।

इंस्पेक्टर का निरीक्षण

निरीक्षण पैनल को कई अलग-अलग टैबों में बांटा गया है जो खिड़की के शीर्ष पर दिखाई दे रहे हैं। हम डिफ़ॉल्ट तत्व टैब पर ध्यान केंद्रित करेंगे।

इन टैब के बगल में दो उपयोगी बटन हैं। पहला इंस्पेक्ट एलिमेंट टूल है।

यह टूल आपको माउस पर माउस की अनुमति देता है और निरीक्षण के लिए विभिन्न डीओएम तत्वों का चयन करता है।

दूसरा बटन डिवाइस पूर्वावलोकन मोड पर बदल जाता है। इस मोड में आप देख सकते हैं कि आपका वेबपृष्ठ विभिन्न संकल्पों और स्क्रीन आकारों पर कैसा दिखता है।

यदि आप उस बटन पर क्लिक करते हैं, तो आप अपने वेबपृष्ठ को नए दृश्य में स्नैप देखेंगे।

फिर आप पृष्ठ पूर्वावलोकन के ऊपर ड्रॉप-डाउन मेनू या डिवाइस पूर्वावलोकन विंडो का आकार बदलने के लिए पृष्ठ पूर्वावलोकन के किनारों पर हैंडल का उपयोग कर सकते हैं।

एचटीएमएल देखें

अधिकांश DevTools टैब HTML फलक द्वारा कब्जा कर लिया गया है।

यह फलक एक सुपर-पावर्ड "व्यू सोर्स" की तरह है। यह डीओएम के अनुसार संरचित है, तत्वों को उनके मूल तत्वों के अंदर घोंसला है।

आप देखेंगे कि शुरुआत में जिस तत्व का आपने "निरीक्षण किया" तत्व स्वचालित रूप से भूरे या नीले रंग की पृष्ठभूमि से हाइलाइट किया गया है। यहां, मैंने एक छवि का निरीक्षण किया है जो एक लिंक में निहित है। जैसा कि अपेक्षित है, मुझे एक हाइलाइट एंकर टैग दिखाई देता है।

लेकिन मेरी छवि कहां है? मैं प्रकटीकरण त्रिकोण पर क्लिक करके एंकर टैग में घोंसला वाले किसी भी डोम तत्वों को प्रकट कर सकता हूं। इस मामले में तीर बताता है टैग मुझे खोजने की उम्मीद है।

आप HTML फलक के नीचे एक छोटा मेनू बार भी देखेंगे।

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

शैलियाँ

एचटीएमएल व्यू के नीचे हम एक फलक भी देखते हैं जो हमारे तत्व पर लागू होने वाले किसी भी सीएसएस नियम दिखाता है। इसे स्टाइल फलक कहा जाता है, और इस मामले में हम पहले से निरीक्षण किए गए एंकर टैग पर लागू होने वाले सभी नियम देखते हैं।

आप इस पर होवर करके और इसके बगल में स्थित चेक बॉक्स पर क्लिक करके एक नियम को चालू और बंद कर सकते हैं।

आपको यह परिवर्तन तुरंत पृष्ठ पूर्वावलोकन में दिखाई देगा। और यदि आप सीधे किसी नियम पर क्लिक करते हैं, तो आप उसका नाम और मूल्य बदल सकते हैं।

आप फ़िल्टर खोज बॉक्स का उपयोग करके विशेष नियमों की खोज भी कर सकते हैं।

स्टाइल फलक बस इतना ही सक्षम है कि, हालांकि। स्टाइल फलक के कई कार्यों के पूर्ण स्पष्टीकरण के लिए Google के दस्तावेज़ देखें।

बॉक्स मॉडल और संगणित शैली

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

इस मामले में मैं देख सकता हूं कि मेरे तत्व का प्राथमिक आकार 461 x 20 9 पिक्सेल है। इसमें कोई मार्जिन, सीमा या पैडिंग नियम नहीं हैं, इसलिए वे बॉक्स खाली हैं।

यदि आप कुछ स्थिति, मार्जिन, सीमा या पैडिंग नियमों के साथ कोई तत्व चुनते हैं, तो आपका बॉक्स मॉडल इस तरह दिख सकता है।

यदि आप इंस्पेक्ट एलिमेंट टूल सक्षम के साथ डोम तत्वों पर माउस करते हैं तो आप एक सीटू बॉक्स मॉडल में भी देख सकते हैं।

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

अंत में, आप फ़िल्टर बॉक्स में टाइप करके विशेष नियमों की खोज कर सकते हैं।

निष्कर्ष

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