Cómo usar Google Chrome para depurar CSS

La herramienta Inspeccionar elemento es excelente cuando se trata de depurar sus páginas web en tiempo real. Puede usar esta herramienta para obtener una vista previa y cambiar el diseño de un sitio web. También te permite hacerlo sin necesidad de recargar la página, mostrando tus cambios de CSS inmediatamente.

Este artículo explicará cómo ver las clases CSS y sus estilos aplicados en la ventana Inspeccionar elemento. También cubrirá cómo puede usar esto para obtener una vista previa de los cambios que realiza en su CSS en tiempo real.

Abrir elemento de inspección en Google Chrome

Puede visitar cualquier sitio web y abrir la ventana Inspeccionar elemento para ver cómo se ve su código HTML o CSS. Este tutorial usará un sitio web de muestra demostrar.

Puede abrir la ventana Inspeccionar elemento en Google Chrome presionando el botón F12 llave. También puede hacer clic derecho en cualquier parte de la página y hacer clic en Inspeccionar.

La ventana Inspeccionar elemento se abrirá en el código HTML de la parte del sitio web en la que hizo clic con el botón derecho. Aquí es donde también puedes

editar el texto del sitio web usando Google Chrome.

La pestaña Estilos en la ventana Inspeccionar elemento

En la propia ventana Inspeccionar elemento, bajo el Elementos pestaña, hay un lugar para ver el código HTML y CSS. Puede ver el código HTML a la izquierda de la ventana Inspeccionar elemento. Puede encontrar el código CSS a la derecha, debajo del Estilos pestaña.

Digamos que tiene un elemento HTML con una clase llamada "relleno de tarjeta", con relleno derecho e izquierdo aplicado:

.relleno de tarjeta {
 relleno derecho: 0vh;
 relleno-izquierda: 0vh;
}

Si obtuvo una vista previa de este sitio web en el navegador, podrá seleccionar el división elemento con la clase "relleno de tarjeta". Cualquier estilo aplicado a la clase "relleno de tarjeta" se mostraría a la derecha, debajo del Estilos pestaña.

Cuando pasa el cursor sobre un elemento en la vista de código HTML, esa parte de la página web se resaltará en el navegador web. El tipo de elemento HTML, junto con cualquier nombre de clase, también se mostrará en un cuadro de diálogo junto al elemento.

En este caso, verá el contenedor div con los nombres de clase "row", "card-padding" y "pb-5" resaltados en la página.

Cómo realizar cambios en el CSS en tiempo real

Puede cambiar el CSS directamente desde la pestaña Estilos:

1. Utilizando este sitio web, haga clic derecho en el primer encabezado.
2. En ese encabezado h4 en particular, verá que se le aplica una clase llamada "text-grey" con un color de #8a8a8a.
3. Cambia el color a otro en su lugar, como el naranja. Solo desea cambiar el valor en sí, y no el nombre de la propiedad, "color".
4. Verá que el encabezado cambia de gris oscuro a naranja.
5. Si desea deshabilitar un estilo CSS en particular, desmarque la casilla a la izquierda del estilo.
6. También puede agregar más estilos al conjunto original. Haga clic justo debajo o a la derecha de una propiedad para comenzar a agregar una nueva. Debe usar la misma sintaxis que usaría en un archivo CSS normal al agregar nuevos estilos.
7. Si está obteniendo una vista previa de un sitio web local, puede continuar realizando cambios de CSS hasta que se acerque a la apariencia requerida para su interfaz de usuario. Después de eso, puede copiar los cambios de CSS que realizó nuevamente en su código local.

Cómo modificar CSS de bibliotecas o marcos de terceros

También puede realizar cambios en los elementos HTML si está utilizando bibliotecas o marcos de trabajo de terceros, como Bootstrap.

