Xem: trạng thái di chuột trong Công cụ dành cho nhà phát triển Chrome

Tôi muốn xem :hoverphong cách cho một mỏ neo tôi đang di chuột trên Chrome . Trong Fireorms , có một kiểu thả xuống cho phép tôi chọn các trạng thái khác nhau cho một phần tử.

Tôi dường như không thể tìm thấy bất cứ điều gì tương tự trong Chrome. Tui bỏ lỡ điều gì vậy?

Bây giờ bạn có thể thấy cả các quy tắc lớp giả và buộc chúng vào các phần tử.

Để xem các quy tắc như :hovertrong ngăn Kiểu, bấm vào :hovvăn bản nhỏ ở trên cùng bên phải.

Để buộc một phần tử vào :hovertrạng thái, nhấp chuột phải vào nó và chọn :hover.

Các mẹo bổ sung trên bảng thành phần trong Phím tắt Công cụ dành cho nhà phát triển Chrome .

EDIT: Câu trả lời này là trước khi sửa lỗi, xem câu trả lời của tnothcutt.

• Nhấp chuột phải vào phần tử, nhưng KHÔNG di chuyển con trỏ chuột ra khỏi phần tử, giữ nó ở trạng thái di chuột.
• Chọn kiểm tra phần tử qua bàn phím, như trong mũi tên nhấn lên và sau đó nhấn phím Enter.
• Tìm trong các công cụ dành cho nhà phát triển trong Quy tắc CSS được so sánh, bạn sẽ có thể thấy: di chuột.

PS: Tôi đã thử điều này trên một trong những thẻ câu hỏi của bạn.

Tôi muốn xem trạng thái di chuột trên các công cụ Bootstrap của tôi. Việc buộc trạng thái: hover trong Chrome dev Tools không tạo ra đầu ra cần thiết, nhưng việc kích hoạt sự kiện mouseenter thông qua bảng điều khiển đã thực hiện thủ thuật trong Chrome. Nếu jQuery tồn tại trên trang bạn có thể chạy:

$('.YOUR-TOOL-TIP-CLASS').trigger('mouseenter');

Có một số cách để xem các kiểu HOVER STATE trong Công cụ dành cho nhà phát triển Chrome.

Phương pháp 01

Phương pháp 02

Với Toll nhà phát triển mặc định của Firefox

Với Firebird

Trong trường hợp có ích, điều này dường như dễ dàng hơn trong Chrome mới nhất (47.0.2526.106):

Kiểm tra phần tử và sau đó nhấp vào ba chấm trắng trong máng nước bên trái:

Sau đó chọn trạng thái phần tử mong muốn từ danh sách thả xuống này:

Tôi không nghĩ có một cách để làm điều này. Tôi đã gửi một yêu cầu tính năng . Nếu có một cách, các nhà phát triển tại Google chắc chắn sẽ chỉ ra và tôi sẽ chỉnh sửa câu trả lời của mình. Nếu không, chúng ta sẽ phải chờ và xem. (bạn có thể đánh dấu sao vấn đề để bình chọn cho nó)

Nhận xét 1 của thành viên dự án Chrome : Trong 10.0.620.0, bảng Kiểu hiển thị: kiểu di chuột cho phần tử được chọn nhưng không: hoạt động.

(tính đến bài đăng này) Phiên bản kênh ổn định hiện tại là 8.0.552.224.

Bạn có thể thay thế cài đặt kênh Google Chrome ổn định của mình bằng kênh Beta hoặc kênh Dev (Xem Kênh phát hành truy cập sớm ).

Bạn cũng có thể cài đặt bản cài đặt thứ cấp của chrome thậm chí còn cập nhật hơn kênh Dev .

... Bản dựng Canary được cập nhật thường xuyên hơn kênh Dev và không được kiểm tra trước khi phát hành. Do bản dựng Canary đôi khi có thể không sử dụng được, nên nó không thể được đặt làm trình duyệt mặc định của bạn và có thể được cài đặt cùng với bất kỳ kênh nào ở trên của Google Chrome. ...

Tôi biết rằng những gì tôi làm là khá giải quyết, tuy nhiên nó hoạt động hoàn hảo và đó là cách tôi làm mọi lúc.

