कोडिंग से अपरिचित व्यक्ति के लिए, इंस्पेक्ट एलिमेंट को गलती से खोलने के बाद डरना आसान है। हालांकि, यदि आप जटिल कोड को देखने के बाद शांत रहते हैं, तो Inspec Element आपको उपयोगी (और कुछ अनुपयोगी) चीजों का एक गुच्छा करने देता है, बशर्ते आप इसे करना जानते हों।
यहां, हम उन सात मजेदार चीजों को देखेंगे जो आप अपने ब्राउज़र के डेवलपर टूल और इंस्पेक्ट एलीमेंट का उपयोग करके कर सकते हैं।
निरीक्षण तत्व क्या है?
इंस्पेक्ट एलिमेंट एक डेवलपर टूल है जो ब्राउज़र द्वारा किसी भी वेबपेज के सोर्स कोड को देखने और अस्थायी रूप से बदलने के लिए पेश किया जाता है। इस टूल का उपयोग करके, डेवलपर और डिज़ाइनर किसी भी वेबसाइट के फ्रंट-एंड को चेक और संशोधित कर सकते हैं।
जैसे ही आप कोड बदलते हैं, ब्राउज़र वास्तविक समय में वेबपेज को अपडेट करता रहता है। यह परिवर्तन केवल तब तक चलता है जब तक आपका सत्र वेबसाइट पर रहता है और केवल एक डिवाइस पर आपको दिखाई देता है। जैसे ही आप वेबपेज छोड़ते हैं, सभी परिवर्तन हटा दिए जाएंगे।
1. चित्र और वीडियो डाउनलोड करें
आमतौर पर, आप वेब से फ़ोटो को राइट-क्लिक करके और उन्हें सहेज कर आसानी से डाउनलोड कर सकते हैं। लेकिन आप सभी वेबसाइटों पर ऐसा नहीं कर सकते। ऐसे में इंस्पेक्ट एलिमेंट फीचर काम आता है।
किसी भी मीडिया फ़ाइल को डाउनलोड करने के लिए, उस पर राइट-क्लिक करें और निरीक्षण चुनें .
2. हेडर और टेक्स्ट को प्रैंक फ्रेंड्स में बदलें
खरोंच से नकली छवि बनाने के बजाय, आप वेबपेज पर टेक्स्ट बदलने और अपने दोस्तों पर मज़ाक करने के लिए DevTools का उपयोग कर सकते हैं।
फेक वेबपेज बनाने के लिए किसी भी नामी वेबसाइट का पेज खोलें और उसके टाइटल पर राइट क्लिक करें। फिर, निरीक्षण . पर क्लिक करें फलक खोलने के लिए। अधिक . पर क्लिक करें हाइलाइट किए गए कोड का आइकन और HTML के रूप में संपादित करें चुनें . फिर शीर्षक को अपने स्वयं के नकली शीर्षक से बदलें।
इसी तरह, आप अंश, तिथि और लेखक का नाम जैसे पाठ के अन्य निकायों को बदल सकते हैं। छवि को बदलने के लिए, समान चरणों का उपयोग करके छवि स्रोत को हटा दें। फिर Google से संबंधित चित्र ढूंढें, उसके चित्र पते की प्रतिलिपि बनाएँ, और उसे स्रोत में चिपकाएँ।
इस तरह, आप बिना ज्यादा परेशानी के अपने दोस्तों के साथ मजाक कर सकते हैं। हालाँकि, स्क्रीनशॉट को लिंक के बजाय छिपे हुए DevTools फलक के साथ भेजना सुनिश्चित करें, क्योंकि परिवर्तन अस्थायी है।
3. वेबपेज के रंग और फ़ॉन्ट बदलें
एक और डरपोक चीज जो आप निरीक्षण तत्व का उपयोग करके कर सकते हैं वह है किसी भी वेबपेज के रंग और फ़ॉन्ट को बदलना। उस वस्तु पर राइट-क्लिक करें जिसका रंग आप बदलना चाहते हैं और निरीक्षण चुनें . फिर शैलियों . में टैब, रंग या पृष्ठभूमि रंग ढूंढें और हेक्स कोड दर्ज करें। इसी तरह, आप शैलियाँ टैब से फ़ॉन्ट आकार और शैली बदल सकते हैं।
आप इस ट्रिक का उपयोग किसी भी वेबसाइट का रूप बदलने और उसे पढ़ने में आसान बनाने के लिए कर सकते हैं। उदाहरण के लिए, आप किसी भी वेबसाइट का डार्क मोड बना सकते हैं, पठनीयता बढ़ाने के लिए फ़ॉन्ट का आकार बढ़ा सकते हैं और आपत्तिजनक तत्वों को हटाकर हटा सकते हैं।
4. छिपे हुए पासवर्ड देखें
यदि किसी वेबसाइट ने आपका पासवर्ड तारक से छिपाया है, तो आप वेबपेज कोड को देखने के लिए उसमें बदलाव कर सकते हैं। DevTools . पर जाएं छिपे हुए पासवर्ड पर राइट-क्लिक करके। फिर इनपुट टैग के भीतर, टाइप को पासवर्ड से टेक्स्ट में बदलें और ब्लैंक स्क्रीन पर क्लिक करें। अब, आपका पासवर्ड दिखाई दे रहा है।
यह ट्रिक तब काम आती है जब आप अपना पासवर्ड भूल जाते हैं लेकिन क्या इसे पासवर्ड मैनेजर पर सहेजा जाता है। इसलिए, आप सीधे वेबपेज से अपना पासवर्ड देख और याद रख सकते हैं।
5. किसी वेबसाइट का मोबाइल संस्करण देखें
हम सभी जानते हैं कि अपने मोबाइल फोन पर डेस्कटॉप साइट को कैसे देखा जाता है। लेकिन आप डेस्कटॉप पर मोबाइल संस्करण देखने के लिए निरीक्षण तत्व का भी उपयोग कर सकते हैं। ऐसा करने के लिए, DevTools open खोलें और डिवाइस टूलबार टॉगल करें . पर क्लिक करें बटन (ऊपर दाईं ओर से दूसरा बटन)।
इसी तरह, आप उपयोगकर्ता एजेंटों को स्विच कर सकते हैं और वेबसाइट के विभिन्न संस्करण देख सकते हैं। डेवलपर टूल में, अधिक . पर क्लिक करें ऊपरी-बाएँ कोने में आइकन और नेटवर्क की स्थिति चुनें। डिफ़ॉल्ट ब्राउज़र का उपयोग करें को अनचेक करें उपयोगकर्ता एजेंट . में बॉक्स अनुभाग और नीचे दिए गए ड्रॉप-डाउन मेनू से कोई अन्य उपयोगकर्ता एजेंट चुनें।
6. वेबसाइट से रंग चुनें
तृतीय-पक्ष रंग बीनने वाले एक्सटेंशन को स्थापित करने के बजाय, अब आप निरीक्षण तत्व का उपयोग करके अपने पसंदीदा रंग चुन सकते हैं। वेब पेज से कोई भी रंग चुनने के लिए, तत्व का निरीक्षण करें . पर जाएं . फिर, शैलियों . पर जाएं टैब और रंग या पृष्ठभूमि खोजें। अब, कलर पिकर लाने के लिए रंग के बाद छोटे बॉक्स पर क्लिक करें।
अब आप रंग चुनने के लिए पेज पर कहीं भी क्लिक कर सकते हैं और शैलियों से हेक्स कोड को कॉपी कर सकते हैं टैब। यदि आप RGB या HSLA कोड चाहते हैं, तो आप तीर . का उपयोग करके उन्हें देख सकते हैं बटन।
इसलिए, जब भी आप किसी भी वेबसाइट पर एक अच्छा रंग देखते हैं जिसे आप भविष्य में उपयोग करना चाहते हैं, तो बस इंस्पेक्ट एलीमेंट का उपयोग करें और संदर्भ के लिए कोड को सेव करें।
7. बिना किसी एक्सटेंशन के स्क्रीनशॉट लें
DevTools आपको साफ और स्पष्ट स्क्रीनशॉट लेने की भी अनुमति देता है। स्क्रीनशॉट लेने के लिए, DevTools open खोलें , अधिक . पर क्लिक करें आइकन पर क्लिक करें और एक कमांड चलाएँ . चुनें . सर्च बॉक्स में, स्क्रीनशॉट टाइप करें। आपको चार अलग-अलग प्रकार के स्क्रीनशॉट लेने के विकल्प दिखाई देंगे।
एक क्षेत्र स्क्रीनशॉट चुनकर, आप विंडो पर किसी विशेष क्षेत्र को हाइलाइट कर सकते हैं, और आपका ब्राउज़र इसे पीएनजी फ़ाइल के रूप में सहेजता है।
फ़ुल-साइज़ स्क्रीनशॉट कैप्चर करने से पूरे वेबपेज की इमेज सेव हो जाती है, जिसमें वे चीज़ें भी शामिल हैं जो आपकी स्क्रीन पर दिखाई नहीं देती हैं। एक नोड स्क्रीनशॉट केवल विशेष तत्व की एक छवि को कैप्चर करता है। अंत में, कैप्चर स्क्रीनशॉट विकल्प आपकी स्क्रीन पर दिखाई देने वाली हर चीज़ की छवि सहेजता है।
निरीक्षण तत्व की छिपी हुई तरकीबें सीखें
ये केवल कुछ तरकीबें थीं जिन्हें आप निरीक्षण तत्व का उपयोग करके कर सकते हैं। आप DevTools का उपयोग करके कई अन्य उपयोगी चीजें कर सकते हैं।
इसलिए यदि आप एक शक्तिशाली उपयोगकर्ता बनना चाहते हैं और अपने दोस्तों को प्रभावित करना चाहते हैं, तो DevTools की अधिक छिपी हुई विशेषताओं को सीखना एक अच्छा विचार है।