Come utilizzare Chrome Web Inspector per visualizzare il codice al passaggio del mouse

99

L'utilizzo di chromes web inspector per visualizzare il codice è molto utile. Ma come si visualizza ad esempio il codice hover per un pulsante? Dovrai passare il mouse sul pulsante e quindi non puoi usarlo (mouse) nell'ispettore. Esistono scorciatoie o altri modi per eseguire questa operazione nell'ispettore?

css  google-chrome  google-chrome-devtools  web-inspector 
— Bo.
fonte
2
Non è un duplicato di questo? stackoverflow.com/questions/4515124/…
— Mixologic
— TylerH

Risposte:

156

Ora puoi vedere entrambe le regole di stile della pseudo-classe e forzarle sugli elementi.

Per vedere le regole come :hovernel pannello Stili, fai clic sul piccolo pulsante della casella tratteggiata in alto a destra.

Per forzare un elemento nello :hoverstato, fai clic con il pulsante destro del mouse.

In alternativa, puoi utilizzare il riquadro della barra laterale dei punti di interruzione del listener di eventi nel pannello Script e selezionare per mettere in pausa i gestori al passaggio del mouse.

— Travis Northcutt
fonte
1
In Chrome 48 (e anche in precedenza), quella casella tratteggiata è stata sostituita da un'icona a forma di puntina da disegno che dice Toggle Element State quando ci passi sopra. Quindi seleziona "hover" dall'elenco a discesa.
— stesso
15

In alternativa, puoi utilizzare il riquadro della barra laterale dei punti di interruzione del listener di eventi nel pannello Script e selezionare per mettere in pausa i gestori al passaggio del mouse.

— Yury Semikhatsky
fonte
6

È un po 'fastidioso, ma è necessario fare clic con il pulsante destro del mouse sull'elemento, quindi, tenendo il mouse sul collegamento, utilizzare la tastiera selezionare il collegamento "Ispeziona elemento" e premere Invio. Questo dovrebbe mostrarti il ​​css per la pseudo classe hover per l'elemento selezionato.

Speriamo che lo rendano un po 'più semplice nelle build future.

— purpletonico
fonte
Buono a sapersi, ma sì, è molto frustrante che il mouse debba rimanere sospeso sul collegamento ... anche mentre si fruga nella finestra Ispeziona elemento utilizzando solo la tastiera. Che fastidio!
— Chad Schultz
L' intero processo effettivo di forzare l'elemento allo :hoverstato, ( as in the accepted answer), si ottiene anche facendo clic con il pulsante destro del mouse sull'elemento,> Ispeziona e tieni il puntatore lì, quindi usa i tasti della tastiera per controllare lo pseudo codice .. Grazie per questa alternativa funzionante .... Quindi in realtà non è un fastidio !
— :)
1

Non sono sicuro di aver capito bene la tua domanda, ma se vuoi vedere il codice del gestore di eventi puoi semplicemente ispezionare l'elemento e guardare il pannello della barra laterale degli ascoltatori di eventi del pannello Elements. Un altro modo è semplicemente premere il pulsante di pausa nel pannello degli script e passare il mouse sull'elemento. Il debugger si fermerà alla prima istruzione del primo gestore di eventi.

— loislo
fonte
Potresti essere solo un po 'più specifico su come farlo? Un caso tipico potrebbe essere un pulsante che mi piace e voglio vedere come si ottiene l'effetto hovering nello stesso modo semplice dell'ispezione ordinaria.
— Bo.
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.