Làm cách nào tôi có thể kiểm tra phần tử html biến mất khỏi DOM khi mất tiêu điểm?

Tôi đang cố kiểm tra các thuộc tính CSS từ đầu vào vào một ô của bảng. Đầu vào xuất hiện khi nhấp và biến mất khi mất tiêu điểm, như khi tôi cố kiểm tra nó. Làm thế nào tôi có thể làm điều đó để không bị mất tập trung trong khi tôi chuyển sang một cửa sổ khác (thanh tra)?

Trong trình duyệt Chrome, mở Công cụ dành cho nhà phát triển và chọn tab Thành phần , sau đó mở menu ngữ cảnh của nút cha của phần tử bạn muốn kiểm tra, trong menu ngữ cảnh, nhấp vào Break on > Subtree sửa đổi .

Sau đó, bạn chỉ cần nhấp vào trang và bạn sẽ vào thanh tra mà không mất tập trung hoặc mất yếu tố bạn muốn kiểm tra.

Bạn có thể chụp phần tử biến mất nếu bạn tạm dừng thực thi JavaScript bằng phím tắt mà không cần di chuyển chuột. Đây là cách bạn làm điều này trong Chrome:

1. Mở Công cụ dành cho nhà phát triển và đi đến Nguồn.

2. Lưu ý các phím tắt để tạm dừng thực thi tập lệnh F8.

   

3. Tương tác với UI để có được phần tử xuất hiện.

4. Trúng F8.
5. Làm thế nào bạn có thể di chuyển chuột của bạn xung quanh, kiểm tra DOM, bất cứ điều gì. Các yếu tố sẽ ở lại đó.

Thủ thuật này hoạt động trong Firefox và các trình duyệt hiện đại khác.

Nếu vẫn thất bại, hãy nhập cái này vào Bảng điều khiển:

setTimeout(() => { debugger; }, 5000)

Sau đó, bạn đã có 5 giây (hoặc thay đổi giá trị thành bất kỳ thứ gì khác) để làm cho bất cứ điều gì bạn muốn gỡ lỗi xuất hiện.

Không có câu trả lời nào khác phù hợp với tôi - cây DOM tiếp tục được sửa đổi (tức là thứ tôi quan tâm đã biến mất) ngay trước khi tập lệnh tạm dừng.

Không chắc chắn nếu điều này hoạt động trong tình huống của bạn nhưng thông thường (và trong mọi trường hợp đáng được đề cập về vấn đề này vì đây là một công cụ tuyệt vời) trong Công cụ dành cho nhà phát triển Chrome, bạn có thể mô phỏng trạng thái thành phần và một trạng thái cũng vậy :focus.

Để làm như vậy, hãy chuyển đến Elementstab trong Công cụ dành cho nhà phát triển và đảm bảo bạn ở Stylesphần bên phải (đây phải là vị trí mặc định khi bạn khởi động Công cụ dành cho nhà phát triển). Bây giờ chỉ cần các Styles ở góc trên bên phải bạn có một biểu tượng Toggle Element State. Khi bạn nhấp vào nó, bạn có thể mô phỏng :active, :hover, :focusvà :visitedcho nguyên tố này bạn đã chọn trên bên trái theo quan điểm mã của bạn.

Trong Chrome trên trang công cụ dành cho nhà phát triển cho trang đang thử nghiệm ... hãy nhấp vào menu tùy chọn và mở cài đặt cho tùy chọn ... trong DevTools kích hoạt 'Giả lập trang tập trung'

Sau đó trong trang thử nghiệm khiến các yếu tố xuất hiện. Điều này hoạt động để giữ cho kết quả tìm kiếm bật lên của tôi được tập trung để ở trên màn hình để tôi có thể làm việc với nó.

Không phải là một giải pháp thực sự, nhưng nó thường hoạt động (:

1. Tập trung vào yếu tố
2. Nhấp chuột phải vào menu ngữ cảnh
3. Chuyển xuống công cụ dành cho nhà phát triển

Tôi đã có một tình huống rất khó khăn và không có câu trả lời nào được thực hiện từ đây (Tôi đã không xác minh các câu trả lời thay đổi container, đó là cơ thể cho tôi, hoặc sự kiện ban đầu, vì tôi không biết điều đó). Cuối cùng tôi đã tìm thấy một cách giải quyết bằng cách vượt qua Điểm dừng Trình nghe sự kiện điều khiển trong Trình kiểm tra Chrome. Có lẽ đó cũng là một cách phá vỡ trình duyệt chéo cho các tình huống phức tạp, ngay cả F8 hoặc nhấp chuột phải cũng ẩn cửa sổ bật lên:

Dán Javascript sau vào bảng điều khiển dành cho nhà phát triển trình duyệt:

// Delayed console log of parent element with disappearing child element(s)
// Once code is trigger, you have 3 seconds to trigger the hidden element before it snapshots.
// The hidden elements should appear in the console ready to inspect.

var timer = 3000; //time before snapshot
var parent_of_element_to_inspect = 'div.elementcontainer'; //container of element to snapshot
setTimeout(function(){
 console.log(document.querySelector(parent_of_element_to_inspect).cloneNode(true));
},timer);

Tôi có cách khắc phục nhanh hơn vì tôi không giỏi sử dụng các công cụ, đây là những gì tôi làm.

event.originalEvent.preventDefault();
event.originalEvent.stopImmediatePropagation();
event.originalEvent.stopPropagation();

Nếu bạn mở Chrome DevTools và sau đó kích hoạt trình kiểm tra phần tử bằng các phím tắt, nó sẽ giải quyết vấn đề.

Mac: Cmd+Opt+J và sau đóCmd+Opt+C

Windows: Ctrl+Shift+J và sau đóCtrl+Shift+C

[