সম্পত্তি পরিবর্তনের ব্রেকপয়েন্ট

Question

ফায়ারফক্সের জন্য ফায়ারবগের একটি দুর্দান্ত বৈশিষ্ট্য রয়েছে, "ব্রেক অন প্রপার্টি চেঞ্জ", যেখানে আমি যে কোনও বস্তুর যে কোনও সম্পত্তি চিহ্নিত করতে পারি এবং এটি পরিবর্তনের ঠিক আগে জাভাস্ক্রিপ্ট কার্যকর করা বন্ধ করে দেবে।

আমি গুগল ক্রোমে একই অর্জনের চেষ্টা করছি এবং আমি ক্রোম ডিবাগারে ফাংশনটি খুঁজে পাচ্ছি না। আমি গুগল ক্রোমে এটি কীভাবে করব?

Comments

আপনি যদি এইচটিএমএল উপাদানগুলির সাথে এটি করতে চান তবে দেখুন stackoverflow.com/a/32686203/308851

— chx

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

Comments

একটি প্লাগ আছে যা আমার জন্য এটি করবে?

— আর্সেন জহরে

@ আরসেনজাহারে, ডুনো যাইহোক, আপনি এটি থেকে একটি সহজ ফাংশন করতে এবং পছন্দ মত ব্যবহার করতে পারেন console.watch(obj, 'someProp')।

— কেটসফোগ

এটি অন্তর্নির্মিত বৈশিষ্ট্যের window.locationজন্য যেমন সুরক্ষার কারণে কাজ করে না ।

— qJake

ডিওএম উপাদানগুলির জন্য সেটারগুলি ডিবাগ করার জন্য এই প্যাটার্নটি কিছুটা সংশোধন করা উচিত। আরও তথ্যের জন্য দেখুন mnaoumov.wordpress.com/2015/11/29/…

— mnaoumov

@ ক্যাটস্পফ আপনার কাছে কেন obj._someProp = obj.someProp;এটি প্রয়োজন তা জিজ্ঞাসা করতে পারি, আপনি কী সংরক্ষণাগার সংগ্রহের চেষ্টা করছেন সে সম্পর্কে এটি সম্পর্কহীন বলে মনে হচ্ছে (সম্ভবত আমি কিছুটা মিস করছি না বলে)

— ভিক্টর

Answer 2

2016.03 সম্পাদনা করুন: Object.observeক্রোম 50 এ অবচয় এবং সরানো হয়েছে

2014.05 সম্পাদনা করুন: Object.observeChrome 36 এ যুক্ত হয়েছিল

দেশীয় Object.observeপ্রয়োগের সাথে ক্রোম 36 শিপগুলি এখানে লাভ করা যেতে পারে:

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।

কল স্ট্যাকটি দেখতে, আপনাকে ডিভাইসগুলিতে "অ্যাসিঙ্ক কল স্ট্যাক" বিকল্পটি সক্ষম করতে হবে:

---

আসল উত্তর (২০১২.০7):

console.watch@ ক্যাটস্পফের পরামর্শ অনুসারে একটি স্কেচ:

