एलिमेंट इंस्पेक्टर ट्रिक्स: 8 हैक्स! 🛠️

एलिमेंट इंस्पेक्टर ट्रिक्स: 8 जरूरी हैक्स! 🛠️

आपके ब्राउज़र में एलिमेंट इंस्पेक्टर केवल डेवलपर के लिए ही उपलब्ध टूल जैसा प्रतीत हो सकता है, लेकिन वास्तव में आप इसके साथ कुछ बहुत अच्छे काम कर सकते हैं, भले ही आपको प्रोग्रामिंग के बारे में कुछ भी पता न हो! 🚀

1 . छवियाँ डाउनलोड करें

आपको किसी वेबसाइट से छवि डाउनलोड करने की आवश्यकता हो सकती है। आप राइट-क्लिक करके “इमेज सहेजें” दबाने का प्रयास करते हैं, और पाते हैं कि विकल्प अक्षम है या “इमेज सहेजें” बटन दिखाई नहीं देता है। कभी-कभी, आप केवल छवि का थंबनेल ही डाउनलोड कर पाते हैं, पूरी फ़ाइल नहीं। 🤔 क्या हो रहा है?

डेवलपर्स अक्सर जानबूझकर “छवि सहेजें” बटन को अक्षम कर देते हैं, या ऐसे वेब फ्रेमवर्क का उपयोग करते हैं जो इस तरह से छवि डाउनलोड करने की अनुमति नहीं देता है। लेकिन एलिमेंट इंस्पेक्टर में एक आसान समाधान मौजूद है। आप किसी भी छवि संसाधन को किसी वेबसाइट से पूर्ण आकार में तीन सरल चरणों में प्राप्त कर सकते हैं। 📸

कभी-कभी ये छवियाँ लाइसेंसिंग कारणों से अवरुद्ध और कॉपीराइट, इसलिए सावधान रहें और कानूनी मुद्दों से बचने के लिए उचित उपयोग पर टिके रहें। ⚖️

स्टेप 1

करता है पर राइट क्लिक करें पृष्ठ पर कहीं भी क्लिक करें और “तत्व का निरीक्षण करें” या “निरीक्षण करें” चुनें। आप अपने ब्राउज़र में इंस्पेक्टर के लिए विशिष्ट कीबोर्ड शॉर्टकट का भी उपयोग कर सकते हैं। एफ12 अधिकांश ब्राउज़रों में काम करता है और ऑपरेटिंग सिस्टम. मैं इस डेमो के लिए फ़ायरफ़ॉक्स का उपयोग कर रहा हूं, लेकिन चरण समान हैं। 🖱️

चरण दो

एलिमेंट इंस्पेक्टर विंडो में, “नेटवर्क” टैब पर क्लिक करें। नेटवर्क टैब में एक उपमेनू के रूप में “इमेज” होना चाहिए। “छवियाँ” पर क्लिक करें। 🖼️

अब पृष्ठ को पुनः लोड करें ताकि सभी छवि संसाधन “छवियाँ” टैब में दिखाई दें। उपयोग पता बार के बगल में रिफ्रेश बटन अपने ब्राउज़र से या Ctrl+R दबाएँ। 🔄

इंस्पेक्ट एलिमेंट का उपयोग करके छवि को सहेजना।

चरण 3

आखिर तुमने इसे हासिल कर ही लिया है। संपूर्ण छवि लाइब्रेरी सूची में लोड होनी चाहिए। सूची गतिशील रूप से अपडेट होती रहती है, इसलिए जैसे-जैसे वेबसाइट पर अधिक छवियां अपलोड होंगी, वे यहां भी दिखाई देंगी। 🖼️✨

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

एलिमेंट इंस्पेक्टर का उपयोग करके छवि फ़ाइल को सहेजना।

2 . वीडियो डाउनलोड करें

छवि संपत्तियों की तरह, कभी-कभी वेबसाइटें अनुमति नहीं देती हैं स्राव होना वीडियो सीधे. लेकिन आप उन्हें एलिमेंट इंस्पेक्टर में लोड करके डाउनलोड कर सकते हैं। एक बार इंस्पेक्टर में लोड हो जाने के बाद, फ़ाइल नाम पर डबल-क्लिक करके उसे नए टैब में खोलें। 🎥

स्टेप 1

F12 कीबोर्ड शॉर्टकट दबाकर एलिमेंट इंस्पेक्टर विंडो खोलें (अधिकांश सिस्टम पर यह काम करेगा)। वैकल्पिक रूप से, आप वेब पेज पर कहीं भी राइट-क्लिक कर सकते हैं और "निरीक्षण" का चयन कर सकते हैं। एलिमेंट इंस्पेक्टर विंडो दिखाई देनी चाहिए। 🖱️

