CSS को डीबग करने के लिए Google Chrome का उपयोग कैसे करें

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

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

Google क्रोम में निरीक्षण तत्व खोलना

आप किसी भी वेबसाइट पर जा सकते हैं और इंस्पेक्ट एलिमेंट विंडो खोलकर देख सकते हैं कि उसका HTML या CSS कोड कैसा दिखता है। यह ट्यूटोरियल उपयोग करेगा एक नमूना वेबसाइट प्रदर्शित करने के लिए।

आप Google क्रोम में इंस्पेक्ट एलिमेंट विंडो को दबाकर खोल सकते हैं F12 चाबी। आप पेज पर कहीं भी राइट-क्लिक कर सकते हैं और पर क्लिक कर सकते हैं निरीक्षण.

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

Google क्रोम का उपयोग करके वेबसाइट टेक्स्ट संपादित करें.

निरीक्षण तत्व विंडो में शैलियाँ टैब

निरीक्षण तत्व विंडो में ही, के अंतर्गत तत्वों टैब में, HTML और CSS कोड दोनों को देखने के लिए एक जगह है। आप निरीक्षण तत्व विंडो के बाईं ओर HTML कोड देख सकते हैं। आप सीएसएस कोड को दाईं ओर, के तहत पा सकते हैं शैलियों टैब।

मान लें कि आपके पास "कार्ड-पैडिंग" नामक एक वर्ग के साथ एक HTML तत्व है, जिसमें दाएं और बाएं पैडिंग लागू हैं:

कार्ड-पैडिंग {
 पैडिंग-राइट: 0vh;
 पैडिंग-बाएं: 0vh;
}

यदि आपने ब्राउज़र में इस वेबसाइट का पूर्वावलोकन किया है, तो आप इसका चयन करने में सक्षम होंगे डिव "कार्ड-पैडिंग" वर्ग के साथ तत्व। "कार्ड-पैडिंग" वर्ग पर लागू की गई कोई भी शैली के अंतर्गत, दाईं ओर दिखाई देगी शैलियों टैब।

जब आप HTML कोड दृश्य में किसी तत्व पर होवर करते हैं, तो वेब पेज का वह भाग वेब ब्राउज़र में हाइलाइट हो जाएगा। HTML तत्व प्रकार, किसी भी वर्ग के नाम के साथ, तत्व के बगल में एक संवाद बॉक्स में भी प्रदर्शित होगा।

इस मामले में, आप पृष्ठ पर हाइलाइट किए गए वर्ग नाम "पंक्ति", "कार्ड-पैडिंग" और "पीबी -5" के साथ डिव कंटेनर देखेंगे।

वास्तविक समय में CSS में परिवर्तन कैसे करें

आप CSS को सीधे Styles टैब से बदल सकते हैं:

1. का उपयोग करते हुए यह वेबसाइट, पहले शीर्षक पर राइट-क्लिक करें।
2. उस विशेष h4 शीर्षक पर, आप उस पर लागू एक वर्ग देखेंगे जिसे "टेक्स्ट-ग्रे" कहा जाता है जिसका रंग #8a8a8a है।
3. इसके बजाय रंग को किसी और चीज़ में बदलें, जैसे कि नारंगी। आप केवल मूल्य ही बदलना चाहते हैं, न कि संपत्ति का नाम, "रंग"।
4. आप शीर्षक को गहरे भूरे से नारंगी रंग में बदलते हुए देखेंगे।
5. यदि आप किसी विशेष CSS शैली को अक्षम करना चाहते हैं, तो स्टाइल के बाईं ओर स्थित बॉक्स को अनचेक करें।
6. आप मूल सेट में और शैलियाँ भी जोड़ सकते हैं। नई प्रॉपर्टी जोड़ना शुरू करने के लिए बस नीचे या प्रॉपर्टी के दाईं ओर क्लिक करें। नई शैलियों को जोड़ते समय आपको उसी सिंटैक्स का उपयोग करना चाहिए जैसा कि आप नियमित CSS फ़ाइल में करते हैं।
7. यदि आप किसी स्थानीय वेबसाइट का पूर्वावलोकन कर रहे हैं, तो आप तब तक CSS परिवर्तन करना जारी रख सकते हैं जब तक कि आप अपने UI के लिए आवश्यक रूप-रंग के करीब नहीं पहुंच जाते। उसके बाद, आप अपने द्वारा किए गए CSS परिवर्तनों को अपने स्थानीय कोड में कॉपी कर सकते हैं।

तृतीय-पक्ष लाइब्रेरी या फ़्रेमवर्क से CSS को कैसे संशोधित करें

यदि आप तृतीय पक्ष लाइब्रेरी या बूटस्ट्रैप जैसे फ़्रेमवर्क का उपयोग कर रहे हैं, तो आप HTML तत्वों में भी परिवर्तन कर सकते हैं।

1. का उपयोग करते हुए यह वेबसाइट, पृष्ठ पर बूटस्ट्रैप बटनों में से किसी एक पर राइट-क्लिक करें।
2. आप बटन पर लागू दो वर्ग देखेंगे, "बीटीएन" और "बीटीएन-प्राथमिक"। इन दोनों वर्गों के लिए बूटस्ट्रैप की अपनी शैली पहले से ही लागू है। पृष्ठभूमि और बॉर्डर रंगों के रूप में उपयोग किए जा रहे रंग #007bff हैं। इसे किसी और चीज़ में बदलें, जैसे कि वायलेट।
3. यदि आप किसी स्थानीय वेबसाइट का पूर्वावलोकन कर रहे हैं, तो आप अपने नए परिवर्तनों को वापस अपने स्थानीय कोड में जोड़ सकते हैं। आपके सीएसएस के क्रम के आधार पर, आपको इसकी आवश्यकता हो सकती है अधिक विशिष्ट CSS चयनकर्ता का उपयोग करें. उदाहरण के लिए, ".btn" के साथ चयनकर्ता को उपसर्ग करें। यह मूल बूटस्ट्रैप स्टाइल को ओवरराइड करेगा।

   .बीटीएन.btn-प्राथमिक {
    पृष्ठभूमि-रंग: बैंगनी;
    सीमा-रंग: बैंगनी;
   }

