रिएक्ट अनुप्रयोगों को डीबग करने के लिए Redux DevTools का उपयोग कैसे करें

समस्याओं को खत्म करने के लिए हमारे साधन का प्रयास करें

जैसा प्रतिक्रिया एप्लिकेशन की जटिलता बढ़ती जा रही है, एप्लिकेशन स्थिति के साथ डिबगिंग समस्याएं तेजी से कठिन हो सकती हैं। रिडक्स डेवटूल्स एक अमूल्य उपकरण है जो रिएक्ट डेवलपर्स को उनके अनुप्रयोगों में Redux स्टोर स्थिति परिवर्तनों को देखने और डीबग करने की अनुमति देता है।

इस व्यापक मार्गदर्शिका में, आप सीखेंगे:

  • Redux DevTools क्या है और यह कैसे काम करता है
  • Redux DevTools को कैसे स्थापित और कॉन्फ़िगर करें
  • राज्य निगरानी, ​​एक्शन प्लेबैक और समय यात्रा डिबगिंग जैसी DevTools सुविधाओं का उपयोग करना
  • अपने डिबग वर्कफ़्लो के लिए DevTools को अनुकूलित और संवर्धित करना
  • बग्स को ठीक करने और प्रदर्शन को अनुकूलित करने के लिए Redux DevTools का लाभ उठाने की सर्वोत्तम प्रथाएँ

यहां तक ​​कि सबसे जटिल रिएक्ट और रेडक्स ऐप्स को डीबग करने के लिए Redux DevTools की शक्ति का उपयोग करने में विशेषज्ञ बनने के लिए इस गाइड में दिए गए उदाहरणों का पालन करें।

Redux DevTools क्या हैं?

रिडक्स डेवटूल्स Redux राज्य प्रबंधन का उपयोग करने वाले ऐप्स के लिए एक डिबगिंग प्लेटफ़ॉर्म है। यह आपको इसकी अनुमति देता है:

  • Redux स्टोर स्थिति मानों का निरीक्षण करें
  • एक्शन लॉगिंग के साथ समय के साथ स्थिति में बदलाव का निरीक्षण करें
  • पिछले राज्यों में वापस 'समय-यात्रा' करके मुद्दों को डीबग करें
  • रिकॉर्ड की गई रेड्यूसर क्रियाओं को दोबारा चलाएं

DevTools यह निगरानी करने के लिए एक केंद्रीकृत स्थान प्रदान करता है कि क्रियाओं के जवाब में आपके रिएक्ट ऐप की स्थिति कैसे बदलती है। यह अंतर्दृष्टि जटिल व्यवहार को समझना, बग पकड़ना और प्रदर्शन को अनुकूलित करना आसान बनाती है।

Redux DevTools कैसे काम करता है

हुड के तहत, Redux DevTools आपके Redux स्टोर को प्रत्येक कार्रवाई भेजे जाने पर नज़र रखने के लिए उपकरण देता है। यह रिकॉर्ड करता है कि समय के साथ स्थिति कैसे बदलती है ताकि आप इतिहास को रिवाइंड कर सकें और ऐप की पिछली स्थितियों में 'समय-यात्रा' कर सकें।

फिर DevTools UI आपको इस इतिहास की कल्पना करने, स्थितियों का निरीक्षण करने और रिकॉर्ड किए गए डेटा का उपयोग करके समस्याओं को डीबग करने की सुविधा देता है। यह सीधे Redux व्यवहार को बदलने के बजाय ब्राउज़र एक्सटेंशन के माध्यम से आपके स्टोर से जुड़ता है।

इसके बाद, आइए देखें कि Redux DevTools कैसे सेट अप करें ताकि आप अपने रिएक्ट ऐप्स को डीबग करने के लिए इसका उपयोग शुरू कर सकें।

Redux DevTools स्थापित करना

Redux DevTools दो मुख्य भागों में आता है - DevTools UI और Redux बाइंडिंग।

डेवटूल्स यूआई