1. Utilizando este sitio web, haga clic derecho en uno de los botones de Bootstrap en la página.
2. Verá dos clases aplicadas al botón, "btn" y "btn-primary". Bootstrap ya tiene su propio estilo aplicado a ambas clases. Los colores que se utilizan como colores de fondo y borde son #007bff. Cambie esto a otra cosa, como Violet.
3. Si está obteniendo una vista previa de un sitio web local, puede volver a agregar sus nuevos cambios en su código local. Según el orden de su CSS, es posible que deba usar un selector de CSS más específico. Por ejemplo, prefije el selector con ".btn". Esto anulará el estilo original de Bootstrap.

   .btn.btn-primario {
    color de fondo: violeta;
    borde-color: violeta;
   }

¿Qué significa element.style en la pestaña Estilos?

Cada elemento HTML que resalte en la ventana Inspeccionar elemento tiene un bloque element.styles. Esto es equivalente a agregar un estilo en línea al elemento HTML, en lugar de seleccionarlo con un selector.

1. Haga clic derecho en un elemento HTML. Agregue cualquier estilo a la sección element.style, como:

   color: humo blanco;

2. Verá que el código del elemento HTML también ha cambiado. El código dentro del elemento HTML ahora tiene la nueva línea:

   estilo="color: humo blanco;"

Cómo los elementos HTML secundarios heredan el estilo

Si tiene dos valores de estilo diferentes aplicados a un elemento principal y un elemento secundario, el valor en el elemento secundario tendrá prioridad.

1. Utilizando este sitio web, haga clic con el botón derecho en cualquier parte de los bordes exteriores del sitio web.
2. En la sección HTML de la ventana Inspeccionar elemento, céntrese en dos elementos HTML particulares. Hay un elemento div principal con una clase de "contenido" aplicada. Este elemento HTML tiene un elemento secundario h4, con una clase "text-grey" aplicada.
3. Seleccione el elemento HTML secundario h4 y deshabilite el estilo de color en la clase "text-grey".
4. Seleccione el elemento HTML principal con la clase "contenido". Agregue el siguiente estilo CSS a la clase:

   color rojo;

   Todo el texto dentro del div principal se volverá rojo. Este cambio también afectará a los elementos secundarios, lo que significa que el h4 también tendrá un color rojo.
5. Seleccione el elemento HTML secundario h4 y agregue un nuevo estilo a la clase "text-grey":

   color verde;

   Esto anulará el estilo de las clases principales. El elemento HTML h4 cambiará de rojo a verde.
6. También verá un tachado si ve el estilo de la clase "contenido". Esto confirma que el elemento secundario h4 está anulando el color del elemento principal.

Los beneficios de depurar su CSS en el navegador

La depuración de CSS en su navegador puede ahorrar mucho tiempo y acelerar su flujo de trabajo de codificación. Esto es especialmente cierto si necesita ver cómo sus nuevos cambios de CSS afectan la interfaz de usuario en su sitio web en tiempo real.

Puede usar esta técnica en lugar de realizar cambios en su código local y volver a cargar su aplicación. Esto le evitará adivinar qué valores de CSS funcionarían, ya que ahora puede ver los cambios en la interfaz de usuario a medida que los realiza.

Puede realizar cambios en la ventana Inspeccionar elemento hasta que se acerque al diseño deseado. Una vez que lo haya hecho, puede copiar el código de la ventana Inspeccionar elemento y volver a su código local. Todavía puede volver a ejecutar su aplicación para probar que sus nuevos cambios de CSS aún funcionan.

Este tutorial cubrió los conceptos básicos de cómo depurar el CSS de un sitio web usando la ventana Inspeccionar elemento, incluido dónde encontrar el CSS en la pestaña Estilos.

También cubrió cómo realizar cambios en el CSS y ver los cambios visuales en la interfaz de usuario en tiempo real. Con suerte, también comprenderá cómo realizar cambios cuando el CSS utiliza una biblioteca de terceros y cómo funciona la herencia de estilos.

Hay muchas otras cosas interesantes que puede hacer con la ventana Inspeccionar elemento.

7 cosas divertidas que puedes hacer con Inspect Element

Leer siguiente

Sobre el Autor