DOM 속성 변경 디버깅

어딘가에 페이지의 요소 중 하나에서 내 코드의 일부가 내가 기대하지 않는 스타일 속성을 가져옵니다. 즉, style = "position : fixed"가됩니다. 이 문제는 Firebug의 HTML 탭에서 볼 수 있지만 코드에서 찾을 수는 없습니다. 응용 프로그램이 상당히 크고 장소를 찾기 위해 모든 코드를 살펴볼 수없고 몇 가지 타사 라이브러리가 사용되고 있습니다 (jQuery 중 하나임).DOM 속성 변경 디버깅

제 질문은 어떻게 든이 스타일을 변경하여 잡아 추적을 얻을 수 있습니까?

출처

2009-08-10 Maxim Sloyko

음, 인터넷 검색 및 실험의 몇 시간 후에는 최고의 하나는 설정과 같은 MutationEvent 핸들러 (파이어 폭스를 지원)을 할 수있는 것 같다

var node_modified = function(evt) { 
    if(evt.attrName == 'style') { 
     alert('Style is changing from ' + evt.prevValue + ' to ' + evt.newValue); 
    } 
} 
var test_close = document.getElementById('test_close'); 
test_close.addEventListener('DOMAttrModified', node_modified, false);

다음 설정을 코드 전체에 어떤 종류의 로깅이 발생하고이 이벤트가 트리거되는 시점을 확인하십시오. 유감스럽게도 이벤트 핸들러의 스택 추적에는 이벤트가 트리거 된 코드의 위치에 대한 정보가 없으므로 mutation 이벤트 핸들러에 중단 점을 설정하고 스택 추적을 볼 수 없습니다. 논리의 종류,하지만 난 그 기능을 파이어 버그에서 구현할 수있는 몇 가지 해킹과 생각합니다.

감사합니다.

출처

2009-08-10 12:19:04

정말 디버거가 필요한 것 같습니다. Firebug has one built in, 그렇지 않으면 좀 더 성가 시지만 아마도 더 효과적이라고 생각하는 시도를 Venkman에게 줄 수 있습니다.

행운을 빌어 요! :)

출처

2009-08-10 09:38:51

글쎄, 파이어 버그를 사용하지만 속성이 변경되는 곳에서 브레이크 포인트를 설정하는 방법을 찾을 수 없다. 왜냐하면 나는 그것이 어디에 있는지 정확히 알지 못하기 때문에 내가 원하는 것을 찾는다. –

Google 크롬에서 페이지의 요소를 마우스 오른쪽 버튼으로 클릭하고 "요소 검사"를 선택하십시오. 개발자 도구 창 또는 창이 소스보기에서 선택한 요소와 함께 열립니다. 그런 다음 선택한 태그를 마우스 오른쪽 버튼으로 클릭하고 "속성 수정 중단"을 선택할 수 있습니다.

출처

2011-06-30 18:26:00 rxgx

페이지를 다시로드하거나 뷰 각도를 각도로 변경할 때 작동하지 않습니다. – Sammi

Firebug의 html inspector에서 노드를 마우스 오른쪽 버튼으로 클릭 할 수 있으며 속성 변경시 방해 할 수있는 옵션이 있습니다.

중단 점은 페이지 새로 고침을 통해 유지되며 호출 스택을 탐색 할 수도 있습니다.

출처

2013-03-04 18:51:11 Jens

DOM 속성 변경 디버깅

답변

관련 문제