चरण दो

वीडियो फ़ाइलों को छोड़कर बाकी सब कुछ फ़िल्टर करने के लिए “नेटवर्क” टैब और फिर “मीडिया” पर क्लिक करें। पृष्ठ को पुन: लोड करें। या तो ब्राउज़र रिफ्रेश बटन पर क्लिक करके या Ctrl+R दबाकर। 🔄

फ़ायरफ़ॉक्स में एलिमेंट्स इंस्पेक्टर का उपयोग करके मीडिया फ़ाइलें लोड करना।

चरण 3

वीडियो फ़ाइलें एक सूची में लोड होनी चाहिए. आप तुरन्त पूर्वावलोकन नहीं कर सकते, लेकिन आप किसी फ़ाइल पर डबल-क्लिक करके उसे नए टैब में खोल सकते हैं। वहां, आप राइट-क्लिक करके इसे डाउनलोड कर सकते हैं। 🎬

निरीक्षण तत्व का उपयोग करके वीडियो फ़ाइल को सहेजना।

3 . पूरे पेज का स्क्रीनशॉट कैप्चर करें

यदि आप संपूर्ण वेब पेज को सहेजना चाहते हैं, तो आप इसे तुरंत PDF या HTML फ़ाइल के रूप में डाउनलोड कर सकते हैं। लेकिन क्या होगा यदि आप पूरे पृष्ठ की एक नियमित फोटो लेना चाहें? यहाँ मैं समझाऊंगा कि यह कैसे करना है. 📸

फ़ायरफ़ॉक्स में संदर्भ मेनू में एक समर्पित स्क्रीनशॉट टूल है, इसलिए मैं आपको यह दिखाने जा रहा हूं कि यह कैसे किया जाता है गूगल क्रोम और अन्य ब्राउज़र. 🌐

पृष्ठ पर कहीं भी राइट-क्लिक करके या F12 दबाकर इंस्पेक्टर टूल खोलें।

क्रोम में इंस्पेक्ट एलिमेंट का उपयोग करके पूरे पृष्ठ का स्क्रीनशॉट लेना।

रन विंडो खोलने के लिए Ctrl+Shift+P दबाएँ। मैने लिखा का कैप्चर कैप्चर पूर्ण आकार की स्क्रीन इस विंडो में. इस पर क्लिक करें। 📄

एक “इस रूप में सहेजें” विंडो तुरंत दिखाई देगी, जो आपको पूर्ण-पृष्ठ स्क्रीनशॉट को JPG के रूप में सहेजने की अनुमति देगी। 💾

क्रोम में निरीक्षण तत्व का उपयोग करके पूर्ण पृष्ठ का स्क्रीनशॉट सहेजना।

4 . कल्पना करें कि आप फ़ोन पर हैं

अधिकांश वेबसाइटें डिवाइस के प्रकार और स्क्रीन आकार के आधार पर अलग-अलग तरीके से लोड होती हैं। यदि आप साइट को यह विश्वास दिलाना चाहते हैं कि आप एक अलग डिवाइस का उपयोग कर रहे हैं (किसी भी कारण से), तो आप इंस्पेक्टर टूल का उपयोग करके आसानी से ऐसा कर सकते हैं। 📱

क्रोम में, राइट-क्लिक मेनू से या F12 के साथ एलिमेंट्स इंस्पेक्टर विंडो खोलें। फिर ऊपरी बाएं कोने में छोटे लैपटॉप और फोन आइकन पर क्लिक करें। फ़ायरफ़ॉक्स में भी एक ऐसा ही बटन है, जिसे रिस्पॉन्सिव डिज़ाइन मोड (Ctrl+Shift+M) कहा जाता है। 🖥️

Chrome में डिफ़ॉल्ट उपयोगकर्ता एजेंट बदलना.

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

5 . स्रोतों की पहचान करें

यह टिप रचनात्मक लोगों के लिए है, लेकिन वेबसाइट पर फॉन्ट के बारे में जानने की इच्छा रखने वाला कोई भी व्यक्ति इस ट्रिक का उपयोग कर सकता है। आप इसका उपयोग कर सकते हैं निरीक्षक उपकरण की पहचान करने के लिए और कभी-कभी फ़ॉन्ट भी डाउनलोड कर लेते हैं। 🖋️