DevTools UI ब्राउज़र एक्सटेंशन के रूप में उपलब्ध है। अपने ब्राउज़र डेव टूल्स में रिएक्ट डिबगिंग पैनल तक पहुंच प्राप्त करने के लिए इनमें से एक एक्सटेंशन इंस्टॉल करें:

  • रिएक्ट डेवलपर टूल्स - संयुक्त रिएक्ट और रेडक्स प्रोफाइलिंग के साथ क्रोम और फ़ायरफ़ॉक्स एक्सटेंशन
  • Redux DevTools एक्सटेंशन - स्टैंडअलोन क्रोम, फ़ायरफ़ॉक्स और एज एक्सटेंशन

रिडक्स बाइंडिंग्स

Redux बाइंडिंग DevTools ब्राउज़र एक्सटेंशन और आपके रिएक्ट एप्लिकेशन के Redux स्टोर के बीच संचार को सक्षम करती है। |_+_| स्थापित करें एनपीएम पैकेज:

|_+_|

अब Redux DevTools आपके स्टोर के साथ एकीकृत हो सकता है। आपको बस कॉन्फ़िगरेशन समाप्त करने की आवश्यकता है.

बुनियादी विन्यास

Redux DevTools एकीकरण को सक्षम करने के लिए, आपको |_+_| का उपयोग करके स्टोर की रचना करनी होगी |_+_| से कार्य। यहां DevTools सक्षम के साथ एक विशिष्ट स्टोर सेटअप दिया गया है:

|_+_|

|_+_| रैपर हैंडल स्टोर को ब्राउज़र एक्सटेंशन DevTools UI से जोड़ता है।

अब जब आपका रिएक्ट ऐप स्टोर को इनिशियलाइज़ करेगा, तो DevTools इसका पता लगाएगा और उसके साथ एकीकृत होगा। आपको अपने ब्राउज़र DevTools पैनल में Redux टैब दिखाई देना चाहिए जो आपको डिबगिंग शुरू करने की अनुमति देगा।

वैकल्पिक एकीकरण

अन्य लोकप्रिय ढाँचों में भी DevTools एकीकरण उपलब्ध है:

  • अगला.जे.एस - उपयोग करें |_+_| कॉन्फिगरस्टोर
  • सीआरए - उपयोग करें |_+_| कॉन्फिगरस्टोर

यह देखने के लिए अपने फ्रेमवर्क या बॉयलरप्लेट दस्तावेज़ों की जाँच करें कि क्या वे Redux DevTools को एकीकृत करने के लिए शॉर्टकट प्रदान करते हैं।

Redux DevTools का उपयोग करना

DevTools के पूरी तरह से सेट हो जाने के बाद, आइए देखें कि आप इसका उपयोग रिएक्ट ऐप्स को डीबग करने के लिए कैसे कर सकते हैं। DevTools UI इसके तरीके प्रदान करता है:

  • राज्य का निरीक्षण करें
  • राज्य परिवर्तन देखें
  • रिकॉर्ड की गई कार्रवाइयों को दोबारा चलाएं
  • ऐतिहासिक ऐप राज्यों के बीच 'समय-यात्रा'

राज्य का निरीक्षण

DevTools State टैब आपको नवीनतम Redux स्थिति स्नैपशॉट का निरीक्षण करने देता है। किसी विशेष राज्य भाग के वर्तमान मूल्य में गोता लगाने के लिए राज्य स्लाइस का विस्तार करें:

डीबग मानों के अपेक्षित रूप से अपडेट नहीं होने पर इंटरैक्शन होने के बाद स्थिति की जाँच करें।

राज्य परिवर्तन की निगरानी करना

'मॉनिटर स्टेट चेंजेस' चेकबॉक्स पर क्लिक करने से भेजी गई सभी कार्रवाइयां और प्रत्येक कार्रवाई के बाद नया राज्य मान लॉग हो जाएगा।

राज्य परिवर्तन प्रवाह को समझने के लिए इस लॉग को देखें। यह समय के साथ राज्य को प्रभावित करने वाली क्रियाओं का क्रम दर्शाता है।

ध्यान दें कि बग के कारण को कम करने के लिए राज्य गलत तरीके से अपडेट होते हैं।

एक्शन प्लेबैक और टाइम ट्रेवल

