Zobacz: stan najazdu w narzędziach programistycznych Chrome

EDIT: ta odpowiedź była przed poprawką błędu, zobacz odpowiedź tnothcutta.

• Kliknij prawym przyciskiem myszy element, ale nie przesuń wskaźnika myszy od elementu, zachowaj go w stanie najazdu.
• Wybierz element inspect za pomocą klawiatury, jak w strzałce w górę, a następnie klawisz Enter.
• poszukaj w narzędziach programistycznych pod dopasowanymi regułami CSS, powinieneś widzieć: hover.

PS: próbowałem tego na jednym z twoich pytań tagi.

Chciałem zobaczyć stan najazdu na moich podpowiedziach Bootstrap. Wymuszenie stanu: hover w narzędziach deweloperskich Chrome nie utworzyło wymaganego wyjścia, ale uruchomienie zdarzenia mouseenter za pomocą konsoli pomogło w Chrome. Jeśli jQuery istnieje na stronie możesz uruchomić:

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

Istnieje kilka sposobów, aby zobaczyć Style HOVER STATE w narzędziach programistycznych Chrome.

Metoda 01

Metoda 02

Z Firefoksem Domyślnym Developer Toll

Z Firebug

Jeśli to pomoże, wydaje się to łatwiejsze w najnowszym Chrome (47.0.2526.106):

Sprawdź element, a następnie kliknij na trzy białe kropki w lewej rynnie:

Następnie wybierz żądany stan elementu z listy rozwijanej:

Myślę, że nie ma na to sposobu. Złożyłem żądanie funkcji. Jeśli jest jakiś sposób, programiści z Google będą go gburowaty wskazać i będę edytować moją odpowiedź. Jeśli nie, będziemy musieli poczekać i popatrzeć. (możesz zagrać w tę sprawę, aby zagłosować na nią)

Komentarz 1 autorstwa członka projektu Chrome: w wersji 10.0.620.0 panel Style pokazuje: hover style dla wybranego elementu, ale nie: active.

(od tego postu) Aktualny stabilnym kanałem jest wersja 8.0.552.224.

Możesz zastąpić stabilny KANAŁ instalacją Google Chrome kanałem Beta lub kanałem Dev (Zobacz kanały Wczesnego Dostępu).

Możesz również zainstalować dodatkową instalację chrome, która jest jeszcze bardziej aktualna niż kanał Dev .

... Canary build jest aktualizowany jeszcze częściej niż dev channel i nie jest wcześniej testowany uwolnienie. Ponieważ Canary build może być czasami bezużyteczny, nie może być ustawiony jako domyślna przeglądarka i może być zainstalowany jako dodatek do dowolnego z powyższych kanałów Google Chrome. ...

Wiem, że to, co robię, jest całkiem obejściem, jednak działa doskonale i tak robię za każdym razem.

Następnie postępuj tak:

• najpierw upewnij się, że narzędzia programistyczne Chrome są odblokowane.
• następnie po prostu przesuń dowolną stronę okna narzędzi programistycznych na środek elementu, który chcesz sprawdzić, gdy unosisz kursor.

• na koniec najedź kursorem na element, kliknij prawym przyciskiem myszy i sprawdź element, przenieś najedź myszką na okno Dev Tools i będziesz mógł bawić się swoim elementem: hover css.

Debugowałem Menu hover Stan za pomocą Chrome i zrobiłem to, aby móc zobaczyć kod stanu najazdu:

W panelu Elements Kliknij przycisk Toggle Element state i wybierz :hover.

W panelu Scripts przejdź do Event Listeners Breakpoints W prawym dolnym rogu i wybierz Mouse -> mouseup.

Teraz sprawdź Menu i wybierz pole, które chcesz. Po zwolnieniu przycisku myszy powinien się zatrzymać i pokazać stan najechania na wybrany element w panelu Elements (Spójrz na sekcję Styles).

Mogłem zobaczyć styl, wykonując poniższe kroki sugerowane przez Babikera - "Kliknij prawym przyciskiem myszy element, ale nie przesuń wskaźnika myszy od elementu, zachowaj go w stanie najazdu. Wybierz inspect element za pomocą klawiatury, jak w Naciśnij strzałkę w górę, a następnie klawisz Enter."

Aby zmienić styl wykonaj powyższe kroki, a następnie - Zmień kartę przeglądarki, naciskając ctrl + TAB na klawiaturze. Następnie kliknij ponownie kartę, którą chcesz debugować. Twój ekran hover nadal tam będzie. Teraz ostrożnie weź mysz do obszaru narzędzi programistycznych.

Zmiana statusu na hover w Chrome jest dość prosta, wykonaj następujące kroki:

1) Kliknij prawym przyciskiem myszy na swojej stronie i wybierz inspect

2) Wybierz element, który chcesz mieć w DOM

3) Wybierz ikonę pin (Toggle element State)

4) Następnie zaznacz hover

Teraz możesz zobaczyć hover stan wybranego DOM w przeglądarce!

W moim przypadku chcę dubug Bootstrap tooltip. Ale powyższe metody nie działają dla mnie. Domyślam się, że Bootstrap zaimplementował to przez coś w rodzaju zdarzenia myszy in/out.

W każdym razie, gdy najadę na przycisk, wygeneruje on brother element html poniżej przycisku, więc wybieram element nadrzędny przycisku w zakładce "elementy" w oknie "Narzędzia programistyczne", najeżdżam na przycisk i "Ctrl + C", a następnie mogę wkleić kod źródłowy, który zawiera wygenerowany kod. Ostatnio znajdź wygenerowany kod i dodaj do kodu źródłowego przez "Edytuj jako HTML" w zakładce "Elementy".

Mam nadzieję, że może komuś pomóc.

Myślę, że to już nie jest problem w Chrome, ale na wszelki wypadek. Napisałem ten skrypt jQuery , aby sprawdzić DOM, gdy poruszam się z klawiszem TAB.

Jeśli zostanie zmieniona na 'mouseover', będzie wyglądać tak:

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

Można go łatwo zmodyfikować, aby usunąć obsługę zdarzenia za każdym razem, gdy klikniesz lub zrobisz coś na elemencie, na którym chcesz się zatrzymać.