एलिमेंट.स्टाइल का स्टाइल्स टैब में क्या मतलब है?

निरीक्षण तत्व विंडो में आपके द्वारा हाइलाइट किए गए प्रत्येक HTML तत्व में एक element.styles ब्लॉक होता है। यह चयनकर्ता का उपयोग करके इसे लक्षित करने के बजाय, HTML तत्व में इनलाइन स्टाइल जोड़ने के बराबर है।

1. HTML तत्व पर राइट-क्लिक करें। Element.style सेक्शन में कोई भी स्टाइल जोड़ें, जैसे:

   रंग: सफेद धुआं;

2. आप देखेंगे कि HTML एलीमेंट का कोड भी बदल गया है। HTML तत्व के भीतर कोड में अब नई पंक्ति है:

   शैली ="रंग: सफेद धुआं;"

बाल HTML तत्व स्टाइलिंग कैसे प्राप्त करते हैं

यदि आपके पास मूल तत्व और बाल तत्व पर लागू दो अलग-अलग स्टाइल मान हैं, तो बाल तत्व में मान को प्राथमिकता दी जाएगी।

1. का उपयोग करते हुए यह वेबसाइट, वेबसाइट के बाहरी किनारों पर कहीं भी राइट-क्लिक करें।
2. निरीक्षण तत्व विंडो के HTML अनुभाग में, दो विशेष HTML तत्वों पर ध्यान केंद्रित करें। उस पर लागू "सामग्री" वर्ग के साथ एक मूल div तत्व है। इस HTML तत्व में एक h4 चाइल्ड एलिमेंट है, जिस पर "टेक्स्ट-ग्रे" क्लास लागू है।
3. चाइल्ड h4 HTML एलिमेंट को चुनें, और "टेक्स्ट-ग्रे" क्लास में कलर स्टाइलिंग को डिसेबल करें।
4. "सामग्री" वर्ग के साथ मूल HTML तत्व का चयन करें। निम्नलिखित सीएसएस शैली को कक्षा में जोड़ें:

   लाल रंग;

   पैरेंट डिव में सभी टेक्स्ट लाल हो जाएंगे। यह परिवर्तन बाल तत्वों को भी कैस्केड करेगा, जिसका अर्थ है कि h4 का रंग भी लाल होगा।
5. चाइल्ड h4 HTML एलिमेंट को चुनें, और "टेक्स्ट-ग्रे" क्लास में एक नई स्टाइल जोड़ें:

   हरा रंग करें;

   यह किसी भी मूल वर्ग की शैली को ओवरराइड कर देगा। h4 HTML तत्व लाल से हरे रंग में बदल जाएगा।
6. यदि आप "सामग्री" वर्ग के लिए स्टाइल देखते हैं तो आपको स्ट्राइक-थ्रू भी दिखाई देगा। यह पुष्टि करता है कि h4 चाइल्ड एलिमेंट पैरेंट के रंग को ओवरराइड कर रहा है।

ब्राउज़र में अपने CSS को डीबग करने के लाभ

अपने ब्राउज़र में CSS को डिबग करने से बहुत समय बच सकता है और आपके कोडिंग कार्यप्रवाह में तेजी आ सकती है। यह विशेष रूप से सच है यदि आपको यह देखने की आवश्यकता है कि आपके नए CSS परिवर्तन वास्तविक समय में आपकी वेबसाइट पर UI को कैसे प्रभावित करते हैं।

आप अपने स्थानीय कोड में परिवर्तन करने और अपने ऐप को पुनः लोड करने के बजाय इस तकनीक का उपयोग कर सकते हैं। यह आपको यह अनुमान लगाने से बचाएगा कि कौन से CSS मान काम करेंगे, क्योंकि अब आप अपने UI परिवर्तन करते समय उन्हें देख सकते हैं।

जब तक आप अपने इच्छित डिज़ाइन के करीब नहीं पहुंच जाते, तब तक आप निरीक्षण तत्व विंडो में परिवर्तन कर सकते हैं। एक बार आपके पास हो जाने के बाद, आप निरीक्षण तत्व विंडो से कोड को वापस अपने स्थानीय कोड में कॉपी कर सकते हैं। आप अभी भी अपने ऐप को फिर से चला सकते हैं ताकि यह जांचा जा सके कि आपके नए सीएसएस परिवर्तन अभी भी काम कर रहे हैं।

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

इसमें यह भी बताया गया है कि CSS में परिवर्तन कैसे करें और वास्तविक समय में UI में दृश्य परिवर्तन कैसे देखें। उम्मीद है, आप यह भी समझ गए होंगे कि जब CSS किसी तृतीय-पक्ष लाइब्रेरी का उपयोग करता है, और स्टाइलिंग इनहेरिटेंस कैसे काम करता है, तो परिवर्तन कैसे करें।

कई अन्य दिलचस्प चीजें हैं जो आप निरीक्षण तत्व विंडो के साथ कर सकते हैं।

7 चंचल चीजें जो आप निरीक्षण तत्व के साथ कर सकते हैं

आगे पढ़िए

लेखक के बारे में