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

डिवाइस लिंक

• एंड्रॉयड
• Chrome बुक
• Mac
• खिड़कियाँ
• डिवाइस गुम है?

अधिकांश लोग इस बात से अनजान हैं कि उनके निपटान में डेवलपर टूल का खजाना है और यह उनके पसंदीदा ब्राउज़र में छिपा हुआ है।

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

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

अधिकांश ब्राउज़रों में वेबसाइट के तत्वों का निरीक्षण करने के लिए उपकरण होते हैं, लेकिन वे सभी समान रूप से काम करते हैं।

Google क्रोम में निरीक्षण तत्व का उपयोग करना

1. वह वेबसाइट खोलें जिसका आप निरीक्षण करना चाहते हैं।
   
2. पृष्ठ पर कहीं भी राइट-क्लिक करें और निरीक्षण करें चुनें .
   
   या
3. अपने टूलबार के दाहिने कोने में तीन लंबवत बिंदुओं पर क्लिक करें ।
   
4. अधिक टूल पर जाएं .
   
5. डेवलपर टूल्स का चयन करें ।
   
   या
6. PC पर F12 कीबोर्ड शॉर्टकट कुंजी दबाएं (या Mac पर CMD + विकल्प + I। )
   

माइक्रोसॉफ्ट एज में निरीक्षण तत्व का उपयोग करना

1. एक वेबसाइट खोलें।
   
2. ब्राउज़र के टूलबार के ऊपरी दाएँ कोने में तीन लंबवत बिंदुओं पर क्लिक करें ।
   
3. नीचे स्क्रॉल करें और More Tools पर क्लिक करें ।
   
4. डेवलपर टूल्स पर क्लिक करें ।
   
   या
5. वेबसाइट पर कहीं भी राइट-क्लिक करें और निरीक्षण पर क्लिक करें ।
   
   या
6. Ctrl + Shift + I दबाएं ।
   

इन तीन तरीकों में से कोई भी आपको एक ही परिणाम देगा।

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

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

1. डेवलपर टूल पैनल के ऊपरी कोने में तीन क्षैतिज बिंदुओं पर क्लिक करें ।
   
2. एक डॉक साइड (बाएं, नीचे, या दाएं) का चयन करें या एक अलग विंडो में अनडॉक करें।
   

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

निरीक्षण तत्व (OS विशिष्ट) का उपयोग करना

हालाँकि शामिल किए गए बहुत से चरणों को ब्राउज़र में निरीक्षण तत्व का उपयोग करने का तरीका दिखाकर कवर किया जा सकता है, फिर भी हम आपको दिखाएंगे कि कैसे अधिकांश OS पर।

क्रोमबुक पर निरीक्षण तत्व का उपयोग कैसे करें

Chromebook पर डिफ़ॉल्ट ब्राउज़र Google है, इसलिए तत्व का निरीक्षण करने के लिए क्रोम ब्राउज़र निर्देशों का पालन करें । यहां आपके लिए थोड़ा पुनश्चर्या पाठ्यक्रम है:

1. एक वेबसाइट खोलें।
   
2. टूलबार के ऊपरी दाएं कोने में तीन लंबवत बिंदुओं पर क्लिक करें ।
   
3. अधिक टूल चुनें .
   
4. डेवलपर टूल्स पर क्लिक करें ।
   

डेवलपर टूल पर तेज़ी से पहुंचने के लिए आप राइट-क्लिक विधि या F12 फ़ंक्शन कुंजी का भी उपयोग कर सकते हैं।

Android डिवाइस पर निरीक्षण तत्व का उपयोग कैसे करें

Android डिवाइस पर निरीक्षण तत्व चलाना थोड़ा अलग है। देखें कि Android पर तत्व पैनल का निरीक्षण कैसे करें:

1. F12 फंक्शन कुंजी दबाएं ।
   
2. टॉगल डिवाइस बार चुनें ।
   
3. ड्रॉप-डाउन मेनू से Android डिवाइस का चयन करें।
   

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

यह विधि क्रोम और फ़ायरफ़ॉक्स दोनों ब्राउज़रों के लिए काम करती है क्योंकि उनके डेवलपर टूल में डिवाइस सिमुलेशन नामक सुविधा होती है।

यह iPhone उपकरणों के लिए भी उसी तरह काम करता है। आपको केवल ड्रॉप-डाउन मेनू में सही का चयन करना होगा।

