मैक, विंडोज और आईओएस पर तत्वों का निरीक्षण कैसे करें

डेवलपर्स और UI डिज़ाइनर स्रोत कोड को बदले बिना वेबसाइटों को ऑनलाइन संशोधित करने के लिए तत्व का निरीक्षण करें सुविधा का उपयोग करते हैं। लेकिन वेब डेवलपमेंट कोर्स किए बिना तत्वों का निरीक्षण कैसे करें?

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

आप वेबसाइट लेआउट को बदलने, बिना टेक्स्ट के स्क्रीनशॉट लेने, फोंट बदलने, नंबरों को संशोधित करने और बहुत कुछ करने जैसी कई जादुई तरकीबें कर सकते हैं।

तत्वों का अनायास निरीक्षण करने का तरीका जानने के लिए नीचे एक संक्षिप्त चरण-दर-चरण मार्गदर्शिका प्राप्त करें।

निरीक्षण तत्व क्या है?

इंस्पेक्ट एलिमेंट एक वेब डेवलपमेंट टूल है जो अधिकांश वेब ब्राउज़र में उपलब्ध है। आप जिस वेबसाइट पर जा रहे हैं, उसके फ्रंट-एंड सोर्स कोड को संपादित करने के लिए आप इसका उपयोग कर सकते हैं।

आपके द्वारा किए गए परिवर्तन आपके वेब ब्राउज़र के अंदर सैंडबॉक्स में होते हैं। इसलिए, आप वास्तविक वेबसाइट में कोई परिवर्तन नहीं कर रहे हैं। साथ ही, पृष्ठ को रीफ्रेश करने पर आपके द्वारा किए जाने वाले सतही परिवर्तन हट जाते हैं।

इसका उपयोग करने के कुछ रचनात्मक तरीके यहां दिए गए हैं:

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

विंडोज़ पर तत्वों का निरीक्षण कैसे करें

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

Google क्रोम निरीक्षण उपकरण

• उपयोग करते समय गूगल क्रोम, दाएँ क्लिक करें किसी वेबसाइट पर कहीं भी।
• राइट-क्लिक संदर्भ मेनू पॉप अप होगा।
• नीचे, आप देखेंगे निरीक्षण.
• क्लिक निरीक्षण a पर HTML और CSS कोड देखने के लिए दाईं ओर का पैनल.

मैं क्रोम में राइट क्लिक किए बिना तत्व का निरीक्षण कैसे खोलूं?

विंडोज के लिए गूगल क्रोम पर इंस्पेक्ट एलिमेंट टूल खोलने के लिए कुछ आसान शॉर्टकट हैं। ये हॉटकी नीचे दी गई हैं:

• सीटीआरएल + बदलाव + सी
• समारोह कुंजी F12

उपरोक्त हॉटकी विंडोज़ के लिए मोज़िला ब्राउज़र पर भी काम करती हैं।

मोज़िला इंस्पेक्टर टूल

मोज़िला ब्राउज़र पर, प्रक्रिया Google क्रोम के समान ही है। हालांकि निरीक्षक विंडो ब्राउज़र के दाईं ओर के बजाय नीचे की ओर दिखाई देगी, जैसा कि Google Chrome में होता है।

Microsoft एज निरीक्षण उपकरण

हैरानी की बात है कि माइक्रोसॉफ्ट एज का इंस्पेक्ट एलिमेंट गूगल क्रोम ब्राउजर की तरह ही काम करता है। निरीक्षण उपकरण राइट-क्लिक करने पर उपलब्ध है। साथ ही, HTML और CSS कोड Google Chrome के समान दाईं ओर दिखाई देते हैं।

मैक पर तत्वों का निरीक्षण कैसे करें

क्या आप Apple के Mac कंप्यूटर पर Google Chrome, Mozilla Firefox, या Microsoft Edge का उपयोग कर रहे हैं? यदि हाँ, तो आप विंडोज सेक्शन में ऊपर बताए गए चरणों का पालन करके इंस्पेक्ट एलिमेंट टूल को तैनात कर सकते हैं।

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

मैक पर निरीक्षण तत्व कैसे खोलें

सबसे पहले, आपको मैक पर सफारी पर डेवलपर टूल को सक्रिय करना होगा। ऐसे:

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

