Cómo usar el inspector web de Chrome para ver el código de desplazamiento

99

Usar el inspector web de Chrome para ver el código es muy útil. Pero, ¿cómo ve, por ejemplo, el código de desplazamiento de un botón? Deberá pasar el mouse sobre el botón y, por lo tanto, no podrá usarlo (mouse) en el inspector. ¿Hay atajos u otras formas de lograr esto en el inspector?

css google-chrome google-chrome-devtools web-inspector Bo.
fuente
2
¿No es esto un duplicado de esto? stackoverflow.com/questions/4515124/…
Mixologic
¿Responde esto a tu pregunta? Ver: estado de
desplazamiento en las

Respuestas:

156

Ahora puede ver las reglas de estilo de la pseudoclase y forzarlas en los elementos.

Para ver las reglas como :hoveren el panel de Estilos, haga clic en el botón del cuadro punteado pequeño en la parte superior derecha.

Para forzar un elemento a su :hoverestado, haga clic derecho en él.

Alternativamente, puede usar el panel de la barra lateral Event Listener Breakpoints en el panel Scripts y seleccionar pausar en los controladores del mouse over.

Travis Northcutt
fuente
1
En Chrome 48 (y tal vez antes), ese cuadro punteado ha sido reemplazado por un ícono de chincheta que dice Alternar estado del elemento cuando se desplaza sobre él. Luego, seleccione "desplazarse" de la lista desplegable.
sameers
15

Alternativamente, puede usar el panel de la barra lateral Event Listener Breakpoints en el panel Scripts y seleccionar pausar en los controladores del mouse over.

Yury Semikhatsky
fuente
6

Es un poco molesto, pero debe hacer clic derecho en el elemento y luego, manteniendo el mouse sobre el enlace, use su teclado para seleccionar el enlace 'Inspeccionar elemento' y presione enter. Esto debería mostrarle el CSS de la pseudoclase de desplazamiento del elemento seleccionado.

Esperamos que hagan esto un poco más fácil en futuras versiones.

purpletonic
fuente
Es bueno saberlo, pero sí, es muy frustrante que el mouse deba permanecer suspendido sobre el enlace ... incluso mientras hurga en la ventana Inspeccionar elemento usando solo el teclado. ¡Qué molestia!
Chad Schultz
El real de todo el proceso de forzar el elemento de :hoverestado, ( as in the accepted answer), también se logra a través de un clic derecho sobre el elemento,> Inspeccionar, y mantiene el puntero de allí, y luego usar las teclas del teclado para comprobar el código de pseudo .. Gracias por este trabajo alternativo .... ¡Así que en realidad no es una molestia !
:)
1

No estoy seguro de haber entendido bien su pregunta, pero si desea ver el código del controlador de eventos, puede simplemente inspeccionar el elemento y mirar el panel de la barra lateral de escucha de eventos del Panel de elementos. Otra forma es simplemente presionar el botón de pausa en el Panel de secuencias de comandos y colocar el cursor sobre el elemento. El depurador se detendrá en la primera instrucción del primer controlador de eventos.

loislo
fuente
¿Podrías ser un poco más específico sobre cómo haces esto? Un caso típico sería un botón que me gusta y quiero ver cómo se logra el efecto de desplazamiento de la misma manera fácil que la inspección ordinaria.
Bo.