क्या आप कभी भी वेब पेज को अस्थायी रूप से संपादित करना चाहते हैं यह देखने के लिए कि यह विशिष्ट रंग, फोंट, स्टाइलिंग इत्यादि के साथ कैसे दिखेगा। यह ऐसे उपकरण के साथ संभव है जो आपके ब्राउजर में पहले से ही मौजूद है, जिसे इन्स्पेक्ट एलिमेंट कहा जाता है। यह एक सपना सभी DIY उपयोगकर्ताओं के लिए सच है जब वे इसके बारे में पता लगाते हैं इस लेख में, हम आपको तत्वों का निरीक्षण करने की मूलभूत बातें दिखाएंगे और इसे अपने वर्डप्रेस साइट के साथ कैसे उपयोग करें।
एलिमेंट या डेवलपर टूल का निरीक्षण क्या है?
Google क्रोम और मोज़िला फ़ायरफ़ॉक्स जैसे आधुनिक वेब ब्राउजर में निर्मित उपकरण हैं, जो वेब डेवलपर्स को डिबग त्रुटियों के लिए अनुमति देते हैं। ये टूल एक पृष्ठ के लिए HTML, CSS और JavaScript कोड दिखाते हैं और ब्राउज़र कोड को कैसे कार्यान्वित करता है।
एलीमेंट टूल का निरीक्षण करना, आप किसी भी वेबपेज के लिए एचटीएमएल, सीएसएस या जावास्क्रीप्ट कोड संपादित कर सकते हैं और अपने परिवर्तनों को लाइव देख सकते हैं (केवल आपके कंप्यूटर पर)।
एक DIY वेबसाइट के मालिक के लिए, ये उपकरण आपको पूर्वावलोकन करने में सहायता कर सकते हैं कि प्रत्येक व्यक्ति के लिए वास्तव में बदलाव किए बिना साइट डिज़ाइन कैसे दिखाई देगा।
लेखकों के लिए, ये उपकरण बहुत बढ़िया हैं क्योंकि आप अपने स्क्रीनशॉट लेते समय आसानी से व्यक्तिगत पहचान की जानकारी बदल सकते हैं जिससे आइटम को पूरी तरह से धुंधलाने की आवश्यकता को नष्ट कर दिया जा सकता है।
समर्थन एजेंटों के लिए, यह त्रुटि की पहचान करने का एक शानदार तरीका है जिससे आपकी गैलरी लोड हो रही है या आपके स्लाइडर ठीक से काम नहीं कर सकते हैं।
हम सिर्फ उपयोग-संबंधी मामलों की सतह को खरोंच कर रहे हैं। तत्व का निरीक्षण वास्तव में शक्तिशाली है
इस अनुच्छेद में, हम Google क्रोम में एलीमेंट का निरीक्षण करने पर ध्यान केंद्रित करेंगे क्योंकि यह हमारे पसंद का ब्राउज़र है। फ़ायरफ़ॉक्स के अपने डेवलपर टूल हैं, जिन्हें ब्राउजर मेनू से तत्व का निरीक्षण करके चयन किया जा सकता है।
तैयार? आएँ शुरू करें।
एलिमेंट को लॉन्च करना और कोड को ढूंढना
आप अपने कीबोर्ड पर CTRL + Shift + I कुंजी दबाकर तत्व टूल का निरीक्षण कर सकते हैं। वैकल्पिक रूप से आप किसी वेब पेज पर कहीं भी क्लिक कर सकते हैं और ब्राउज़र मेनू से तत्व का निरीक्षण कर सकते हैं।
आपकी ब्राउज़र विंडो को दो में विभाजित किया जाएगा, और निचली विंडो वेब पेज के स्रोत कोड को दिखाएगी।
डेवलपर टूल विंडो को दो विंडो में विभाजित किया जाता है। आपके बाईं ओर, आपको पृष्ठ के लिए HTML कोड दिखाई देगा। दाहिने हाथ की फलक पर, आप सीएसएस नियम देखेंगे।
जैसा कि आप अपने माउस को HTML स्रोत पर ले जाते हैं, आप वेब पृष्ठ पर प्रभावित क्षेत्र को देखेंगे। आप जो भी तत्व देख रहे हैं उसके लिए सीएसएस दिखाने के लिए सीएसएस नियमों के नियमों को भी देखेंगे।
आप माउस पॉइंटर को किसी वेब पेज पर एक तत्व में भी ले सकते हैं, ठीक क्लिक करें और तत्व का निरीक्षण करें का चयन करें। आप जिस तत्व को इंगित करते हैं उसे स्रोत कोड में हाइलाइट किया जाएगा।
एलीमेंट में जांच और डिबगिंग कोड
निरीक्षण तत्व विंडो में HTML और CSS दोनों संपादन योग्य हैं। आप HTML स्रोत कोड में कहीं भी डबल क्लिक कर सकते हैं और अपने पसंदीदा कोड को संपादित कर सकते हैं।
आप सीएसएस फलक में कोई विशेषताओं और शैलियों को डबल क्लिक और संपादित भी कर सकते हैं। कस्टम शैली नियम जोड़ने के लिए सीएसएस फलक के शीर्ष पर + आइकन पर क्लिक करें।
जब आप सीएसएस या एचटीएमएल में परिवर्तन करते हैं तो ये बदलाव ब्राउज़र में तुरन्त दिखाई देंगे।
ध्यान दें, आप जो भी परिवर्तन करते हैं, वह कहीं भी नहीं बचा है तत्व का निरीक्षण करें एक डीबगिंग टूल है, और यह आपके परिवर्तनों को आपके सर्वर पर फ़ाइलों में वापस नहीं लिखता है। इसका मतलब यह है कि यदि आप पृष्ठ को ताज़ा करते हैं, तो आपके सभी परिवर्तन समाप्त हो जाएंगे।
वास्तव में परिवर्तन करने के लिए, आपको अपने वर्डप्रेस थीम के स्टाइलशीट या प्रासंगिक टेम्पलेट को संपादित करना होगा जो आप सहेजना चाहते हैं।
एलीमेंट टूल का उपयोग करके अपने मौजूदा वर्डप्रेस थीम को संपादित करने से पहले, सुनिश्चित करें कि आप बाल विषय बना कर अपने सभी परिवर्तनों को सहेज लें।
आसानी से आपकी साइट पर त्रुटियों को ढूंढें
तत्व का निरीक्षण करें कंसोल नामक एक क्षेत्र है जो आपकी वेबसाइट पर मौजूद सभी त्रुटियों को दिखाता है। प्लगइन लेखकों से एक त्रुटि को डिबग करने या समर्थन का अनुरोध करने की कोशिश करते समय, यह देखने के लिए हमेशा उपयोगी होता है कि त्रुटियां क्या हैं।
उदाहरण के लिए, यदि आप एक OptinMonster ग्राहक हैं जो सोचते हैं कि आपका ऑप्टीन क्यों नहीं लोड हो रहा है, तो आप आसानी से “आपका पेज स्लग मैच नहीं” समस्या पा सकते हैं।
यदि आपका शेयरबार ठीक से काम नहीं कर रहा था, तो आप देख सकते हैं कि जावास्क्रिप्ट त्रुटि है
एलाइंट एलिमेंट कंसोल और सहायता जैसे उपकरण, बेहतर ग्राहक सहायता प्राप्त करने में सहायता करते हैं क्योंकि तकनीकी सहायता टीम उन ग्राहकों से प्रेम करती है जो इस मुद्दे की विस्तृत प्रतिक्रिया प्रदान करने में पहल करते हैं।
हमें उम्मीद है कि इस आलेख ने आपकी वर्डपेर्स साइट के साथ तत्वों का निरीक्षण करने और इसे कैसे उपयोग किया जाए, इसकी बुनियादी जानकारी प्राप्त करने में आपकी सहायता की है। आप अपने थीम विकास कौशल को गति देने के लिए डिफ़ॉल्ट वर्डप्रेस जेनरेट किए गए सीएसएस धोखा पत्रक पर एक नज़र डाल सकते हैं।