डेवलपर उपकरण: DevTools खोलना और उपयोग करना
Chrome DevTools खोलें, तत्वों का निरीक्षण करें, कंसोल पढ़ें, नेटवर्क अनुरोध देखें और ब्राउज़र में CSS को लाइव संपादित करें।
डेवलपर उपकरण: DevTools खोलना और उपयोग करना, CoddyKit पर Frontend Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Frontend Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
ब्राउज़र DevTools क्या हैं?
हर आधुनिक ब्राउज़र में डेवलपर टूल का एक अंतर्निर्मित सेट होता है। DevTools से आप HTML और CSS का निरीक्षण, JavaScript की डीबगिंग, प्रदर्शन का विश्लेषण, नेटवर्क अनुरोधों की निगरानी और बहुत कुछ कर सकते हैं—वह भी ब्राउज़र छोड़े बिना।
DevTools खोलना
DevTools को F12 (विंडोज़/लिनक्स) या Cmd+Option+I (मैक) से खोलें। आप किसी भी तत्व पर दायाँ क्लिक करके निरीक्षण भी चुन सकते हैं। शॉर्टकट Ctrl+Shift+J / Cmd+Option+J सीधे कंसोल खोलता है।
तत्व पैनल
तत्व पैनल सक्रिय DOM ट्री दिखाता है। किसी तत्व को चुनने के लिए उस पर क्लिक करें और स्टाइल पैन में उसकी निर्धारित शैलियाँ देखें। आप HTML या CSS के मानों को वास्तविक समय में संपादित करने के लिए उन पर डबल-क्लिक कर सकते हैं—बदलाव तुरंत होते हैं, लेकिन आपकी फ़ाइल में सहेजे नहीं जाते।
CSS को सीधे संपादित करना
स्टाइल पैन में किसी भी गुण के मान को बदलने के लिए उस पर क्लिक करें। + बटन से नए नियम जोड़ें। नियमों को निष्क्रिय करने के लिए टॉगल चेकबॉक्स का उपयोग करें। अपने संपादक पर जाए बिना CSS का प्रारूप तैयार करने का यह सबसे तेज़ तरीका है।
कंसोल पैनल
कंसोल लॉग किए गए संदेश, चेतावनियाँ और त्रुटियाँ दिखाता है। आप सीधे JavaScript लिखकर उसे चला भी सकते हैं। डीबगिंग के दौरान डेटा दिखाने के लिए console.log(), console.warn(), console.error() और console.table() का उपयोग करें।
// Log different types
console.log('value:', myVar);
console.table([{name:'Alice'}, {name:'Bob'}]);
console.error('Something went wrong');नेटवर्क पैनल
नेटवर्क पैनल पेज द्वारा किए गए प्रत्येक एचटीटीपी अनुरोध को दिखाता है। किसी अनुरोध को चुनकर उसके हेडर देखें, प्रतिक्रिया के मुख्य भाग का पूर्वावलोकन करें और समय-क्रम जाँचें। प्रकार के अनुसार फ़िल्टर करें: XHR/प्राप्ति, JS, CSS, इमेज और फ़ॉन्ट।
अनुरोध का समय पढ़ना
हर अनुरोध में ये चरण दिखाई देते हैं: कतार में, DNS खोज, प्रारंभिक कनेक्शन, SSL, अनुरोध भेजा गया, प्रतीक्षा (TTFB) और सामग्री डाउनलोड। TTFB (पहले बाइट तक का समय) सर्वर की प्रतिक्रिया अवधि दर्शाता है।
नेटवर्क की गति सीमित करना
धीमे 3G या ऑफ़लाइन परिस्थितियों का अनुकरण करने के लिए नेटवर्क पैनल के गति-सीमा ड्रॉपडाउन का उपयोग करें। इससे तेज़ ब्रॉडबैंड पर न दिखाई देने वाली प्रदर्शन समस्याएँ सामने आती हैं और आपको खराब कनेक्शन वाले उपयोगकर्ताओं के लिए काम करने वाले अनुभव बनाने में मदद मिलती है।
डिवाइस मोड
डिवाइस मोड में जाने के लिए डिवाइस आइकन (Ctrl+Shift+M / Cmd+Shift+M) पर क्लिक करें। मोबाइल व्यूपोर्ट, DPR, टच इवेंट और नेटवर्क स्थितियों का अनुकरण करें। iPhone 14 जैसे प्रीसेट में से चुनें या अपनी पसंद की चौड़ाई निर्धारित करें।
स्रोत पैनल
स्रोत पैनल में आप अपनी JavaScript फ़ाइलों को पढ़ सकते हैं और उनमें ब्रेकपॉइंट लगा सकते हैं। ब्रेकपॉइंट निष्पादन को रोक देता है, ताकि आप चर के मान और कॉल स्टैक देख सकें तथा F10 (एक चरण आगे) और F11 (चरण के भीतर जाने) से कोड को पंक्ति-दर-पंक्ति चला सकें।
विराम-बिंदु और डीबगर
Sources में किसी पंक्ति संख्या पर क्लिक करके विराम-बिंदु जोड़ें। निष्पादन रुकने पर, उनके मान देखने के लिए चर पर माउस ले जाएँ या उन्हें Console में लिखें। यह देखने के लिए कॉल स्टैक पैनल का उपयोग करें कि इस बिंदु तक कौन-से फ़ंक्शन आए।
// You can also trigger a breakpoint in code:
debugger; // execution pauses here when DevTools is openत्वरित जाँच
कौन-सा DevTools पैनल आपको पृष्ठ द्वारा किए गए सभी एचटीटीपी अनुरोध दिखाता है, जिनमें उनके स्थिति कोड और प्रतिक्रिया समय भी शामिल होते हैं?
पुनरावलोकन: आपका DevTools टूलकिट
Elements: सक्रिय DOM का निरीक्षण और संपादन करें। Console: log करें और JavaScript चलाएँ। Network: एचटीटीपी ट्रैफ़िक पर नज़र रखें। Sources: विराम-बिंदु निर्धारित करें और डीबग करें। Device Mode: अनुकूल लेआउट का परीक्षण करें। इन चारों पैनलों में दक्षता आपके डीबगिंग कार्यप्रवाह को पूरी तरह बदल देगी।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 41
- पाठ
- 163
अक्सर पूछे जाने वाले प्रश्न
क्या “डेवलपर उपकरण: DevTools खोलना और उपयोग करना” पाठ निःशुल्क है?
हाँ—“डेवलपर उपकरण: DevTools खोलना और उपयोग करना” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Frontend Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“डेवलपर उपकरण: DevTools खोलना और उपयोग करना” में मैं क्या सीखूँगा?
Chrome DevTools खोलें, तत्वों का निरीक्षण करें, कंसोल पढ़ें, नेटवर्क अनुरोध देखें और ब्राउज़र में CSS को लाइव संपादित करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Frontend Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Frontend Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Frontend Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“डेवलपर उपकरण: DevTools खोलना और उपयोग करना” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Frontend Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Frontend Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- ब्राउज़र DNS और HTTP: अनुरोध का जीवनचक्र
- HTML, CSS और JavaScript: हर लेयर का काम
- पृष्ठ कैसे रेंडर होता है: DOM, CSSOM, लेआउट और पेंट
- डेवलपर उपकरण: DevTools खोलना और उपयोग करना