आपने Mac के लिए Safari पर डेवलपर टूल को सफलतापूर्वक सक्षम कर लिया है। अब, निरीक्षण तत्व का उपयोग करने के लिए इन चरणों का पालन करें:

• किसी वेबसाइट के किसी भी तत्व जैसे पाठ, या छवि पर, दाएँ क्लिक करें.
• एक संदर्भ मेनू दिखाई देगा। नीचे, आप देखेंगे तत्व का निरीक्षण.
• HTML और दिखाने वाली वेबसाइट के नीचे एक डिबग सेक्शन खोलने के लिए उस पर क्लिक करें सीएसएस कोड।

निरीक्षण तत्व के लिए कुंजी क्या हैं?

हो सकता है कि आप Mac पर तत्व का निरीक्षण करने के लिए शॉर्टकट खोज रहे हों। आप निम्न का उपयोग कर सकते हैं:

• आज्ञा + बदलाव + सी
• दबाओ नियंत्रण कुंजी और फिर किसी भी तत्व का चयन करें।
• ट्रैकपैड पर दो अंगुलियों से क्लिक करें

Chrome बुक पर तत्वों का निरीक्षण कैसे करें

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

यदि आप कार्यालय या विद्यालय से Chromebook का उपयोग करते हैं, तो आप यह प्रश्न पूछ सकते हैं:

मैं अपने स्कूल के Chrome बुक का निरीक्षण क्यों नहीं कर सकता?

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

IPad/iPhone पर तत्वों का निरीक्षण कैसे करें

दुर्भाग्य से, आप मैक के बिना iPhone या iPad पर इंस्पेक्ट एलिमेंट टूल का उपयोग नहीं कर सकते।

iOS और iPadOS में Safari ऐप के लिए वेब इंस्पेक्टर है। हालांकि, यह तभी काम करता है जब आप मोबाइल डिवाइस को मैक से कनेक्ट करते हैं जिस पर आपने सफारी के लिए पहले से सक्रिय डेवलपर टूल्स को सक्रिय कर दिया है। नीचे वे चरण दिए गए हैं जिन्हें आप आज़मा सकते हैं:

• IPad/iPhone खोलें समायोजन अनुप्रयोग।
• क्लिक सफारी बाईं ओर के नेविगेशन फलक पर।

• फिर, खोजने और चुनने के लिए दाईं ओर नीचे स्क्रॉल करें विकसित.

• के लिए टॉगल सक्रिय करें वेब इंस्पेक्टर.
• अब, मोबाइल डिवाइस को मैक का उपयोग करके कनेक्ट करें USB.
• Mac पर iPhone/iPad को अधिकृत करें।
• सफारी पर मोबाइल डिवाइस पर कोई भी वेबसाइट खोलें।
• अब, Mac पर Safari चलाएँ और चुनें विकास करना शीर्ष मेनू बार पर।
• खुलने वाले संदर्भ मेनू पर, अपने मोबाइल डिवाइस का नाम देखें।
• सभी खुली वेबसाइटों को देखने के लिए कर्सर को मोबाइल डिवाइस पर होवर करें।
• अब, मैक के सफ़ारी ब्राउज़र पर HTML और CSS स्रोत कोड देखने के लिए किसी भी वेबसाइट का चयन करें।

निष्कर्ष

आपने अस्थायी वेब पेज संपादन के लिए इंस्पेक्ट एलिमेंट टूल का उपयोग करने के सभी संभावित तरीकों की खोज की है। आपने यह भी सीखा है कि Mac, Windows, Chromebook, iPad और iPhone जैसे विभिन्न उपकरणों के तत्वों का निरीक्षण कैसे किया जाता है।

अगली बार जब आपको मनोरंजन के लिए या पेशेवर जरूरतों के लिए किसी वेब पेज को संशोधित करने की आवश्यकता हो, तो इन तरीकों को आज़माएं। अन्य जटिल तरीकों की तुलना में आप निश्चित रूप से इन आसान कदमों को पसंद करेंगे।

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

एक मुद्रित संदर्भ के रूप में एक वेब पेज की आवश्यकता है? करना सीखें जल्दी से एक वेब पेज को पीडीएफ के रूप में सेव करें अब!