दिलचस्प पोस्ट
स्विंग में जेटीबल के लिए पेजिंग सहायता कैसे प्रदान करें? दृश्य स्टूडियो दुर्घटनाग्रस्त रहता है: एप्लिकेशन त्रुटि MVC4 में नियंत्रक को काम नहीं करना जावास्क्रिप्ट का उपयोग करके नेविगेट करने से एक वेबपेज को रोकें उपयोगकर्ता के आईपी पते को नोड में कैसे निर्धारित किया जाए ऑपरेशन रनटाइम को अस्थिर कर सकता है? जांचें कि क्या फ़ाइल खोल स्क्रिप्ट में वाइल्डकार्ड के साथ मौजूद है लॉलीपॉप टूलबार एनीमेशन विस्तृत करें / संक्षिप्त करें (टेलीग्राम ऐप) यदि मेटा टैग दस्तावेज़ बॉडी में मौजूद हैं तो क्या होगा? उपप्रोसेस का उपयोग करके रीयलटाइम आउटपुट प्राप्त करना फोकस पर EditText सेट करें किसी स्ट्रिंग पर क्रमबद्ध करें जिसमें कोई संख्या हो सकती है ग्रहण त्रुटि संदेश देता है "जावा प्रारंभ किया गया था, लेकिन निकासी कोड = 1 लौटा" बहुत आसान सी ++ प्रोफाइलर (वीसी ++) क्या है? अपाचे वर्चुअलहोस्ट 403 निषिद्ध

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

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

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

Solutions Collecting From Web of "कैसे क्रोम में "संपत्ति परिवर्तन पर ब्रेक"?"

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

// 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); 

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