Using Chrome Developer Tools Free web designing Course Tutorials #16
इस वेब डेवलपमेंट सीरीज़ के ट्यूटोरियल में अब तक हमने बहुत कुछ देखा है। यहां हम क्रोम द्वारा प्रदान किए गए डेवलपर टूल का उपयोग करने जा रहे हैं। एक शुरुआत के रूप में, यदि कोई विशेष कारण नहीं है तो मैं क्रोम ब्राउज़र का उपयोग करने की अत्यधिक सलाह दूंगा।
Tut16.html नामक एक नई फ़ाइल बनाने से शुरू करें, और बॉयलरप्लेट जोड़ें। <Title> टैग में डेवलपर टूल के रूप में शीर्षक दें। आइए सरल कोड लिखकर शुरू करते हैं-
<style>
p{
color: purple;
font-style: italic;
background-color: rosybrown;
}
.bgPrimary{
background-color: #82c2ff;
}
</style>
</head>
<body>
<h4 class="bgPrimary">Developer tools tutorial</h4>
<p>This is a tutorial for Chrome developer tools</p>
</body>
अपना कोड चलाने के बाद, यदि आप ब्राउज़र में कहीं भी राइट-क्लिक करेंगे, तो आपको एक निरीक्षण तत्व विकल्प दिखाई देगा। इस पर क्लिक करके आप मूल कोड देख पाएंगे। यहां से आप वेबपेज में कुछ बदलाव कर सकते हैं और उसका अवलोकन कर सकते हैं। हालाँकि, यह आपके सर्वर पर मूल कोड को नहीं बदलता है। डेवलपर टूल का उपयोग आपके कोड में कोई भी परिवर्तन करने और आपके वेब पेज पर तत्काल प्रभाव देखने के लिए किया जाता है। यह परिवर्तन स्थायी नहीं है।
लेकिन अगर आप डेवलपर टूल में किए गए किसी भी बदलाव को पसंद करते हैं, तो आप वीएस कोड में मूल फ़ाइल में ही कर सकते हैं और पेज को रिफ्रेश कर सकते हैं। यह विशेष परिवर्तन अब स्थायी रूप से वापस दिखाई देगा। निरीक्षण तत्व हमें दुनिया भर में मौजूद किसी भी वेबसाइट में बदलाव करने और देखने की अनुमति देता है !
मैंने समझाया है कि ये परिवर्तन केवल आपके स्थानीय सर्वर पर कैसे प्रतिबिंबित होते हैं। जब आप उस पृष्ठ को फिर से लोड करेंगे, तो सभी चीजें उनके डिफ़ॉल्ट सेट अप पर वापस आ जाएंगी। इस तरह, आप क्रोम के डेवलपर टूल का उपयोग कर सकते हैं।
उपयोगकर्ता एजेंट शैलियाँ
डिफ़ॉल्ट रूप से, क्रोम कुछ तत्वों के लिए कुछ संपत्ति सेट करता है और उसमें कुछ डिफ़ॉल्ट मान संग्रहीत करता है। तो डिफ़ॉल्ट रूप से ब्राउज़र कुछ तत्व इसके अनुसार और उस स्टाइल को विशेष रूप से उपयोगकर्ता के एजेंट स्टाइल शीट के रूप में जाना जाता है। मूल रूप से यह ब्राउज़र का डिफ़ॉल्ट मान दिखा रहा है कि पहले क्या बदलाव हुए थे और अब आपने अपने पेज पर क्या बदलाव किए हैं। एक कंसोल सेक्शन भी है जहाँ आप जावास्क्रिप्ट कोड लिख सकते हैं। स्रोत अनुभाग में आपके द्वारा लिखे गए सभी स्रोत कोड होते हैं। इस ट्यूटोरियल में सबसे महत्वपूर्ण बात यह थी कि हमने पहले ही चर्चा की थी। हम सीधे सीएसएस का उपयोग करके अपनी शैलियों को सीधे बदल सकते हैं।
रंग वर्ग को परिभाषित करते समय कुछ सुझाव: -
रंग का नाम सीधे उपयोग न करें क्योंकि वर्ग नाम के बजाय उपयोग करें
रंगपंचमी
रंग में असफल
रंग भरनेवाला
जैसा कि ये लिखना अधिक पेशेवर लगता है और भविष्य में हमारे कोड को बनाए रखने में भी मदद करता है।
इसलिए, मेरा मानना है कि आपको डेवलपर टूल और उनका उपयोग करने के तरीके के बारे में कुछ सीखना चाहिए। निरीक्षण तत्वों के आसपास अधिक अभ्यास और खेलना आपको तेजी से सीखने में मदद करेगा।
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Developer tools</title>
<style>
p{
color: purple;
font-style: italic;
background-color: rosybrown;
}
.bgPrimary{
background-color: #82c2ff;
}
</style>
</head>
<body>
<h4 class="bgPrimary">Developer tools tutorial</h4>
<p>This is a tutorial for Chrome developer tools</p>
</body>
</html>
