Công cụ Chrome Dev theo dõi các thay đổi DOM về tương tác

Question

Trong tab Phần tử công cụ nhà phát triển Chrome, nếu bằng cách nhấp vào nút một thuộc tính thay đổi (class="menu-item" ->class="menu-item active"), bạn có thể thấy đèn flash màu tím trên phần tử cho biết thay đổi. Điều này là rất hữu ích nhưng trong một tài liệu lớn, bạn phải mở rộng tất cả các yếu tố xuống sâu để xem những gì đang xảy ra.

Có cách nào bạn có thể ghi/liệt kê tất cả các thay đổi DOM khi một tương tác xảy ra không? Không cụ thể trong Chrome nhưng bất kỳ công cụ nào khác sẽ tuyệt vời. Hãy suy nghĩ về nó như là một diff giữa trước và sau khi tương tác nhưng cụ thể cho CSS.

Answer 1

Công cụ Chrome Dev cung cấp cho bạn tùy chọn để kiểm tra các sự kiện nhấp, bạn có thể kích hoạt nó bằng cách nhấp vào tab 'nguồn', sau đó bạn có thể mở menu thả xuống 'Trình nghe sự kiện' và xem các sự kiện 'Chuột', nếu bạn mở menu thả xuống đó, bạn có thể chọn các sự kiện nhấp chuột.

Bạn cũng có thể kiểm tra những thay đổi thuộc tính từ các yếu tố tab bằng cách nhấp vào phần tử với nút chuột phải và chọn 'phá vỡ điều chỉnh bật/thuộc tính'