विंडोज में इंस्पेक्ट एलिमेंट का उपयोग कैसे करें

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

यदि आप Windows OS का उपयोग कर रहे हैं, तो संभावना है कि आप Microsoft Edge ब्राउज़र का भी उपयोग कर सकते हैं। एमएस एज पर निरीक्षण तत्व का उपयोग कैसे करें, इसकी जांच करें:

1. वह वेबसाइट खोलें जिसका आप निरीक्षण करना चाहते हैं।
   
2. ब्राउज़र विंडो के कोने पर तीन वर्टिकल डॉट्स पर टैप करें।
   
3. नीचे स्क्रॉल करें और अधिक टूल चुनें .
   
4. डेवलपर टूल्स पर क्लिक करें ।
   

निरीक्षण तत्व को तेजी से एक्सेस करने के लिए आप F12 फ़ंक्शन कुंजी का भी उपयोग कर सकते हैं। साथ ही, वेब पेज पर राइट-क्लिक करना और निरीक्षण कार्यों का भी चयन करना।

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

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

1. सफ़ारी ब्राउज़र खोलें।
   
2. हेडर टैब में सफारी पर क्लिक करें और ड्रॉप-डाउन मेनू से प्राथमिकताएं चुनें।
   
3. स्क्रीन के शीर्ष पर स्थित उन्नत गियर आइकन पर क्लिक करें ।
   
4. उस बॉक्स को चेक करें जो कहता है मेनू बार में विकास मेनू दिखाएं ।
   

इन चरणों के माध्यम से जाने से आपके ब्राउज़र पर निरीक्षण तत्व सुविधा सक्षम हो जाती है। यदि आप पहले निरीक्षण तत्व को सक्षम नहीं करते हैं, तो वेबसाइट खोलने पर आपको विकल्प दिखाई नहीं देगा।

इस चरण को पूरा करने के बाद, बस किसी भी खुले वेब पेज पर राइट-क्लिक करें और निरीक्षण करें चुनें। आप त्वरित कुंजी आदेश का भी उपयोग कर सकते हैं: CMD + Option + I (निरीक्षण)।

IOS पर इंस्पेक्ट एलिमेंट का उपयोग कैसे करें

क्या आप इंस्पेक्ट एलिमेंट्स फीचर का उपयोग यह देखने के लिए करना चाहते हैं कि आईफोन पर वेब पेज का मोबाइल संस्करण कैसा दिखता है? आप यह और बहुत कुछ कर सकते हैं बस कुछ सरल चरणों के साथ। लेकिन इससे पहले कि आप किसी तत्व को देखें, आपको अपने iOS डिवाइस के लिए वेब इंस्पेक्टर को सक्षम करना होगा:

1. सेटिंग में जाएं .
   
2. अब, सफारी का चयन करें ।
   
3. नीचे स्क्रॉल करें और उन्नत मेनू पर टैप करें ।
   
4. अब, वेब इंस्पेक्टर को चालू करने के लिए टॉगल स्विच को टैप करें ।
   

साथ ही, सुनिश्चित करें कि उपरोक्त अनुभाग में चरणों का पालन करके आपके मैक पर डेवलप मेनू सक्षम है।

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

हालाँकि, ध्यान रखें कि ये निर्देश केवल Mac चलाने वाले Safari के लिए काम करते हैं, Windows पर Safari के लिए नहीं।

निरीक्षण तत्व का उपयोग कैसे करें जब यह अवरुद्ध हो

कभी-कभी, आप पाएंगे कि आप किसी वेब पेज का निरीक्षण नहीं कर सकते हैं, और यदि आप उस पर राइट-क्लिक करने का प्रयास करते हैं तो निरीक्षण चयन धूसर हो जाता है। आप सोच सकते हैं कि यह अवरुद्ध है, लेकिन इसके आसपास कई तरीके हैं:

विधि 1 - जावास्क्रिप्ट बंद करें

1. सेटिंग में जाएं ।
   
2. जावास्क्रिप्ट खोजें ।
   
3. जावास्क्रिप्ट बंद करें ।
   

विधि 2 - डेवलपर टूल को लंबे समय तक एक्सेस करें

निरीक्षण करने के लिए माउस पर राइट-क्लिक करने के बजाय, यह करें:

1. अपने ब्राउजर में सेटिंग में जाएं ।
   
2. अधिक टूल चुनें .
   
