Jak używać Chrome Web Inspector do wyświetlania kodu w dymku

99

Używanie inspektora sieci Chromes do przeglądania kodu jest bardzo przydatne. Ale jak widzisz na przykład kod najechania na przycisk? Będziesz musiał najechać myszką na przycisk, a tym samym nie możesz go używać (myszy) w inspektorze. Czy są jakieś skróty lub inne sposoby, aby to osiągnąć w inspektorze?

css google-chrome google-chrome-devtools web-inspector Bo.
źródło
2
Czy to nie jest duplikat tego? stackoverflow.com/questions/4515124/…
Mixologic
Czy to odpowiada na twoje pytanie? Zobacz: stan najechania kursorem w Narzędziach dla programistów Chrome
TylerH

Odpowiedzi:

156

Teraz możesz zobaczyć obie reguły stylu pseudoklas i wymusić je na elementach.

Aby zobaczyć reguły, takie jak :hoverw panelu Style, kliknij mały przycisk z kropkowaną ramką w prawym górnym rogu.

Aby wymusić przejście elementu do :hoverstanu, kliknij go prawym przyciskiem myszy.

Alternatywnie można użyć panelu paska bocznego Event Listener Breakpoints w panelu Skrypty i wybrać wstrzymanie obsługi wskaźnika myszy.

Travis Northcutt
źródło
1
W Chrome 48 (i prawdopodobnie wcześniej) to kropkowane pole zostało zastąpione ikoną pinezki, która mówi Przełącz stan elementu po najechaniu na nie kursorem. Następnie z listy rozwijanej wybierz opcję „hover”.
sameers
15

Alternatywnie można użyć panelu paska bocznego Event Listener Breakpoints w panelu Skrypty i wybrać wstrzymanie obsługi wskaźnika myszy.

Yury Semikhatsky
źródło
6

To trochę denerwujące, ale musisz kliknąć prawym przyciskiem myszy na elemencie, a następnie trzymając kursor myszy nad linkiem, za pomocą klawiatury wybrać link „Sprawdź element” i nacisnąć Enter. Powinno to pokazać ci css dla pseudoklasy hover dla wybranego elementu.

Mam nadzieję, że ułatwią to trochę w przyszłych kompilacjach.

purpurowy
źródło
Dobrze wiedzieć, ale tak, to bardzo frustrujące, że mysz musi pozostawać na kursie nad łączem ... nawet wtedy, gdy przeglądasz okno Sprawdź element, używając tylko klawiatury. Jaki niuans!
Chad Schultz,
Rzeczywisty cały proces zmuszając element do :hoverstanu, ( as in the accepted answer), uzyskuje się również poprzez prawy klik na elemencie,> Skontrolować i trzymać tam wskaźnik, a następnie za pomocą klawiszy klawiatury, aby sprawdzić kod pseudo .. Dzięki tej pracy alternatywa .... Więc właściwie nie jest to utrapienie !
:)
5

W przeglądarce Chrome:

Możesz także najechać kursorem myszy na element, a następnie kliknąć CTRL+SHIFT+C aby sprawdzić ten element.

W przeglądarce Firefox:

wprowadź opis obrazu tutaj

w firebug:

wprowadź opis obrazu tutaj

źródło: https://stackoverflow.com/a/11272205/2165415

T.Todua
źródło
1

Nie jestem pewien, czy dobrze rozumiem twoje pytanie, ale jeśli chcesz zobaczyć kod obsługi zdarzeń, możesz po prostu sprawdzić element i spojrzeć na panel boczny Event Listeners w panelu Elements. Innym sposobem jest po prostu naciśnięcie przycisku pauzy w Panelu skryptów i po prostu najechanie kursorem na element. Debuger zatrzyma się przy pierwszej instrukcji pierwszego programu obsługi zdarzeń.

loislo
źródło
Czy mógłbyś trochę bardziej szczegółowo opowiedzieć, jak to robisz? Typowym przypadkiem byłby przycisk, który lubię i chcę zobaczyć, jak uzyskuje się efekt zawisu w taki sam łatwy sposób, jak zwykła inspekcja.
Bo.