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

Question

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

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

Answer 1

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

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

Answer 2

संपादित 2016.03: Object.observe पदावनत और क्रोम 50

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

क्रोम 36 जहाजों Object.observe क्रोम में जोड़ा गया है जो कर सकते हैं यहां लीवरेज किया गया:

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

आप यह केवल अस्थायी तौर चाहते हैं, आप एक चर में कॉलबैक की दुकान और 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):

@स्केच जैसा कि @ katspaugh द्वारा सुझाया गया है:

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 पहले से मौजूद है, Firefox के अमानक Object.watch की वजह से।फ़ायरफ़ॉक्स में इसलिए, आप मूल रूप से परिवर्तन के लिए देख सकते हैं:

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

हालांकि, this will be soon (late 2017) removed।

Answer 3

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

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

---

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

breakOn(myObject, 'myProperty'); 

आप भी अपनी परियोजना की डिबग-निर्माण करने के लिए पुस्तकालय जोड़ सकते हैं ताकि आप हर बार जब आप ताज़ा फिर breakOn कॉल करने के लिए की जरूरत नहीं है पृष्ठ।

Answer 4

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

उदाहरण:

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

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

Answer 5

function debugProperty(obj, propertyName) { 
    // save in another property 
    obj['_' + propertyName] = obj[propertyName]; 

    // overwrite with accessor 
    Object.defineProperty(obj, propertyName, { 
    get: function() { 
     return obj['_' + propertyName]; 
    }, 

    set: function(value) { 
     debugger; // sets breakpoint 
     obj['_' + propertyName] = value; 
    } 
    }); 
}