Làm cách nào để kiểm tra phần tử biến mất trong trình duyệt?

Làm cách nào tôi có thể kiểm tra một phần tử biến mất khi chuột di chuyển đi?

Tôi không biết đó là ID, lớp hay bất cứ thứ gì nhưng muốn kiểm tra nó.

Các giải pháp tôi đã thử:

Chạy bộ chọn jQuery bên trong bảng điều khiển $('*:contains("some text")')nhưng không gặp may mắn chủ yếu vì phần tử không bị ẩn mà có lẽ đã bị xóa khỏi cây DOM.

Việc kiểm tra thủ công cây DOM để thay đổi cho tôi không có gì vì dường như quá nhanh để nhận thấy những gì đã thay đổi.

SỰ THÀNH CÔNG:

Tôi đã thành công với các điểm dừng sự kiện. Cụ thể - mousedown trong trường hợp của tôi. Chỉ cần vào Sources-> Event Listener Breakpoints-> Mouse-> mousedowntrong Chrome. Sau đó tôi nhấp vào yếu tố tôi muốn kiểm tra và bên trong Scope Variablestôi thấy một số hướng hữu ích.

(Câu trả lời này chỉ áp dụng cho Công cụ dành cho nhà phát triển Chrome. Xem bản cập nhật bên dưới.)

Tìm một phần tử có chứa phần tử biến mất. Nhấp chuột phải vào yếu tố và áp dụng "Break on ...> Subtree Modifying." Điều này sẽ ném tạm dừng trình gỡ lỗi trước khi phần tử biến mất, điều này sẽ cho phép bạn tương tác với phần tử trong trạng thái tạm dừng.

Cập nhật ngày 22 tháng 10 năm 2019: với việc phát hành phiên bản 70, có vẻ như FireFox cuối cùng cũng hỗ trợ loại gỡ lỗi này 2 3 :

Một phương pháp thay thế trong Chrome:

• Mở devTools (F12).
• Chọn tab "Nguồn".
• Trong khi phần tử bạn muốn được hiển thị, nhấn F8 (hoặc Ctrl + /). Điều này sẽ phá vỡ việc thực thi tập lệnh và "đóng băng" DOM ​​chính xác như được hiển thị.
• Từ thời điểm này, sử dụng Ctrl + Shift + C để chọn thành phần.

1. Mở bảng điều khiển
2. Gõ vào setTimeout(()=>{debugger;},5000);
3. nhấn nút Enter

Bây giờ bạn có 5 giây để làm cho phần tử của bạn xuất hiện. Khi nó xuất hiện, hãy đợi cho đến khi trình gỡ lỗi xuất hiện. Miễn là bạn không tiếp tục, bạn có thể chơi với phần tử của mình và nó sẽ không biến mất.

Mẹo hữu ích để tránh lặp lại các bước trên mỗi lần:

thêm phần này dưới dạng bookmarklet:

1. Đánh dấu trang bất kỳ
2. Chỉnh sửa dấu trang mới này
3. Thay thế URL / vị trí bằng: javascript:(function(){setTimeout(()=>{debugger;},5000);})();

Lần tới bạn muốn sử dụng cái này, chỉ cần nhấp / chạm vào dấu trang này.

Tôi đang sử dụng chrome trên Mac ở đó Tôi đã làm theo các bước trên nhưng tôi sẽ cố gắng giải thích thêm một chút:

1. Nhấp chuột phải và đi để kiểm tra yếu tố.
2. Chuyển đến tab nguồn.
3. Sau đó di chuột vào phần tử.
4. Sau đó sử dụng bàn phím F8 hoặc Command(Window) \ . Nó sẽ tạm dừng màn hình ở trạng thái tĩnh và phần tử sẽ không biến mất khi di chuột ra.

Trong Fireorms có các giải pháp khác nhau cho việc này:

1. Bạn có thể sử dụng Break On Mutate bên trong bảng HTML. (với điều này, bạn cũng sẽ có thể tìm ra nó là yếu tố nào)
2. Bạn có thể nhấp chuột phải vào phần tử và chọn Kiểm tra phần tử với Fireorms

Ngoài ra, bạn có thể muốn theo dõi vấn đề 551 , yêu cầu một cách để tạm thời chặn các sự kiện cụ thể.

Biên tập:

Để tìm ra phần tử nào, bạn cũng có thể bật các tùy chọn bảng điều khiển HTML Đánh dấu các thay đổi , mở rộng thay đổi và cuộn thay đổi vào dạng xem để hiển thị phần tử bên trong bảng HTML.

Sebastian

Trong trường hợp của tôi, tôi đã sử dụng tùy chọn đệ quy Mở rộng trên google chrome:

Các bước là:

1. Kiểm tra trường thả xuống
2. Tìm DOM động (tô sáng màu tím)
3. Nhấp chuột phải vào DOM động đó
4. Chọn Mở rộng đệ quy :
5. Chúng ta có thể thấy tất cả các yếu tố ở đó

Đây là một bản demo:

Di chuột qua phần tử bằng chuột và nhấn F8 (phần này trong Chrome) để tạm dừng thực thi tập lệnh. Trạng thái di chuột sẽ vẫn hiển thị cho bạn.

Nó đưa bạn đến tab nguồn. Quay trở lại tab Elements. Mã thời gian này sẽ không biến mất.

bạn có thể xem các yếu tố xuất hiện và biến mất trong thanh tra theo các yếu tố. Nếu bạn điều hướng đến phần tử khi nó hiển thị, bạn sẽ có thể thấy nó biến mất hoặc thấy css của nó thay đổi khi trạng thái thay đổi.

Điều này có thể xảy ra với fireorms trong firefox hoặc trình kiểm tra được xây dựng bằng chrome.

Tôi gặp vấn đề tương tự nhưng tôi sử dụng Firefox thì nó biến mất ngay khi tôi mở phần tử kiểm tra tìm thấy một giải pháp: mở 4 dấu gạch ngang (cài đặt) đi tới nhà phát triển web> Trình gỡ lỗi và ngay lập tức nhấn F8 là phím tắt để tạm dừng tập lệnh trước khi nó khởi động và phát hiện ra rằng bạn đã mở các công cụ dành cho nhà phát triển