3. नीचे स्क्रॉल करें और Developer Tools पर क्लिक करें ।
   

विधि 3 - फंक्शन कुंजी का उपयोग करना

आप उन वेब पेजों पर F12 फ़ंक्शन कुंजी का उपयोग करने का भी प्रयास कर सकते हैं जो निरीक्षण के लिए राइट-क्लिक को ब्लॉक करते हैं।

आपके लिए काम करने वाले किसी एक के सामने आने से पहले आपको इन सभी तरीकों को आजमाना पड़ सकता है। अंतिम उपाय के रूप में, आप व्यू-सोर्स टाइप करके सोर्स कोड देखने का भी प्रयास कर सकते हैं: [पूर्ण यूआरएल दर्ज करें] ।

स्कूल के क्रोमबुक पर निरीक्षण तत्व का उपयोग कैसे करें

यदि आपका Chrome बुक किसी स्कूल द्वारा जारी किया गया था, तो तत्व का निरीक्षण करें सुविधा का उपयोग करने में कुछ आसान चरण शामिल हैं:

1. वेब पेज पर राइट-क्लिक या टू-फिंगर टैप करें और निरीक्षण करें चुनें ।
   
2. Ctrl + Shift + I दबाएं ।
   
3. कोशिश करें और व्यू-सोर्स:[url] विधि का उपयोग करें, जैसे व्यू-सोर्स:https://www.wikipedia.com ।
   
   

हालाँकि, कुछ स्कूल और संगठन इस सुविधा को ब्लॉक कर देते हैं, इसलिए यदि यह आपके लिए काम नहीं कर रहा है, तो आपको अपने संगठन या स्कूल व्यवस्थापक से संपर्क करने की आवश्यकता हो सकती है।

उत्तर खोजने के लिए तत्व का निरीक्षण कैसे करें

आप विभिन्न चीजों के उत्तर खोजने के लिए निरीक्षण तत्व का उपयोग कर सकते हैं जैसे:

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

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

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

अतिरिक्त अक्सर पूछे जाने वाले प्रश्न

यदि आप ऊपर पढ़ने के बाद निरीक्षण तत्व के विशेषज्ञ नहीं हैं, तो यहां अधिक उत्तर हैं।

मैं उत्तर खोजने के लिए इंस्पेक्ट एलिमेंट कमांड का उपयोग कैसे करूं?

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

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

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

नहीं, निरीक्षण तत्व उपकरण अवैध नहीं है; यह वेब डेवलपर्स के लिए डिज़ाइन किया गया है। किसी वेबसाइट के लिए स्रोत कोड देखना अवैध नहीं है; यह केवल एक मुद्दा बन जाता है यदि आप एकत्र की गई जानकारी का उपयोग नापाक उद्देश्यों के लिए करते हैं, जैसे शोषण का प्रयास करना, आदि।

क्या ब्राउज़र में निरीक्षण तत्व को अक्षम करना संभव है?

संक्षिप्त जवाब नहीं है।

आप किसी ब्राउज़र में निरीक्षण तत्व को अक्षम नहीं कर सकते हैं, लेकिन आप ऐसे पैरामीटर सेट कर सकते हैं जो उपयोगकर्ताओं को वेब पेज पर राइट-क्लिक करने जैसी कुछ क्रियाओं को करने से रोकते हैं। कुछ घटनाओं को अक्षम करने के लिए उचित स्क्रिप्ट सेट करने के लिए ऑनलाइन कई ट्यूटोरियल हैं। हालाँकि, आप वास्तव में निरीक्षण तत्व सुविधा को उसकी संपूर्णता में अक्षम नहीं कर सकते।

किसी वेब पेज की आंतरिक जानकारी प्राप्त करें

किसी वेब पेज की इंस्पेक्ट एलिमेंट फीचर की जांच करना शायद एक डेवलपर टूल है जिसे आप कभी नहीं जानते थे कि आपको इसकी आवश्यकता है - भले ही आप स्वयं डेवलपर न हों। इसमें ढेर सारे डिज़ाइन और मार्केटिंग एप्लिकेशन हैं जो आपकी वेबसाइट को आसान बना सकते हैं। और शायद आपको एक प्रतियोगी पर बढ़त दे।

आप निरीक्षण तत्व का उपयोग किसके लिए करते हैं? इसके बारे में हमें नीचे टिप्पणी अनुभाग में बताएं।