🥄 🎅🏾 🛕 किसी वस्तु संपत्ति के अवांछित उत्परिवर्तन के स्रोत के लिए त्वरित खोज 🔇 🤾🏼 👆

नमस्ते! आज मैं आपको बताता हूं कि मेरी राय में, गैर-तुच्छ जावास्क्रिप्ट समस्या को हल करने के लिए डिबगर का उपयोग कैसे करें।

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

अक्सर यह व्यवहार उपयोगकर्ता डेटा को विकृत करता है, त्रुटियों की ओर जाता है और अवांछनीय है।

ऐसे अवांछित संपत्ति परिवर्तनों के स्रोत को ढूंढने में लंबा समय लग सकता है: इसलिए कार्यक्रम पहले से ही बड़ा हो सकता है और सैकड़ों हजारों निर्देश शामिल हो सकते हैं।

आइए एक साधारण उदाहरण देखें।

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Debug property mutation example</title> <script> const user = { firstName: 'Vasilij', middleName: 'Alibabaevich', lastName: 'Radner', aka: 'Alibaba', getFullName() { return `${this.lastName} ${this.firstName.slice(0, 1)}. ${this.middleName.slice(0, 1)}.` } }; </script> <script src="object-property-mutation.js" type="application/javascript"></script> </head> </head> <body> <script> Promise.resolve(user).then(user.getFullName.bind(user)).then(console.log); </script> </body> </html>

अब वेब प्रोग्राम काम नहीं करता है, क्योंकि कंसोल में कोई त्रुटि है और पूर्ण नाम का कोई आउटपुट नहीं है।

हम कंसोल में सबसे ऊपरी संदेश पढ़ते हैं:

 Uncaught (in promise) TypeError: Cannot read property 'slice' of undefined

इस तरह की एक त्रुटि: संसाधित नहीं हुई (एक वादा के रूप में): मैं अपरिभाषित से स्लाइस संपत्ति को नहीं पढ़ सकता हूं।

लिंक पर क्लिक करें और त्रुटि के स्थान पर जाएं।

 getFullName() { return `${this.lastName} ${this.firstName.slice(0, 1)}. ${this.middleName.slice(0, 1)}.` }

हम देखते हैं कि गलत अभिव्यक्ति

 this.firstName.slice(0, 1)

चार ऑपरेटरों के होते हैं:

दो डॉट ऑपरेटर
एक अल्पविराम विभाजक
एक समूह संचालक - कोष्ठकों की एक जोड़ी

आइए निर्देशों को पढ़ें। पहले बाईं अभिव्यक्ति का मूल्यांकन किया जाता है

 this.firstName

इसमें एक डॉट ऑपरेटर होता है, बाईं ओर प्राथमिक अभिव्यक्ति, और दाईं ओर पहचानकर्ता नाम होता है। इस अभिव्यक्ति का परिणाम अपरिभाषित होगा। निम्न डॉट स्टेटमेंट को निष्पादित करने से त्रुटि होती है। चूंकि डॉट ऑपरेटर केवल ऑब्जेक्ट प्रकारों के साथ काम करता है, अपरिभाषित से इसका निष्पादन एक त्रुटि की ओर जाता है - मैं अपरिभाषित से स्लाइस संपत्ति प्राप्त नहीं कर सकता।

यह पता चला है कि कहीं न कहीं यह संपत्ति अपरिभाषित थी ...

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

अपवाद टूल पर स्टॉप का चयन करें

हम देखते हैं कि स्टैक में केवल दो कॉल हैं। पिछली कॉल पर जाएं।

हम देखते हैं कि कोई स्पष्ट निर्देश नहीं है जो पहले नाम गुण को बदलता है।

हम निष्कर्ष निकालते हैं कि इस कॉल स्टैक में परिवर्तन नहीं होता है।

आपको कैसा लगा?

और उस खलनायक को कैसे खोजूं जिसने मेरी वस्तु की संपत्ति को बदल दिया?

कृपया टिप्पणियों में लिखें कि आपको यह कैसे मिलेगा?
जो लोग मेरे साथ काम करते हैं और जिनसे मैंने आपको कहा था, कृपया टिप्पणी में एक तारांकित लिखें।

मुझे यह जानने में बहुत दिलचस्पी है कि जावास्क्रिप्ट विशेषज्ञ अन्य समस्याओं का समाधान कैसे करते हैं।

तुम्हें पता है, जब मैंने पहली बार इस जावास्क्रिप्ट व्यवहार का सामना किया था, तो मैंने कुछ घंटों की जाँच-पड़ताल की और एक धमाके से बालों के गुच्छे को फाड़ दिया ...

अपवाद पर विराम टूल को अक्षम करें।

इसलिए, यहां हमारी नई योजना है, हम गेट और सेटर का उपयोग करके उपयोगकर्ता ऑब्जेक्ट में पहले नाम गुण को परिभाषित करेंगे।

हम डीबगर कथन और अर्धविराम कथन का उपयोग करके डिबग कथन को सेटर में जोड़ते हैं।

 const user = { _firstName: 'Vasilij', set firstName(value) { debugger; this._firstName = value; }, get firstName() {return this._firstName}, middleName: 'Alibabaevich', lastName: 'Radner', aka: 'Alibaba', getFullName() { return `${this.lastName} ${this.firstName.slice(0, 1)}. ${this.middleName.slice(0, 1)}.`; } };

कॉल स्टैक के साथ आगे बढ़ते हुए, हमें एक निर्देश मिलता है जो फर्स्टनाम प्रॉपर्टी को बदलता है।

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

हम देखते हैं कि पैरामीटर मान का मान अपरिभाषित है।

अब, कॉल स्टैक का उपयोग करके, हम आसानी से पिछले कॉल पर जा सकते हैं।

iiiii, जीत आआआहह।

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

यहां हमारी नई योजना है: हम उपयोगकर्ता को ऑब्जेक्ट नहीं वस्तु बना देंगे और स्टॉप-बाय-अपवाद टूल का उपयोग करके, हम आसानी से गलत निर्देश पर पहुंच सकते हैं।

चूँकि हम जानते हैं कि अपरिभाषित से संपत्ति प्राप्त करने का प्रयास करने पर त्रुटि होती है।

हम अपवाद स्टॉप टूल को चालू करते हैं, उपयोगकर्ता चर को अपरिभाषित करते हैं।

  const user = undefined;

हम फिर से उस जगह पर रुक गए, जहां पहला नाम संपत्ति विकृत था।

यही सब मैं आज आपको वस्तुओं पर अवांछित परिवर्तनों को डीबग करने के बारे में बताना चाहता था।

लेख पढ़ने के लिए धन्यवाद। जैसे, चैनल को सब्सक्राइब करें, इस वीडियो और लेख को दोस्तों के साथ साझा करें, शुभकामनाएँ।

github.com/NVBespalov/js-lessons/tree/error/property-mutation

किसी वस्तु संपत्ति के अवांछित उत्परिवर्तन के स्रोत के लिए त्वरित खोज

अपवाद टूल पर स्टॉप का चयन करें

आपको कैसा लगा?

More articles: