कोडिंग से अपरिचित व्यक्ति के लिए, गलती से Inspect Element खोलने के बाद डरना आसान है। हालांकि, यदि आप जटिल कोड देखने के बाद शांत रहते हैं, तो Inspect Element आपको कई उपयोगी (और कुछ कम उपयोगी) चीजें करने देता है, बशर्ते आप जानते हों कि कैसे करना है।
यहां, हम आपके ब्राउज़र के डेवलपर टूल्स और Inspect Element का उपयोग करके सात मजेदार चीजें देखेंगे।
Inspect Element क्या है?
Inspect Element ब्राउज़रों द्वारा प्रदान किया गया एक डेवलपर टूल है जो किसी भी वेबपेज के सोर्स कोड को देखने और अस्थायी रूप से बदलने की अनुमति देता है। इस टूल का उपयोग करके, डेवलपर्स और डिजाइनर किसी भी वेबसाइट के फ्रंट-एंड की जांच और संशोधन कर सकते हैं।
जैसे ही आप कोड बदलते हैं, ब्राउज़र वेबपेज को रियल-टाइम में अपडेट करता रहता है। यह परिवर्तन केवल तब तक रहता है जब तक आप वेबसाइट पर होते हैं और केवल उसी डिवाइस पर आपको दिखाई देता है। पेज छोड़ते ही सभी परिवर्तन हटा दिए जाते हैं।
1. इमेज और वीडियो डाउनलोड करें
आमतौर पर, आप वेब से फोटो को राइट-क्लिक करके और सेव करके आसानी से डाउनलोड कर सकते हैं। लेकिन आप ऐसा सभी वेबसाइटों पर नहीं कर सकते। इस मामले में, Inspect Element फीचर काम आता है।
किसी भी मीडिया फाइल को डाउनलोड करने के लिए, उस पर राइट-क्लिक करें और Inspect चुनें। <div> टैग्स को एक्सपैंड करें। अब, आप src एट्रिब्यूट के माध्यम से फाइल का सोर्स देख सकते हैं। सोर्स का लिंक कॉपी करें और इसे नए टैब में खोलें। फिर, मीडिया फाइल पर राइट-क्लिक करें और इस रूप में सहेजें विकल्प का उपयोग करके इसे डाउनलोड करें।
2. दोस्तों को प्रैंक करने के लिए हेडर और टेक्स्ट बदलें
स्क्रैच से नकली इमेज बनाने के बजाय, आप DevTools का उपयोग करके वेबपेज पर टेक्स्ट बदल सकते हैं और अपने दोस्तों पर प्रैंक कर सकते हैं।
नकली वेबपेज बनाने के लिए, किसी प्रतिष्ठित वेबसाइट का पेज खोलें और उसके शीर्षक पर राइट-क्लिक करें। फिर, पेन खोलने के लिए Inspect पर क्लिक करें। हाइलाइट किए गए कोड के अधिक आइकन पर क्लिक करें और HTML के रूप में संपादित करें चुनें। फिर शीर्षक को अपने नकली शीर्षक से बदलें।
इसी तरह, आप एक्सर्प्ट, तारीख और लेखक के नाम जैसे टेक्स्ट के अन्य भागों को बदल सकते हैं। इमेज बदलने के लिए, उसी चरण का उपयोग करके इमेज सोर्स को हटा दें। फिर Google से संबंधित इमेज ढूंढें, उसका इमेज एड्रेस कॉपी करें, और इसे सोर्स में पेस्ट करें।
इस तरह, आप बिना ज्यादा परेशानी के अपने दोस्तों पर प्रैंक कर सकते हैं। हालांकि, सुनिश्चित करें कि DevTools पेन को छिपाकर स्क्रीनशॉट भेजें न कि लिंक, क्योंकि परिवर्तन अस्थायी है।
3. वेबपेज के रंग और फॉन्ट बदलें
Inspect Element का उपयोग करके आप किसी भी वेबपेज के रंग और फॉन्ट बदल सकते हैं। जिस ऑब्जेक्ट के रंग आप बदलना चाहते हैं उस पर राइट-क्लिक करें और Inspect चुनें। फिर Styles टैब में, color या background-color ढूंढें और हेक्स कोड दर्ज करें। इसी तरह, आप Styles टैब से फॉन्ट साइज और स्टाइल बदल सकते हैं।
आप इस ट्रिक का उपयोग किसी भी वेबसाइट की उपस्थिति बदलने और इसे पढ़ने में आसान बनाने के लिए कर सकते हैं। उदाहरण के लिए, आप किसी भी वेबसाइट का डार्क मोड बना सकते हैं, पठनीयता बढ़ाने के लिए फॉन्ट साइज बढ़ा सकते हैं, और आपत्तिजनक तत्वों को हटाकर उन्हें हटा सकते हैं।
4. छिपे हुए पासवर्ड देखें
यदि किसी वेबसाइट ने आपके पासवर्ड को एस्टरिस्क से छिपाया है, तो आप वेबपेज कोड को ट्वीक करके इसे देख सकते हैं। छिपे हुए पासवर्ड पर राइट-क्लिक करके DevTools पर जाएं। फिर इनपुट टैग के भीतर, टाइप को password से text में बदलें और खाली स्क्रीन पर क्लिक करें। अब, आपका पासवर्ड दिखाई दे रहा है।
यह ट्रिक तब काम आती है जब आप अपना पासवर्ड भूल जाते हैं लेकिन यह पासवर्ड मैनेजर पर सेव है। तो, आप सीधे वेबपेज से अपना पासवर्ड देख और याद कर सकते हैं।
5. वेबसाइट का मोबाइल संस्करण देखें
हम सभी जानते हैं कि अपने मोबाइल फोन पर डेस्कटॉप साइट कैसे देखें। लेकिन आप डेस्कटॉप पर मोबाइल संस्करण देखने के लिए भी Inspect Element का उपयोग कर सकते हैं। ऐसा करने के लिए, DevTools खोलें और Toggle Device Toolbar बटन (ऊपर दाएं से दूसरा बटन) पर क्लिक करें।
इसी तरह, आप यूजर एजेंट स्विच कर सकते हैं और वेबसाइट के विभिन्न संस्करण देख सकते हैं। डेवलपर टूल्स में, ऊपरी-बाएं कोने में अधिक आइकन पर क्लिक करें और नेटवर्क स्थितियां चुनें। User Agent अनुभाग में डिफ़ॉल्ट ब्राउज़र का उपयोग करें बॉक्स को अनचेक करें और नीचे ड्रॉप-डाउन मेनू से कोई अन्य यूजर एजेंट चुनें।
6. वेबसाइट से रंग चुनें
थर्ड-पार्टी कलर पिकर एक्सटेंशन इंस्टॉल करने के बजाय, अब आप Inspect Element का उपयोग करके अपने पसंदीदा रंग चुन सकते हैं। वेब पेज से कोई भी रंग चुनने के लिए, Inspect Element पर जाएं। फिर, Styles टैब पर जाएं और color या background ढूंढें। अब, color के बाद छोटे बॉक्स पर क्लिक करके कलर पिकर लाएं।
अब आप पेज पर कहीं भी क्लिक करके रंग चुन सकते हैं और Styles टैब से हेक्स कोड कॉपी कर सकते हैं। यदि आप RGB या HSLA कोड चाहते हैं, तो आप उन्हें तीर बटन का उपयोग करके देख सकते हैं।
तो, जब भी आप किसी वेबसाइट पर कोई बढ़िया रंग देखें जिसे आप भविष्य में उपयोग करना चाहें, तो बस Inspect Element का उपयोग करें और संदर्भ के लिए कोड सेव करें।
7. बिना किसी एक्सटेंशन के स्क्रीनशॉट लें
DevTools आपको साफ और स्पष्ट स्क्रीनशॉट लेने की भी अनुमति देता है। स्क्रीनशॉट लेने के लिए, DevTools खोलें, अधिक आइकन पर क्लिक करें, और कमांड चलाएं चुनें। सर्च बॉक्स में screenshot टाइप करें। आपको स्क्रीनशॉट कैप्चर करने के चार अलग-अलग विकल्प दिखाई देंगे।
क्षेत्र स्क्रीनशॉट चुनकर, आप विंडो पर किसी विशेष क्षेत्र को हाइलाइट कर सकते हैं, और आपका ब्राउज़र इसे PNG फाइल के रूप में सेव करता है।
पूर्ण-आकार का स्क्रीनशॉट कैप्चर करने से पूरे वेबपेज की एक इमेज सेव होती है, जिसमें वे चीजें भी शामिल होती हैं जो आपकी स्क्रीन पर दिखाई नहीं देतीं। एक नोड स्क्रीनशॉट केवल विशेष तत्व की इमेज कैप्चर करता है। अंत में, स्क्रीनशॉट कैप्चर विकल्प आपकी स्क्रीन पर दिखाई देने वाली हर चीज की इमेज सेव करता है।
Inspect Element के छिपे हुए ट्रिक्स सीखें
ये Inspect Element का उपयोग करके आप कर सकने वाले कुछ ट्रिक्स थे। DevTools का उपयोग करके आप कई अन्य उपयोगी चीजें कर सकते हैं।
तो यदि आप एक पावर यूजर बनना चाहते हैं और अपने दोस्तों को प्रभावित करना चाहते हैं, तो DevTools की अधिक छिपी हुई विशेषताओं को सीखना एक अच्छा विचार है।