Sau đó, tiến hành như thế này:

• Trước tiên, hãy đảm bảo Chrome Developer Tools không bị khóa.
• Sau đó, chỉ cần di chuyển bất kỳ phía nào của cửa sổ Dev Tools vào giữa phần tử bạn muốn kiểm tra trong khi di chuột.

• Cuối cùng, di chuột vào phần tử, nhấp chuột phải và kiểm tra phần tử, di chuyển chuột vào cửa sổ Dev Tools và bạn sẽ có thể chơi với phần tử của mình: hover css.

Chúc mừng!

Tôi đã gỡ lỗi hovertrạng thái menu với Chrome và đã làm điều này để có thể thấy mã trạng thái di chuột:

Trong Elementsbảng điều khiển nhấp vào Toggle Element statenút và chọn:hover .

Trong Scriptsbảng điều khiển đi đến Event Listeners Breakpointstrong phần dưới cùng bên phải và chọnMouse -> mouseup .

Bây giờ hãy kiểm tra Menu và chọn hộp bạn muốn. Khi bạn nhả nút chuột, nút này sẽ dừng và hiển thị cho bạn trạng thái di chuột của phần tử đã chọn trong Elementsbảng điều khiển (xem Stylesphần).

Thay đổi để di chuột trạng thái trong Chrome khá dễ dàng, chỉ cần làm theo các bước dưới đây:

1) Nhấp chuột phải vào trang của bạn và chọn kiểm tra

2) Chọn thành phần bạn muốn kiểm tra trong DOM

3) Chọn biểu tượng pin (Chuyển đổi trạng thái phần tử)

4) Sau đó đánh dấu di chuột

Bây giờ bạn có thể thấy trạng thái di chuột của DOM đã chọn trong trình duyệt!

Tôi có thể thấy phong cách bằng cách làm theo các bước dưới đây được đề xuất bởi Babiker - "Phần tử nhấp chuột phải, nhưng KHÔNG di chuyển con trỏ chuột của bạn ra khỏi phần tử, giữ nó ở trạng thái di chuột. Chọn kiểm tra phần tử qua bàn phím, như trong mũi tên đánh lên và sau đó nhập phím. "

Để thay đổi kiểu, hãy làm theo các bước trên và sau đó - Thay đổi tab trình duyệt của bạn bằng cách nhấn ctrl + TAB trên bàn phím. Sau đó bấm lại vào tab bạn muốn gỡ lỗi. Màn hình di chuột của bạn sẽ vẫn ở đó. Bây giờ cẩn thận đưa chuột của bạn đến khu vực công cụ phát triển.

Trong trường hợp của tôi, tôi muốn dubug bootstrap tooltip. Nhưng các phương pháp trên không làm việc cho tôi. Tôi đoán bootstrap đã thực hiện điều này bằng một cái gì đó như sự kiện chuột vào / ra.

Dù sao, khi tôi di chuột vào một nút, nó sẽ tạo ra một phần tử html anh em bên dưới nút, vì vậy tôi chọn phần tử cha của nút trong tab "Các phần tử" của cửa sổ "Công cụ dành cho nhà phát triển", di chuột vào nút và "Ctrl + C", sau đó tôi có thể dán mã nguồn chứa mã được tạo. Lần cuối cùng tìm mã được tạo và thêm nó vào mã nguồn bằng cách "Chỉnh sửa dưới dạng HTML" trong tab "Thành phần".

Hy vọng nó có thể giúp ai đó.

Tôi nghĩ rằng đây không còn là vấn đề trong Chrome mà chỉ là trong trường hợp. Tôi đã viết kịch bản jQuery này để kiểm tra DOM khi tôi di chuyển bằng phím TAB.

Nếu được thay đổi để sử dụng 'mouseover', sẽ trông như thế này:

$("body *").on('mouseover', function(event) {       
    console.log(event.target);      
    inspect(event.target);
    event.stopPropagation();
});

Bạn có thể dễ dàng sửa đổi nó để loại bỏ trình xử lý sự kiện bất cứ khi nào bạn nhấp hoặc làm điều gì đó trên một yếu tố bạn muốn dừng lại.