क्रिया लॉग आपको क्रियाओं को ट्रिगर करके चरणों को फिर से चलाने की अनुमति देता है। किसी क्रिया को दोबारा भेजने के लिए उस पर क्लिक करें। या स्लाइडर को 'टाइम-ट्रैवल' पर वापस पिछली ऐप स्थिति में खींचें।

बग होने पर अलग करने के लिए इसका उपयोग करें। इसे घटित होते देखने के लिए चरणों को दोबारा चलाएं, फिर अंतर्दृष्टि के लिए स्थिति का निरीक्षण करें।

DevTools मॉनिटर को अनुकूलित करना

आप DevTools मॉनिटर टैब को यह बदलने के लिए अनुकूलित कर सकते हैं कि यह कौन सी रिकॉर्डिंग रखता है। इससे प्रासंगिक राज्य परिवर्तनों पर ध्यान केंद्रित करने में मदद मिलती है।

आवश्यकतानुसार इन मॉनिटर विकल्पों को सक्षम करें:

  • रिकॉर्डिंग रोकें - रिकॉर्डिंग अस्थायी रूप से बंद हो जाती है
  • लॉक परिवर्तन - समय यात्रा पर कार्रवाई लॉग रखता है
  • स्थिति परिवर्तन ट्रैक करें - फ़िल्टर रिकॉर्ड केवल बदलता है

|_+_| जोड़ा जा रहा है और |_+_| config विकल्प आपको यह भी सेट करने देता है:

  • रिकॉर्ड करने के लिए कार्रवाइयों की संख्या
  • |_+_| जैसी क्रियाओं को फ़िल्टर करें
|_+_|

प्रासंगिक डिबगिंग डेटा पर DevTools पर ध्यान केंद्रित करने के लिए इन्हें ट्यून करें।

एक पेशेवर की तरह Redux DevTools का उपयोग करना

आइए समस्याओं के निदान के लिए Redux DevTools क्षमताओं का लाभ उठाने के लिए कुछ प्रभावी वर्कफ़्लोज़ का पता लगाएं।

राज्य टूटने पर पता लगाना

एक सामान्य कार्य तब सीमित हो जाता है जब ऐप की स्थिति बग पैदा करने की उम्मीद से अलग हो जाती है।

DevTools एक्शन प्लेबैक सुविधाएँ राज्य विफलता की ओर ले जाने वाली कार्रवाई की पहचान करने में मदद करती हैं। यहां राज्य ब्रेकप्वाइंट खोजने की एक प्रक्रिया है:

  1. अंतिम ज्ञात अच्छी स्थिति पर ध्यान दें
  2. राज्य परिवर्तनों की निगरानी करते हुए आगे की कार्रवाई करें
  3. एक बार अप्रत्याशित स्थिति सामने आने पर प्लेबैक बंद कर दें
  4. विफलता बिंदु से पहले कार्रवाई और स्थिति का निरीक्षण करें

यह बग मूल कारण को डीबग करने के लिए क्रियाओं के एक छोटे सेट तक फ़िल्टर करता है।

इंटरेक्शन अनुक्रम विफलताओं को समझना

जटिल यूआई में राज्य अद्यतनों का लंबा क्रम शामिल होता है। यदि अनुक्रम के मध्य में कुछ गलत हो जाता है, तो यह स्पष्ट नहीं हो जाता है कि कौन सी बातचीत विफल रही।

DevTools त्रुटियों को उजागर करने के लिए चरण-दर-चरण अपडेट का पता लगाता है। इसके माध्यम से टूटे हुए इंटरैक्शन अनुक्रम का विश्लेषण करें:

  1. प्रारंभ करने के लिए ऐप स्थिति रीसेट करें
  2. रिकार्ड क्रम
  3. अप्रत्याशित स्थिति पर रोकें
  4. विफलता से पहले अंतिम सफल ऑपरेशन देखने के लिए कार्रवाई लॉग की समीक्षा करें
  5. अलगाव में केवल विफलता अनुक्रम को फिर से बनाने के लिए पिछली कार्रवाइयों को दोबारा चलाएं

अब आप UX प्रवाह के टूटे हुए विशिष्ट भाग को ठीक कर सकते हैं।

