Kiểm tra menu thả xuống trong Chrome mới

Tôi đang sử dụng Phiên bản Chrome 41.0.2272.101 m (mới nhất) và bản cập nhật này bị lỗi. Họ nói rằng, khi bạn mở trình kiểm tra, bất kỳ thay đổi DOM nào sẽ nhấp nháy với màu tím trên phần tử đã thay đổi (như trong Firefox), nhưng bây giờ tôi không thể kiểm tra bất kỳ đối tượng được di chuột nào (cũng như trong FF, đó là lý do tại sao tôi không thích để sử dụng nó khi phát triển giao diện người dùng).

Tôi đang nói về các sự kiện được kích hoạt js, chẳng hạn như superfish. Trước đây, tôi có thể di chuột qua menu và che menu bằng trình kiểm tra và menu sẽ vẫn mở và tôi có thể vào trình kiểm tra để xem trực tiếp những thành phần giả nào được tạo, thay đổi phần đệm, v.v. và xem sự thay đổi. Bây giờ, khi tôi di chuột qua menu và nhấp chuột phải để kiểm tra nó, menu sẽ đóng lại và tôi không thể kiểm tra nó!

Tôi đã thử kéo thanh tra qua, nhưng không giúp được gì. 'Tính năng' mới này thật khó chịu. Có cách nào để kiểm tra các sự kiện được kích hoạt js mà không đặt điểm ngắt trên các phần tử (cách này hoạt động, nhưng hơi đau ở mông)?

Di chuột qua phần tử của bạn và nhấn F8 (điều này sẽ chỉ hoạt động 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ị với bạn. Nếu bạn đang sử dụng máy Mac, bạn có thể phải mở tùy chọn hệ thống và chọn hộp kiểm "Sử dụng tất cả F1, F2, v.v." (Hoặc chỉ cần sử dụng fn + F8).

Đôi khi nó chỉ hoạt động nếu bạn đang ở trong tab Nguồn của trình kiểm tra.

Tùy thuộc vào loại phần tử menu, tôi gặp phải vấn đề này với các menu đầu vào thả xuống. Lý do nó biến mất khi tôi kiểm tra nó, là vì một blursự kiện luôn được kích hoạt trên phần tử khi tôi nhấp vào bất kỳ đâu bên ngoài phần tử.

Một cách mà tôi có thể kiểm tra phần tử là ngăn sự kiện mờ được kích hoạt là bằng cách xóa trình nghe sự kiện mờ:

• Kiểm tra yếu tố đầu vào trên Chrome
• Chuyển đến tab Trình nghe sự kiện và xóa sự kiện mờ

Sau khi sự kiện mờ được loại bỏ, bạn có thể mở menu và kiểm tra nó mà không biến mất

Trong Chrome, nhấn F12 để mở bảng điều khiển dành cho nhà phát triển, sau đó nhấp vào Cài đặt (biểu tượng bánh răng cưa) hoặc nhấn F1:

sau đó tìm và chọn tùy chọn "Giả lập một trang có tiêu điểm".

Trên Mac, bạn có thể nhấn cmd+ \để tạm dừng tập lệnh sau khi mở menu thả xuống. Sau đó, bạn có thể sử dụng shift+ cmd+ cđể kiểm tra các phần tử.

Bây giờ, khi tôi di chuột qua menu và nhấp chuột phải để kiểm tra nó, menu sẽ đóng lại và tôi không thể kiểm tra nó!

Tôi gặp phải vấn đề tương tự và những gì tôi đã sử dụng là tùy chọn Mở rộng đệ quy trên các công cụ dành cho nhà phát triển chrome:

Các bước là:

1. Kiểm tra trường thả xuống
2. Tìm DOM động (phần đánh dấu 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ố đều ở đó

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

Bạn có thể đặt khoảng thời gian ghi ra nội dung của một phần tử nhất định trong bảng điều khiển JS mỗi giây. Thả cái này vào bảng điều khiển và mở menu thả xuống.

setInterval(() => 
    console.log(document.querySelector('.Select-menu-outer').outerHTML),
1000)

Trong Firefox

Trong Thanh tra, nhấp chuột phải vào nút có chứa danh sách thả xuống, chọn:

Break on ...> Sửa đổi cây con

Điều này sẽ tạm dừng thực hiện tại thời điểm trình đơn thả xuống ... tốt ... được thả xuống.

Tôi nghĩ rằng bạn có thể sử dụng Trình chỉnh sửa CSS trong Chrome để áp dụng trạng thái, ví dụ: trạng thái 'di chuột'.

Trong Công cụ dành cho nhà phát triển, bạn chọn một phần tử. Ở bên tay phải, bạn có một hình vuông với một mũi tên trên đó. Nhấp vào đó và bạn có thể chọn một trạng thái. Ví dụ: chọn di chuột và bạn sẽ thấy cả cửa sổ và bản cập nhật CSS của mình như thể phần tử đang được di chuột ngay bây giờ.

Không có biện pháp khắc phục nào ở trên hiệu quả với tôi. Vì trình đơn thả xuống của chúng tôi (dựa trên React) sẽ đóng lại với bất kỳ nhấp chuột nào (phải hoặc trái) Vì vậy, chúng tôi đã tìm ra giải pháp dưới đây:

• Trong công cụ dành cho nhà phát triển Chrome Open
• trước tiên hãy nhấp vào menu thả xuống ở trạng thái thu gọn và để nó mở rộng với các tùy chọn
• sau đó trong phần phần tử, nhấp chuột phải vào nút div (đảm bảo không nhấp chuột trái trước khi nhấp chuột phải), chứa chi tiết của các mục thả xuống
• Sau đó chọn tùy chọn ' Mở rộng đệ quy '
• Sau đó, các chi tiết bắt buộc đã được hiển thị

Thay đổi HTML trong cửa sổ thành phần

• Di chuột qua menu mà bạn muốn tiếp tục mở ở chế độ Kiểm tra .
• Quan sát các thay đổi HTML trên phần tử trong cửa sổ Phần tử giữa các trạng thái mở / đóng của menu. Hầu hết thời gian đây là một sự thay đổi phong cách.
• Khi bạn tìm ra điều gì làm cho menu mở và đóng (trong ví dụ này, một lớp có tên "dropdownOpen" được thêm và xóa giữa các trạng thái menu), hãy nhấp đúp vào HTML trong tab Phần tử và thực hiện các thay đổi cần thiết. Trong ví dụ này, chúng tôi thêm lớp "dropdownOpen" vào <li>phần tử.

Sử dụng jQuery trong Cửa sổ điều khiển

Nếu bạn cần lặp lại hành vi này, bạn có thể sử dụng jQuery. Bạn chọn phần tử bằng jQuery và thực hiện các thay đổi cần thiết trong bảng điều khiển . Trong ví dụ này, chúng tôi chọn phần tử theo id của nó và thêm lớp "dropdownOpen" vào nó như sau:

jQuery("#menu-item-11012").addClass("dropdownOpen");