दिलचस्प पोस्ट
अतुल्यकालिक बनाम तुल्यकालिक निष्पादन, इसका वास्तव में क्या अर्थ है? क्रोम में सेलेनियम वेबड्रायवर परीक्षण के मामलों को चलाने के लिए कैसे? सी ++ पढ़ता है और एक परमाणु का लेखन करता है? ब्राउज़र प्लग-इन कैसे लिखूं? Windows पर msysgit के साथ एक Git सर्वर सेटअप करें HTML 5 doctype का उपयोग शुरू करने के लिए कोई कारण नहीं है? मर्ज किए गए सभी गिट शाखाओं को मैं कैसे हटा सकता हूं? मैं जावास्क्रिप्ट ऑब्जेक्ट से संपत्ति कैसे निकालूं? फ़ायरबेज में denormalized डेटा कैसे लिखना कोणीय एनजी-बाइंड-एचटीएमएल और इसके भीतर निर्देश जावा में प्राथमिकताओं, हमेशा प्राथमिकता सहित स्थानीय चर क्यों होना चाहिए? ग्रहण में जेडीके की स्थापना डी 3.जेएस वस्तुओं में हाइपरलिंक्स क्या मैं शब्दशः स्ट्रिंग में दोहरे उद्धरण से बच सकता हूं? मैं स्विफ्ट में NSTimer का उपयोग कैसे कर सकता हूं?

कैसे क्रोम में "संपत्ति परिवर्तन पर ब्रेक"?

फ़ायरबॉग्ज के लिए फ़ायरबॉग्ज की एक अच्छी सुविधा है, जिसे "संपत्ति परिवर्तन पर ब्रेक" कहा जाता है, जहां मैं किसी ऑब्जेक्ट की किसी भी संपत्ति को चिह्नित कर सकता हूं, और यह परिवर्तन से पहले जावास्क्रिप्ट निष्पादन को रोक देगा।

मैं Google क्रोम में एक ही प्राप्त करने की कोशिश कर रहा हूं, और मुझे क्रोम डिबगर में फ़ंक्शन नहीं मिल रहा है। मैं Google क्रोम में यह कैसे कर सकता हूं?

वेब के समाधान से एकत्रित समाधान "कैसे क्रोम में "संपत्ति परिवर्तन पर ब्रेक"?"

यदि आप स्रोत के साथ चारों ओर गड़बड़ नहीं करते हैं, तो आप एक एक्सेसर के साथ संपत्ति को फिर से परिभाषित कर सकते हैं।

// original object var obj = { someProp: 10 }; // save in another property obj._someProp = obj.someProp; // overwrite with accessor Object.defineProperty(obj, 'someProp', { get: function () { return obj._someProp; }, set: function (value) { debugger; // sets breakpoint obj._someProp = value; } }); 

2016.03 को संपादित करें: Object.observe को हटा दिया गया है और Chrome 50 में हटा दिया गया है

2014.05 को संपादित करें: क्रोम 36 में Object.observe जोड़ा गया था

क्रोम 36 देशी Object.observe साथ Object.observe कार्यान्वयन कार्यान्वयन जो यहां पर लाभ उठाया जा सकता है:

 myObj = {a: 1, b: 2}; Object.observe(myObj, function (changes){ console.log("Changes:"); console.log(changes); debugger; }) myObj.a = 42; 

यदि आप इसे केवल अस्थायी रूप से चाहते हैं, तो आपको कॉलबैक को एक चर में स्टोर करना चाहिए और Object.unobserve कॉल Object.unobserve

 myObj = {a: 1, b: 2}; func = function() {debugger;} Object.observe(myObj, func); myObj.a = 42; Object.unobserve(myObj, func); myObj.a = 84; 

नोट करें कि जब Object.observe का उपयोग करते समय, असाइनमेंट कुछ भी नहीं बदलेगा, तो आपको सूचित नहीं किया जाएगा, उदाहरण के लिए यदि आपने myObj.a = 1 लिखा है

कॉल स्टैक को देखने के लिए, आपको देव उपकरण में "async कॉल स्टैक" विकल्प सक्षम करना होगा:

क्रोम एसिंक कॉल स्टैक


मूल उत्तर (2012.07):

@ कत्सपॉफ़ द्वारा सुझाई गई कंसोल। वॉच स्केच:

 console = console || {}; // just in case console.watch = function(oObj, sProp) { sPrivateProp = "$_"+sProp+"_$"; // to minimize the name clash risk oObj[sPrivateProp] = oObj[sProp]; // overwrite with accessor Object.defineProperty(oObj, sProp, { get: function () { return oObj[sPrivateProp]; }, set: function (value) { //console.log("setting " + sProp + " to " + value); debugger; // sets breakpoint oObj[sPrivateProp] = value; } }); } 

मंगलाचरण:

 console.watch(obj, "someProp"); 

संगतता:

  • क्रोम 20 में, आप रनटाइम पर सीधे देव उपकरण में इसे पेस्ट कर सकते हैं!
  • पूर्णता के लिए: फायरबग 1.10 (फ़ायरफ़ॉक्स 14) में, आपको इसे अपनी वेबसाइट में इंजेक्ट करना होगा (उदाहरण के लिए यदि आप मैन्युअल रूप से स्रोत को संपादित नहीं कर सकते हैं); दुर्भाग्य से, फायरबग से परिभाषित फ़ंक्शन debugger पर ब्रेक नहीं लगते (या क्या यह कॉन्फ़िगरेशन की बात है? कृपया मुझे सही करें), लेकिन console.log काम करता है

संपादित करें:

नोट करें कि फ़ायरफ़ॉक्स में, console.watch पहले से मौजूद है, फ़ायरफ़ॉक्स के गैर-मानक Object.watchObject.watch इसलिए फ़ायरफ़ॉक्स में, आप परिवर्तनों के लिए मूल रूप से देख सकते हैं:

 >>> var obj = { foo: 42 } >>> obj.watch('foo', function() { console.log('changed') }) >>> obj.foo = 69 changed 69 

हालांकि, यह जल्द ही (देर से 2017) निकाल दिया जाएगा ।

इस के लिए एक पुस्तकालय है: BreakOn ()

यदि आप इसे क्रोम देव टूल में एक स्निपेट के रूप में जोड़ते हैं (स्रोत -> स्निपेट्स -> राइट-क्लिक करें -> नया -> पेस्ट करें ) , आप इसे किसी भी समय उपयोग कर सकते हैं।


इसका उपयोग करने के लिए, देव-उपकरण खोलें और स्निपेट को चलाएं। तब तोड़ने के लिए जब myObject.myProperty बदल दिया गया है, इसे dev-console से कॉल करें:

 breakOn(myObject, 'myProperty'); 

आप अपने प्रोजेक्ट के डीबग-बिल्ड में लाइब्रेरी भी जोड़ सकते हैं ताकि आपको हर बार पेज रीफ्रेश करने पर पुन: कॉल करने की आवश्यकता न हो।

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

उदाहरण:

 const originalObject = {property: 'XXX', propertyToWatch: 'YYY'}; const watchedProp = 'propertyToWatch'; const handler = { set(target, key, value) { if (key === watchedProp) { debugger; } target[key] = value; } }; const wrappedObject = new Proxy(originalObject, handler); 

अब लिपटे ऑब्जेक्ट का उपयोग करें जहां आप मूल ऑब्जेक्ट की आपूर्ति करेंगे और ब्रेक पर कॉल स्टैक की जांच करेंगे।