속성 변경 시 중단점

속성 변경 시 중단점

파이어폭스용 파이어버그에는 "속성 변경 시 중단"이라는 멋진 기능이 있는데, 이 기능을 통해 객체의 속성을 표시할 수 있으며 변경 직전에 자바스크립트 실행을 중지합니다.

저는 구글 크롬에서도 동일한 기능을 달성하려고 하는데 크롬 디버거에서 기능을 찾을 수가 없습니다.구글 크롬에서 어떻게 합니까?

소스를 가지고 장난치는 것이 괜찮다면 접근자를 사용하여 속성을 다시 정의할 수 있습니다.

// 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.observeChrome 50에서 더 이상 사용되지 않고 제거됩니다.

**편집 2014.05: Chrome 36** 'Object.Observe' 가 추가되었습니다를 에합니다.

Chrome 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.

호출 스택을 보려면 Dev Tools에서 "비동기 호출 스택" 옵션을 활성화해야 합니다.

---

원답 (2012.07):

A console.watchkatspaugh치에서 :

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

호환성:

• Chrome 20에서는 런타임에 Dev Tools에 직접 붙여넣을 수 있습니다!
• 14수 없는 안타깝게도 에서 정의된 않는 것 Firebug 1.10(Firefox 14) 에서는(: Fiddler 를). 안타깝게도 Firebug에서 정의된 기능이 작동하지 않는 것 같습니다.debugger(아니면 구성의 문제입니까?그럼 정정해주세요) 하지만console.log작동하다.

Firefox는 콘솔에 에서는.watch'는 Firefox의 비표준 ['Object]로 인해 이미 존재합니다.watch'] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/watch) .따라서 Firefox에서는 기본적으로 변경 사항을 확인할 수 있습니다.

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

:Object.watch파이어폭스 57에서 제거되었습니다.

이를 위한 라이브러리가 있습니다: BreakOn()

Chrome dev 도구에 토막글(소스 --> 토막글 --> 우클릭 --> new --> paste this --> run)로 추가하면 언제든지 사용할 수 있습니다.

---

사용하려면 dev-tools를 열고 스니펫을 실행합니다.그 다음에 언제 깨지?myObject.myProperty변경되었습니다. dev-console에서 이를 호출합니다.

breakOn(myObject, 'myProperty');

라이브러리를 프로젝트의 디버그 빌드에 추가하여 호출할 필요가 없습니다.breakOn페이지를 새로 고칠 때마다 다시 실행할 수 있습니다.

이 작업은 프록시로 래핑된 개체에 대한 읽기 및 쓰기를 가로채는 것이 목적인 새 프록시 개체를 사용하여 수행할 수도 있습니다.관찰하려는 개체를 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);

이제 rawedObject를 사용하여 원래 Object를 대신 제공하고 중단 시 콜 스택을 검사합니다.

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

이 솔루션의 나만의 버전을 작성하여 Chrome의 DevTools에 토막글로 저장하고 Node와 Browser를 모두 지원해야 하는 IIFE로 포장하기로 결정했습니다.또한 개체의 속성이 아닌 스코프 변수를 사용하도록 관찰자를 변경하여 이름이 충돌할 가능성이 없으며 키를 열거하는 코드는 새로 생성되는 "개인 키"를 "보기"하지 않습니다.

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

Alexandos Katechis의 우수한 솔루션을 기반으로 부동산의 원래 가치를 방해하지 않는 버전의 스니펫이 있습니다.제가 사용할 때 생각하는 것과 더 잘 어울리도록 이름을 바꿨습니다.

용도:

1. 소스 -> 스니펫을 통해 스니펫 추가
2. 필요한 경우 Command-O를 누르고 breakOnChange 스니펫을 실행하도록 선택합니다.
3. 불러breakOnChange(anyObject, 'propertyName')콘솔에서
4. 변경을 유발하는 조치를 취합니다.
5. 디버거에서 멈춤

이것은 jQuery와 같은 글로벌 라이브러리가 서드파티 스크립트에 의해 짓밟히는 것과 같은 것들을 발견하는데 매우 유용합니다.

(function (global) {
  global.breakOnChange = (obj, prop) => {
    let value = obj[prop]

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

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

Chrome에는 이 기능이 최신 버전 https://developers.google.com/web/updates/2015/05/view-and-change-your-dom-breakpoints 에 내장되어 있습니다.

따라서 사용자 지정 라이브러리와 솔루션은 더 이상 필요하지 않습니다. 검사기에서 DOM 요소를 마우스 오른쪽 버튼으로 클릭하고 'Break on' -> 'Attribute modifications'를 선택하면 됩니다.

언급URL : https://stackoverflow.com/questions/11618278/breakpoint-on-property-change