React Academy · पाठ

React DevTools इंस्टॉल करना और खोलना

Chrome/Firefox में React DevTools सेट अप करें और Components पैनल में नेविगेट करें

पाठ 1, कुल 4 में से13 चरण

React DevTools इंस्टॉल करना और खोलना, CoddyKit पर React Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह React Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

स्वागत है

इस पाठ में आप React DevTools ब्राउज़र एक्सटेंशन इंस्टॉल करेंगे और अपने चल रहे React ऐप का निरीक्षण करने के लिए Components पैनल में नेविगेट करना सीखेंगे।

React DevTools क्या है?

React DevTools एक ब्राउज़र एक्सटेंशन है, जो Chrome/Firefox DevTools में दो नए पैनल जोड़ता है: **घटक** (ट्री का निरीक्षण करने के लिए) और **प्रोफ़ाइलर** (प्रदर्शन मापने के लिए)। यह विकास मोड में किसी भी React ऐप के साथ काम करता है।

एक्सटेंशन इंस्टॉल करना

Chrome Web Store (या Firefox Add-ons) पर जाएँ और **React Developer Tools** खोजें। **Chrome में जोड़ें** (या Firefox में जोड़ें) पर क्लिक करें। आपके टूलबार में React आइकन उन पृष्ठों पर सक्रिय हो जाएगा जो React का उपयोग करते हैं।

DevTools खोलना

ब्राउज़र DevTools खोलने के लिए **F12** (या Mac पर Cmd+Option+I) दबाएँ। आपको Elements और Console के साथ-साथ **घटक** और **प्रोफ़ाइलर** नाम वाले नए टैब दिखाई देंगे।

घटक पैनल

Components टैब वर्तमान पृष्ठ के React घटकों का पूरा ट्री दिखाता है। आप किसी भी घटक पर क्लिक करके उसके प्रॉप्स, स्थिति, हुक और उस स्रोत फ़ाइल का निरीक्षण कर सकते हैं जिसने उसे रेंडर किया है।

ट्री में नेविगेट करना

घटक पैनल के शीर्ष पर मौजूद खोज बॉक्स का उपयोग करके घटक के नाम के अनुसार फ़िल्टर करें। किसी घटक का विवरण दाईं ओर देखने के लिए ट्री में उस पर क्लिक करें। चाइल्ड घटकों को फैलाने या समेटने के लिए तीरों का उपयोग करें।

प्रॉप्स का लाइव निरीक्षण करना

जब आप किसी घटक पर क्लिक करते हैं, तो उसके वर्तमान **प्रॉप्स** दाएँ पैनल में दिखाई देते हैं। स्रोत कोड में बदलाव किए बिना UI में होने वाले बदलावों का पूर्वावलोकन करने के लिए आप DevTools में सीधे प्रॉप्स के मान भी संपादित कर सकते हैं।

स्थिति और हुक का निरीक्षण करना

प्रॉप्स के नीचे आपको **हुक** दिखाई देंगे, जैसे स्थिति, प्रभाव, मेमो और रेफ़। State को फैलाने पर उस घटक में किए गए हर useState कॉल का वर्तमान मान दिखाई देता है।

विकास मोड की आवश्यकता

React DevTools घटकों के नाम तभी दिखाता है जब ऐप **विकास मोड** में चलता है। छोटे बंडल बनाने के लिए उत्पादन बिल्ड में React घटकों के नाम हटा देता है, इसलिए npm start या npm run dev का उपयोग करके हमेशा स्थानीय रूप से डीबग करें।

अपडेट हाइलाइट करना

DevTools की सेटिंग में (गियर आइकन) **घटकों के render होने पर अपडेट हाइलाइट करें** सक्षम करें। जो घटक दोबारा रेंडर होंगे, उन पर रंग की परत चमकेगी, जिससे अनावश्यक रेंडर तुरंत दिखाई देने लगेंगे।

त्वरित जाँच

React DevTools एक्सटेंशन ब्राउज़र के डेवलपर टूल्स में कौन-से दो टैब जोड़ता है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

आपने React DevTools इंस्टॉल करके Components पैनल का अन्वेषण किया है। अब आप स्रोत कोड को छुए बिना घटक ट्री का निरीक्षण कर सकते हैं, लाइव प्रॉप्स और स्थिति पढ़ सकते हैं, मानों को वहीं संपादित कर सकते हैं और दोबारा होने वाले रेंडर को हाइलाइट कर सकते हैं।

आगे

अगला पाठ: **घटक ट्री और प्रॉप्स का निरीक्षण करना** — आप नेस्टेड पदानुक्रमों की गहराई से जाँच करेंगे और DevTools के साइडबार में जटिल प्रॉप्स और स्थिति की संरचनाएँ पढ़ना सीखेंगे।

शुरुआत निःशुल्क

एआई शिक्षक के साथ React सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 88
पाठ: 324

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “React DevTools इंस्टॉल करना और खोलना” पाठ निःशुल्क है?

हाँ—“React DevTools इंस्टॉल करना और खोलना” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और React Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“React DevTools इंस्टॉल करना और खोलना” में मैं क्या सीखूँगा?

Chrome/Firefox में React DevTools सेट अप करें और Components पैनल में नेविगेट करें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या React Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।

“React DevTools इंस्टॉल करना और खोलना” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस React Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर React Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← React Academy पर वापस जाएँ