var console = console || {}; // just in case
console.watch = function(oObj, sProp) {
   var 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 এ, আপনি রানটাইম এ সরাসরি এটি ডিভাইসে পেস্ট করতে পারেন!
• সম্পূর্ণতার জন্য: ফায়ারব্যাগ ১.১০ (ফায়ারফক্স ১৪) এ, আপনাকে এটি আপনার ওয়েবসাইটে ইনজেক্ট করতে হবে (উদাহরণস্বরূপ ফিডলারের মাধ্যমে যদি আপনি নিজে উত্সটি সম্পাদনা করতে না পারেন); দুর্ভাগ্যক্রমে, ফায়ারব্যাগ থেকে সংজ্ঞায়িত ফাংশনগুলি ভাঙ্গা মনে হয় না debugger(বা এটি কনফিগারেশনের বিষয়? দয়া করে আমাকে তখন সংশোধন করুন), তবে console.logকাজ করে।

সম্পাদনা:

নোট করুন যে ফায়ারফক্সের console.watchঅ-মানকতার কারণে ফায়ারফক্সে ইতিমধ্যে উপস্থিত রয়েছে Object.watch। ফায়ারফক্সে, আপনি স্থানীয়ভাবে পরিবর্তনের জন্য দেখতে পারেন:

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

তবে এটি শীঘ্রই (2017 সালের শেষের দিকে) সরানো হবে ।

Comments

যাইহোক, কাস্টম কোডে

— ডিবাগারটি

@ কোলরেইডকে গিটারে পুনরুদ্ধার করতে আমাদের অবশ্যই মানটি কোথাও সঞ্চয় করতে হবে; এটি সংরক্ষণ করা যায় না oObj[sProp], কারণ প্রাপ্তি একটি অসীম পুনরাবৃত্তি প্রবেশ করবে। এটি ক্রোমে চেষ্টা করুন, আপনি পাবেন RangeError: Maximum call stack size exceeded।

— jakub.g

আমি এইটিকে যুক্ত করতে চাই, asyncচেকবক্সটি যেমন এই পদ্ধতির সাথে এত সোনার: html5rocks.com/en/tutorials/developertools/async-call-stack

— cnp

@ ফিলিও async@cnp লিখেছেন যেভাবে চেকবক্সটি দিয়ে স্ট্যাকটি দেখা সম্ভব , আমার আপডেটটি দেখুন

— jakub.g

এই উত্তরটি আপডেট করা উচিত Object.observe: অবহিত

— আমির গনেন

Answer 3

এর জন্য একটি গ্রন্থাগার রয়েছে: ব্রেকওন ()

যদি আপনি এটিকে স্নিপেট (উত্স -> স্নিপেটস -> ডান ক্লিক করুন -> নতুন -> এটি পেস্ট করুন ) হিসাবে ক্রোম দেব সরঞ্জামগুলিতে যুক্ত করেন তবে আপনি যে কোনও সময় এটি ব্যবহার করতে পারেন।

---

এটি ব্যবহার করতে, দেব-সরঞ্জামগুলি খুলুন এবং স্নিপেট চালান। তারপরে myObject.myPropertyপরিবর্তিত হয়ে গেলে ব্রেক করতে , ডি-কনসোল থেকে এটিকে কল করুন:

breakOn(myObject, 'myProperty');

আপনি আপনার প্রকল্পের ডিবাগ-বিল্ডে লাইব্রেরিটি যুক্ত করতে পারেন যাতে breakOnপ্রতিবার পৃষ্ঠাটি রিফ্রেশ করার সময় আপনাকে আবার কল করার দরকার নেই ।

Answer 4

এটির জন্য নতুন প্রক্সি অবজেক্টটি ব্যবহার করেও করা যেতে পারে যার উদ্দেশ্য হ'ল: পাঠ্যকে বাধাগ্রস্ত করে এবং প্রক্সি দ্বারা আবৃত বস্তুকে লেখায়। আপনি কেবল প্রক্সিটিতে পর্যবেক্ষণ করতে চান এমন অবজেক্টটি কেবল মোড়ানো এবং আপনার আসলটির পরিবর্তে নতুন মোড়ানো বস্তুটি ব্যবহার করুন।

উদাহরণ:

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

এখন মোড়কযুক্ত অবজেক্টটি ব্যবহার করুন যেখানে আপনি পরিবর্তে আসলবজেক্ট সরবরাহ করবেন এবং কল স্ট্যাকটি ব্রেক এ পরীক্ষা করুন।

Comments

ট্র্যাক হওয়া কেস ছাড়া অন্যটির জন্য এটির জন্য ব্যর্থ না হওয়ার জন্য প্রক্সি setঅবশ্যই ফিরে আসতে trueহবে।

— কেওক্রেন

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

Answer 6

এই সমাধানটির নিজস্ব সংস্করণ লেখার সিদ্ধান্ত নিয়েছে, এটি ক্রোমের ডিভটুলগুলিতে একটি স্নিপেটে সংরক্ষণ করুন এবং এটি একটি আইআইএফইতে জড়িয়ে দিয়েছেন যা নোড এবং ব্রাউজার উভয়কেই সমর্থন করে। পর্যবেক্ষককে বস্তুর কোনও সম্পত্তির পরিবর্তে স্কোপ ভেরিয়েবল ব্যবহার করার জন্য পরিবর্তন করা হয়েছে, যেমন নাম সংঘর্ষের কোনও সম্ভাবনা নেই এবং কীগুলি এনুমারি করে এমন কোনও কোড তৈরি করা নতুন "প্রাইভেট কী" দেখতে পাবে না:

(function (global) {
  global.observeObject = (obj, prop) => {
    let value

    Object.defineProperty(obj, prop, {
      get: function () {
        return value
      },

      set: function (newValue) {
        debugger
        value = newValue
      },
    })
  }
})(typeof process !== 'undefined' ? process : window)

Answer 7

Chrome এর সর্বশেষ সংস্করণগুলিতে অন্তর্নির্মিত এই বৈশিষ্ট্যটি রয়েছে https://developers.google.com/web/updates/2015/05/view-and-change-your-dom-breakpPoint ।

সুতরাং কাস্টম লাইব্রেরি এবং সমাধানের আর প্রয়োজন নেই, পরিদর্শকের DOM উপাদানটিতে ডান ক্লিক করুন এবং 'ব্রেক অন' -> 'বৈশিষ্ট্য পরিবর্তনগুলি' বেছে নিন এবং এটিই।

Comments

তিনি (জেএস অবজেক্ট) সম্পত্তি পরিবর্তনের জন্য বলেছেন,

— ডিওএম

@ আইভিকা এটি একটি ভাল কৌশল, তবে এটি লাগানোর জন্য এটি ভুল জায়গা। এটি একটি মন্তব্য হিসাবে ঠিক হবে, কিন্তু উত্তর হিসাবে না।

— bnieland