¿Alguna vez ha querido cambiar temporalmente una página web para ver cómo se vería con colores, fuentes y estilos específicos? Esto es posible con una herramienta que ya existe en su navegador llamada " Inspeccionar el elemento ". Este es un sueño hecho realidad para todos los usuarios a los que les gusta manipular CSS.

En este tutorial, lo guiaremos a través de los conceptos básicos de la inspección de artículos y cómo usarlo con su sitio de WordPress.

Inspección de elementos de WordPress

¿Qué es una herramienta de inspección de artículos?

Los navegadores modernos como Google Chrome y Mozilla Firefox han creado herramientas que permiten a los desarrolladores web depurar errores. Estas herramientas muestran el HTML, CSS y JavaScript de una página y muestran cómo se ejecuta el código.

El uso de la herramienta " inspeccionar elemento Puede editar el código HTML, CSS o JavaScript para cualquier página web y ver sus cambios en vivo (únicamente en su sistema).

Para un dueño de un Sitio web, estas herramientas pueden ayudarlo a obtener una vista previa de cómo se verá un estilo determinado sin aplicar los cambios para todos.

Para los escritores, estas herramientas son increíbles porque puede cambiar fácilmente la información de identificación personal mientras toma sus capturas de pantalla, eliminando la necesidad de difuminar los elementos.

Para los agentes de soporte, esta es una excelente manera de identificar el error que podría estar causando que sus galerías no se carguen o impidiendo que funcionen correctamente.

Solo estamos rascando la superficie de los casos de uso porque la herramienta " Inspeccionar el elemento Es realmente poderoso

En este artículo, nos centraremos en la herramienta " Inspeccionar el elemento De Google Chrome, porque es nuestro navegador preferido. Firefox tiene sus propias herramientas de desarrollo que también se pueden invocar seleccionando el menú " inspeccionar elemento ".

Lanzamiento de la herramienta "Inspeccionar elemento" y localización del código

Puede ejecutar esta herramienta pulsando CTRL + Shift + I en tu teclado. Alternativamente, puede hacer clic en cualquier lugar de una página web y luego seleccionar Inspeccionar el elemento del menú del navegador.

inpection de código blogpascher

La ventana de su navegador se dividirá en dos, y la ventana inferior mostrará el código fuente de la página web.

La ventana de la herramienta del desarrollador se divide en dos ventanas. A su izquierda, verá el código HTML de la página. En el panel derecho, verá las reglas CSS.

HTML-CSS inspección de código

A medida que mueve el mouse sobre la fuente del código HTML, verá el área resaltada resaltada en la página web. También notará las reglas CSS para este elemento en cuestión.

Reglas CSS del elemento HTML

También puede colocar el puntero del mouse sobre un elemento de la página web, hacer clic con el botón derecho y seleccionar " inspeccionar el elemento ". El elemento en el que hizo clic se resaltará en el código fuente.

Desarrollador de código y depurador de desarrollador

HTML y CSS en la ventana de inspección de elementos son editables. Puede hacer doble clic en el código fuente HTML y editar el código que desee.

modificar código HTML

También puede hacer doble clic y editar los atributos de los estilos en el panel CSS. Para agregar una regla, haga clic en el ícono más en el panel de estilo en la parte superior.

agregar una nueva regla css

Cuando realice cambios en el código CSS o HTML, estos cambios se reflejarán instantáneamente en su navegador.

cambios en el código viven

Tenga en cuenta que no todos los cambios realizados aquí se guardan en cualquier lugar. La herramienta Inspeccionar el elemento Es una herramienta de depuración y no guarda sus cambios en un archivo en su servidor. Esto significa que si actualiza la página, todos sus cambios se perderán.

Para realizar los cambios, deberá modificar el estilo de su tema de WordPress o una plantilla para agregar los cambios que desea guardar.

Antes de comenzar a editar su tema de WordPress existente usando la herramienta " Inspeccionar el elemento Asegúrese de guardar todos sus cambios creando un tema secundario.

¿Cómo encontrar errores en WordPress

La herramienta Inspeccionar el elemento Tiene un área llamada " Consola Que muestra todos los errores que existen en su sitio. Antes de intentar depurar un error o pedir ayuda a los autores de un tema o complemento, siempre vale la pena mirar aquí para ver qué pasa.

consola de JavaScript

Por ejemplo, si fueras cliente OptinMonster Quién se pregunta por qué su optin no se carga, entonces puede encontrar fácilmente el problema que indica que el " babosa de la página no coincide ".

Si su barra para compartir no funcionaba correctamente, puede ver que hay un error de JavaScript que lo causa.

Eso es todo por este tutorial, espero que puedas personalizar mejor tu blog de WordPress. Siéntete libre de compartir este tutorial con tus amigos.