दिलचस्प पोस्ट
क्या एक एकल अद्यतन एसक्यूएल स्टेटमेंट के साथ कई अपडेट करना संभव है? DbArithmeticExpression तर्कों में एक संख्यात्मक सामान्य प्रकार होना चाहिए जेएक्स-आरएस – कैसे एक साथ JSON और HTTP स्थिति कोड वापस करने के लिए? यह विवेक विंडोज फॉर्म में काम नहीं कर रहा है इंतजार करना टास्क। इंतजार – गतिरोध? प्राधान्यबंधक संपार्श्विक को प्राथमिकता विषय निर्धारित करने की आवश्यकता है डीबग करें और विजुअलाइज स्टूडियो कोड के साथ Angular2 टाइपस्क्रिप्ट करें? जावा के toLowerCase () और toUpperCase () के साथ लोकेल का उपयोग करना क्या निकलते समय () माइक्रोसेकंड संकल्प की गारंटी है? SwingUtilities.invokeLater () क्यों इसकी आवश्यकता है? नल हमेशा गलत है? App.config से कनेक्शन स्ट्रिंग प्राप्त करें "बिन / रेल: ऐसी कोई फ़ाइल या निर्देशिका नहीं" w / रूबी 2 और हरोको पर 4 रेल स्टैक स्मृति आकार इतनी सीमित क्यों है? जावास्क्रिप्ट समारोह में वैश्विक चर परिभाषित करें

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

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

मैं 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); 

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