किसी भी वेब पेज के एचटीएमएल और सीएसएस देखें
वेबसाइट कोड की रेखाओं के साथ बनाई गई है, लेकिन परिणाम छवियों, वीडियो, फोंट और अधिक के साथ विशिष्ट पृष्ठ हैं। उन तत्वों में से किसी एक को बदलने या देखने के लिए कि इसमें क्या शामिल है, आपको उस कोड की विशिष्ट पंक्ति को ढूंढना है जो इसे नियंत्रित करता है। आप इसे एक तत्व निरीक्षण उपकरण के साथ कर सकते हैं।
अधिकांश वेब ब्राउज़र आपको एक निरीक्षण उपकरण डाउनलोड नहीं करते हैं या एड-ऑन इंस्टॉल नहीं करते हैं। इसके बजाए, वे आपको पृष्ठ तत्व पर राइट-क्लिक करने देते हैं और तत्व का निरीक्षण या निरीक्षण करते हैं । हालांकि, प्रक्रिया आपके ब्राउज़र में थोड़ा अलग हो सकती है।
क्रोम में तत्वों का निरीक्षण करें
Google क्रोम के नवीनतम संस्करण आपको पृष्ठ को कुछ तरीकों से निरीक्षण करने देते हैं, जिनमें से सभी अपने अंतर्निहित क्रोम DevTools का उपयोग करते हैं:
- पृष्ठ (या खाली क्षेत्र) पर कुछ राइट-क्लिक करें और निरीक्षण का चयन करें
- Ctrl + Shift + I कीबोर्ड शॉर्टकट दर्ज करें
- अधिक टूल्स> डेवलपर टूल विकल्प तक पहुंचने के लिए क्रोम मेनू का उपयोग करें
क्रोम DevTools आपको आसानी से एचटीएमएल लाइनों की प्रतिलिपि बनाने या संपादित करने या तत्वों को छिपाने या हटाने के लिए चीजें करने की अनुमति देता है (पृष्ठ रीलोड होने तक)।
एक बार DevTools पृष्ठ के किनारे खुलता है, तो आप इसे स्थानांतरित कर सकते हैं, इसे पृष्ठ से बाहर पॉप कर सकते हैं, सभी पृष्ठ की फ़ाइलों की खोज कर सकते हैं, विशिष्ट परीक्षा के लिए पृष्ठ से तत्वों का चयन कर सकते हैं, फाइलों और यूआरएल की प्रतिलिपि बना सकते हैं, और यहां तक कि एक गुच्छा भी अनुकूलित कर सकते हैं सेटिंग्स का।
फ़ायरफ़ॉक्स में तत्वों का निरीक्षण करें
क्रोम की तरह, फ़ायरफ़ॉक्स में इंस्पेक्टर नामक टूल को खोलने के कुछ अलग-अलग तरीके हैं:
- पृष्ठ पर एक रिक्त क्षेत्र पर राइट-क्लिक करें या एक तत्व चुनें, और निरीक्षण तत्व का चयन करें
- कुंजीपटल के साथ Ctrl + Shift + T या Ctrl + Shift + I दर्ज करें
- फ़ायरफ़ॉक्स मेनू से, डेवलपर > इंस्पेक्टर पर क्लिक करें
- टूल्स मेनू से, वेब डेवलपर> इंस्पेक्टर पर क्लिक करें
जैसे ही आप फ़ायरफ़ॉक्स में अपने माउस को विभिन्न तत्वों पर ले जाते हैं, इंस्पेक्टर टूल स्वचालित रूप से तत्व की स्रोत कोड जानकारी पाता है। एक तत्व पर क्लिक करें और "ऑन-द-फ्लाई सर्च" रुक जाएगी और आप इंस्पेक्टर विंडो से तत्व की जांच कर सकते हैं।
सभी समर्थित नियंत्रण खोजने के लिए किसी तत्व पर राइट-क्लिक करें। आप एचटीएमएल के रूप में पेज को संपादित करने, आंतरिक या बाहरी एचटीएमएल कोड की प्रतिलिपि बनाने या पेस्ट करने, डीओएम गुणों, स्क्रीनशॉट या नोड को हटाने, आसानी से नए विशेषताओं को लागू करने, सभी पेज के सीएसएस को देखने और अन्य चीज़ों को संपादित करने जैसी चीजें कर सकते हैं।
ओपेरा में तत्वों का निरीक्षण करें
ओपेरा तत्वों का भी निरीक्षण कर सकता है, इसके साथ डोम इंस्पेक्टर टूल है जो क्रोम के समान है। यहां पहुंचने का तरीका बताया गया है:
- कुंजीपटल शॉर्टकट Ctrl + Shift + I का प्रयोग करें
- मेनू> अधिक टूल्स> डेवलपर मेनू दिखाएं , और फिर मेनू> डेवलपर> डेवलपर टूल के माध्यम से मेनू खोलें
- पृष्ठ पर किसी भी तत्व पर राइट-क्लिक मेनू से, तत्व का निरीक्षण करें चुनें
इंटरनेट एक्सप्लोरर में तत्वों का निरीक्षण करें
डेवलपर टूल्स नामक एक समान निरीक्षण तत्व उपकरण, इंटरनेट एक्सप्लोरर में उपलब्ध है:
- कीबोर्ड पर F12 दबाएं
- टूल्स> एफ 12 डेवलपर मेनू विकल्प का उपयोग करें (यदि आप टूल्स मेनू नहीं देखते हैं तो Alt + X दबाएं)
- पृष्ठ पर राइट-क्लिक करें और तत्व का निरीक्षण करें पर क्लिक करें
आईई में इस नए मेनू में एक सिलेक्ट एलिमेंट टूल है जो आपको एचटीएमएल और सीएसएस विवरण देखने के लिए किसी भी पेज तत्व पर क्लिक करने देता है। जब आप डोम एक्सप्लोरर टैब के माध्यम से ब्राउज़ कर रहे हों तो आप तत्व को हाइलाइट करने में आसानी से अक्षम / सक्षम भी कर सकते हैं।
उपर्युक्त ब्राउज़रों में अन्य तत्व इंस्पेक्टर उपकरण की तरह, इंटरनेट एक्सप्लोरर आपको तत्वों को काट, प्रतिलिपि बनाने और पेस्ट करने के साथ-साथ HTML को संपादित करने, विशेषताओं को जोड़ने, शैलियों के साथ तत्वों की प्रतिलिपि बनाने, और भी बहुत कुछ करने देता है।