सबसे पहले, तत्व निरीक्षण उपकरण खोलें। इसके बाद, “नेटवर्क” टैब पर क्लिक करें (यह ओवरफ़्लो मेनू में छिपा हो सकता है) और “स्रोत” चुनें।

इंस्पेक्ट एलिमेंट का उपयोग करके फ़ॉन्ट की पहचान करना और डाउनलोड करना।

फिर Ctrl+R दबाएं. प्रस्तुत फ़ॉन्ट्स को सूची में लोड किया जाएगा, संभवतः WOFF प्रारूप में। आप फ़ॉन्ट नाम पर डबल-क्लिक करके उन्हें सीधे डाउनलोड कर सकते हैं। उदाहरण के लिए, हाउ-टू गीक रोबोटो को अपने डिफ़ॉल्ट फ़ॉन्ट के रूप में उपयोग करता है। 🔤

यदि आपको फ़ॉन्ट के बारे में अधिक विस्तृत जानकारी चाहिए, तो “एलिमेंट्स” टैब पर जाएं और “स्टाइल्स” चुनें। फ़ॉन्ट फ़ैमिली प्रॉपर्टी तक नीचे स्क्रॉल करें और उस पर क्लिक करें। संबंधित पाठ वेब पेज पर हाइलाइट किया जाएगा। इस तरह आप स्रोत की सटीक पहचान कर सकते हैं। 🎨

पृष्ठ के स्रोत कोड में विस्तृत स्रोत जानकारी.

6 . पृष्ठ पर पाठ संपादित करें (अस्थायी रूप से)

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

भले ही आपको कोडिंग के बारे में कुछ भी पता न हो, आप किसी भी वेब पेज पर मूल पाठ को संपादित कर सकते हैं। यह आपके दोस्तों के साथ खेलने के लिए एक मजेदार छोटी शरारत हो सकती है। 😉

उस पृष्ठ पर पाठ को हाइलाइट करें जिसे आप संपादित करना चाहते हैं और उस पर राइट-क्लिक करें। फिर “निरीक्षण करें” या “तत्व का निरीक्षण करें” चुनें।

प्रासंगिक टेक्स्ट स्निपेट एलिमेंट्स टैब में दिखाई देना चाहिए. बस डबल क्लिक करें और टेक्स्ट को अपनी इच्छानुसार किसी भी चीज़ से बदल दें। ✏️

तत्व निरीक्षक को बंद करें और बस! याद रखें कि यदि आप पृष्ठ को पुनः लोड करेंगे तो आपके परिवर्तन पूर्ववत हो जाएंगे। 🔄

7 . आइटम हटाएँ

टेक्स्ट संपादन की तरह, आप वेब पेज से विशिष्ट तत्वों को भी हटा सकते हैं। पुनः, परिवर्तन केवल तब तक ही रहेंगे जब तक आप पृष्ठ को पुनः लोड नहीं करते। ❌

उस तत्व पर राइट-क्लिक करें जिसे आप हटाना चाहते हैं, फिर “निरीक्षण करें” या “तत्व का निरीक्षण करें” चुनें।

लेबल पर माउस घुमाएं “

” hasta que se resalte la totalidad del elemento. Luego simplemente presioná la tecla Suprimir. 🔚

इंस्पेक्ट एलिमेंट का उपयोग करके वेब पेज से किसी तत्व को हटाना।

बस ऐसे ही, वह चला गया! 🕵️‍♂️

8 . रंग मान पहचानें

क्रिएटिव के लिए एक और टिप: आप किसी भी RGB और HEX मान प्राप्त कर सकते हैं वेब पेज पर रंग आईड्रॉपर टूल के साथ जो आपको एलिमेंट इंस्पेक्टर में मिलेगा। 🎨

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

रंग गुण के बगल में एक रंगीन वृत्त या वर्ग होना चाहिए। कलर पिकर खोलने के लिए उस पर क्लिक करें और उसके बगल में स्थित आईड्रॉपर आइकन दबाएं। 🖌️

इंस्पेक्ट एलिमेंट में आईड्रॉपर टूल का उपयोग करना।

आप रंग मान खोजने के लिए इस आईड्रॉपर को पृष्ठ पर कहीं भी घुमा सकते हैं। आईड्रॉपर पर क्लिक करने से वह प्रॉपर्टी स्वचालित रूप से आपके द्वारा चुने गए रंग मान से भर जाएगी। यहां से आप इसे आसानी से कॉपी कर सकते हैं। 📋

इंस्पेक्ट एलिमेंट के माध्यम से आईड्रॉपर का उपयोग करना।

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