DOM 요소의 모든 변경 사항에 대해 디버거를 사용할 수 있습니까?

Question

특정 DOM 요소에 영향을주는 코드를보고 싶습니다.

그러나 나는 또한 모든 자바 스크립트가 문제를 일으킬 수있는 참조/선택자를 검색하지 않아도되는 것을 좋아합니다.

브라우저 디버거가 특정 DOM 요소의 변경 사항을 깨뜨리는 기술이있는 사람이 있습니까? 나는 특정 브라우저 또는 확장 기능이 작동하도록 요구합니다.

Answer 1

이 모든 스크립트를 작성하지 않고도 행할 Firebug 및 Chrome의 개발자 도구 (아마도 다른 사람은 더 이상 검사하지 않았습니다)에서. 방화범

:

1. 이동 HTML 탭
2. 마우스 오른쪽 단추로 클릭
3. 선택 "속성 변경에 브레이크"모니터, 또는 "자식 추가 또는 제거에 휴식하고 싶은 요소를 "또는"요소 제거 "크롬 개발자 도구에서

에 브레이크

1. 이동 요소 탭에
2. 마우스 오른쪽 단추로 클릭 한 다음,
3. 선택 "에 ... 브레이크를"모니터 "하위 트리 수정"또는 "수정 속성"을 선택, 또는 "노드 제거"하고 싶은 요소를

실제로 999의 대답을 시도한 후에이 사실을 발견했지만 주어진 코드가 나를 위해 작동하지 않았습니다. 또한 모든 DOM 하위 트리에서 이벤트를 모니터링 할 수있는 Chrome의 가능성은 정말 좋은 것처럼 보입니다.

Answer 2

참고 : 아래의 이벤트는 질문을 받았지만 더 이상 최신 이벤트가 아닐 때의 이벤트입니다. 권장되는 대안은 MutationObservers이지만, 사람들은 여전히 ​​

MutationObserver on MDN

---

는 (설치 Firebug으로, 파이어 폭스에서)이 시도 성숙되어

function breakOnChange(el) { 

    if (!el.addEventListener) return; 

    el.addEventListener('DOMAttrModified', 
     function(DOMAttrModifiedEvent){debugger}, true); 

    el.addEventListener('DOMNodeInserted', 
     function(DOMNodeInsertedEvent){debugger}, true); 

    el.addEventListener('DOMNodeRemoved', 
     function(DOMNodeRemovedEvent){debugger}, true); 

} 

// Usage: 
breakOnChange(someDomNode);