घटकों को प्रभावित करने वाले राज्य परिवर्तनों पर नज़र रखना

रिएक्ट DevTools ब्राउज़र एक्सटेंशन यहां Redux DevTools क्षमताओं की प्रशंसा करता है। यह पता लगाने की अनुमति देता है कि स्थिति बदलने पर कौन सा घटक पुनः प्रस्तुत होता है।

राज्य अपडेट को यूआई रेंडरर्स से जोड़ने के लिए दोनों टूल का एक साथ उपयोग करें:

  1. रिएक्ट डेवटूल्स में - री-रेंडरर्स का पता लगाने के लिए घटकों को हाइलाइट करें
  2. Redux DevTools में - राज्य परिवर्तनों के लिए क्रिया लॉग देखें
  3. सहसंबंधी रिएक्ट घटक Redux स्थिति उत्परिवर्तन को पुनः प्रस्तुत करता है

आप यह पहचान सकते हैं कि Redux स्थिति अंततः आपके घटक तर्क को प्रभावित करके समस्याएँ पैदा करती है।

DevTools प्रदर्शन अनुकूलन

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

महंगी राज्य संगणनाओं का पता लगाना

कार्रवाई लॉग प्रत्येक राज्य अद्यतन की अवधि दिखाता है। लंबी स्थिति पुनर्गणना पर ध्यान दें:

अनुकूलन लक्ष्यों की पहचान करने के लिए सक्षम उत्पादन डेटा के साथ समय रिकॉर्ड करने का प्रयास करें। फिर उन्हें अलग करने के लिए विशिष्ट क्रियाएं दोबारा चलाएं।

धीमी गति से कार्य करने वाले रचनाकारों की पहचान करना

किसी क्रिया का विस्तार करने से आप उसे ट्रिगर करने वाली फ़ाइल और कोड की लाइन का पता लगा सकते हैं। हेवीवेट एक्शन क्रिएटर्स को ढूंढने के लिए इसका उपयोग करें:

कुछ यूआई इवेंट हैंडलर महंगे अनुक्रम भेज सकते हैं। स्टैक ट्रेस अनुकूलन की आवश्यकता वाले कोड स्थानों को इंगित करता है।

यूआई फ़्रेम दर का विश्लेषण

रिएक्ट DevTools प्रोफाइलर आपको इंटरैक्शन के दौरान घटक रेंडर रिकॉर्ड करने देता है। पता लगाने के लिए समय मार्करों की समीक्षा करें:

  • लंबे घटक अद्यतन
  • गिराए गए तख्ते
  • Redux स्थिति और रिएक्ट री-रेंडर्स के बीच कन्वेंशन मुद्दे

राज्य परिवर्तन से लेकर खराब प्रदर्शन वाले यूआई कोड तक के कनेक्शन की पहचान करें।

निष्कर्ष

Redux DevTools आपके सामने आने वाली लगभग किसी भी प्रतिक्रिया, Redux और राज्य प्रबंधन समस्या का विश्लेषण करने की शक्ति को अनलॉक करता है। यह आपको अविश्वसनीय दृश्यता प्रदान करता है कि आपका ऐप कैसे काम करता है।

DevTools के साथ Redux को इंस्ट्रुमेंट करने में सेटअप में कुछ मिनट लगते हैं। लेकिन बग और प्रदर्शन समस्याओं पर नज़र रखने से आपके घंटों की बचत होगी।

बड़े, जटिल इंटरफेस के लिए, DevTools वर्कफ़्लोज़ में महारत हासिल करने के लिए समय समर्पित करने से डिबगिंग मुद्दों पर तुरंत लाभ मिलता है। अन्य ब्राउज़र एक्सटेंशन के साथ इसकी क्षमताओं को संयोजित करने से आपको राज्य प्रबंधन और यूआई कोड के बीच पुल की पूर्ण दृश्यता मिलती है।

आपको जो अंतर्दृष्टि प्राप्त होती है वह अंततः उच्च गुणवत्ता वाले अनुप्रयोगों के निर्माण में तेजी से विकास चक्र की ओर ले जाती है।

यह सभी देखें: