Cómo depurar CSS biseccionando

Uno de los flujos de trabajo que utilizo para depurar CSS

Hoy tuve este problema.

Agregué el botón Paddle a mi nueva página de curso en línea, para que la gente pudiera hacer clic en el botón "Comprar ahora" y aparecería la bonita ventana emergente de Paddle.

La ventana emergente tiene un indicador de carga, un círculo con una ruleta adentro, y había un problema: al hacer clic en el botón "Comprar ahora", el indicador de la ruleta no estaba centrado dentro del círculo, como se muestra en este gif:

Realmente no sabía qué estaba causando el problema, así que estaba pensando en cómo resolverlo.

El principio que utilizo en estos casos esbisecar. Yo tambien lo llamodivide y vencerás.

Abrí DevTools y me moví al panel Fuentes, que mostraba todos los archivos cargados en la página. Busqué uno de mis archivos CSS, ya que intuí que el CSS de la página estaba interfiriendo con las propias reglas CSS de Paddle.

Así que eliminétodosel contenido de ese archivo.

Chrome cambia automáticamente la apariencia de la página cuando modifica los archivos CSS en el panel Fuentes, así que pude comprobar y ver que la ruleta ahora funcionaba bien.

Entonces, una de las reglas en ese CSS es el problema.

¿Cómo averiguo qué línea?

El archivo tiene 312 líneas. Selecciono de la línea 150 a la 312 y la elimino. Intentar otra vez. El problema sigue ahí, por lo que debe originarse en las primeras 149 líneas.

Presiono cmd-Z (deshacer) para volver a colocar esas líneas que eliminé y eliminar las líneas 70-149.

El problema se ha ido, por lo que la línea problemática está ahí. Presioné cmd-Z nuevamente para restaurar las líneas que eliminé.

Y así sucesivamente, entendiste la idea. Enjuague y repita hasta encontrar la línea que le da el problema.

Descarga mi gratisManual de CSS


Más tutoriales de CSS: