Tìm javascript đang thay đổi phần tử DOM

Question

Có bất kỳ kỹ thuật nào tôi có thể sử dụng để tìm javascript đang thay đổi thành phần HTML không? Tôi gặp sự cố khi tìm kiếm cách một yếu tố cụ thể nhận được kiểu nội tuyến là display:none được thêm khi tải. Tôi biết tôi sẽ tìm thấy kịch bản thực hiện điều này cuối cùng, nhưng tôi muốn quá trình đó trở nên dễ dàng hơn.

Giải pháp lý tưởng của tôi sẽ là cách phá vỡ thực thi javascript ngay khi phần tử DOM được sửa đổi. Tôi biết về khả năng của công cụ dev của Chrome khi nhấp chuột phải vào phần tử và chọn Break On> Attribute Modifications. Tuy nhiên, điều này đang xảy ra đôi khi trong tải trang, vì vậy nó muốn được thật sự tốt đẹp nếu tôi có thể chèn một số kịch bản trước khi tất cả các tờ khai kịch bản khác mà nói 'xem cho một phần tử với lớp XYZ' và phá vỡ thi JS trên sửa đổi phần tử. Sau đó, JS thực thi sẽ phá vỡ nơi tôi có thể thấy JS đã sửa đổi phần tử hoặc có thể tìm thấy bằng cách nhìn vào ngăn xếp cuộc gọi, nhưng theo một trong hai cách, tôi có thể thấy tập lệnh kích hoạt ngắt. Tôi đã tìm thấy một số câu trả lời cho tôi biết làm thế nào để làm điều đó bằng các công cụ dev Chrome/Firebug, nhưng cũng giống như tôi đã nói, câu hỏi này là về cách tiếp cận theo chương trình.

Answer 1

Nhấp chuột phải vào phần tử DOM> Break trên> Thuộc tính Modifications

Qua # 3 trong http://www.elijahmanor.com/7-chrome-tips-developers-designers-may-not-know/

Answer 2

Chỉ cần đặt trình gỡ lỗi ở bất kỳ đâu trong tệp của bạn và khi bạn chạy tệp, mã sẽ tạm dừng trên dòng chính xác mà bạn đã đặt trình gỡ lỗi. Điều này sẽ cho phép bạn sử dụng bảng điều khiển dành cho nhà phát triển (giả sử trong chrome) và truy cập vào các biến khác nhau và một phần mã của bạn dễ dàng hơn.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger

Answer 3

bạn có thể sử dụng: -

document.documentElement.addEventListener('DOMAttrModified', function(e){ 
    if (e.attrName === 'style') { 
    console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue); 
    } 
}, false); 

Có xem xét điều này: -

Event detect when css property changed using Jquery