¿Alguna vez quiso editar temporalmente una página web para ver cómo se vería con colores, fuentes, estilos específicos, etc.? Es posible con una herramienta que ya existe en su navegador llamada Inspeccionar elemento. Este es un sueño hecho realidad para todos los usuarios de bricolaje cuando se enteren. En este artículo, le mostraremos los conceptos básicos del elemento de inspección y cómo usarlo con su sitio de WordPress.
¿Qué es Inspect Element o Developer Tools?
Los navegadores web modernos como Google Chrome y Mozilla Firefox tienen herramientas integradas que permiten a los desarrolladores web depurar errores. Estas herramientas muestran el código HTML, CSS y JavaScript para una página y cómo el navegador ejecuta el código.
Usando la herramienta Inspeccionar elemento, puede editar el código HTML, CSS o JavaSCript para cualquier página web y ver sus cambios en vivo (solo en su computadora).
Para un propietario de un sitio web de bricolaje, estas herramientas pueden ayudarlo a obtener una vista previa de cómo se vería el diseño de un sitio sin realizar realmente los cambios para todos.
Para los escritores, estas herramientas son asombrosas porque puedes cambiar fácilmente la información de identificación personal cuando tomas capturas de pantalla, eliminando la necesidad de desdibujar elementos por completo.
Para los agentes de soporte, es una gran manera de identificar el error que podría estar causando que sus galerías no se carguen o que los controles deslizantes no funcionen correctamente.
Estamos arañando la superficie de los casos de uso. El elemento de inspección es realmente poderoso.
En este artículo, nos centraremos en Inspeccionar elemento en Google Chrome porque es nuestro navegador de elección. Firefox tiene sus propias herramientas de desarrollador que también se pueden invocar seleccionando inspeccionar elemento del menú del navegador.
Listo? Empecemos.
Lanzamiento Inspección del elemento y localización del código
Puede iniciar la herramienta de inspección del elemento presionando las teclas CTRL + Shift + I de su teclado. Alternativamente, puede hacer clic en cualquier lugar de una página web y seleccionar inspeccionar elemento del menú del navegador.
La ventana del navegador se dividirá en dos, y la ventana inferior mostrará el código fuente de la página web.
La ventana de la herramienta de desarrollador se divide en dos ventanas. A tu izquierda, verás el código HTML de la página. En el panel de la derecha, verá las reglas de CSS.
Al mover el mouse sobre la fuente HTML, verá el área afectada resaltada en la página web. También notará que las reglas de CSS cambian para mostrar el CSS del elemento que está viendo.
También puede llevar el puntero del mouse a un elemento en la página web, hacer clic con el botón derecho y seleccionar inspeccionar elemento. El elemento que señaló se resaltará en el código fuente.
Edición y depuración de código en el elemento de inspección
Tanto el HTML como el CSS en la ventana del elemento de inspección son editables. Puede hacer doble clic en cualquier parte del código fuente HTML y editar el código como desee.
También puede hacer doble clic y editar los atributos y estilos en el panel de CSS. Para agregar una regla de estilo personalizada, haga clic en el ícono + en la parte superior del panel de CSS.
A medida que realice cambios en el CSS o HTML, esos cambios se reflejarán en el navegador al instante.
Tenga en cuenta que los cambios que realice aquí no se guardan en ningún lado. Inspeccionar elemento es una herramienta de depuración y no vuelve a escribir sus cambios en los archivos de su servidor. Esto significa que si actualiza la página, todos sus cambios desaparecerán.
Para realizar los cambios, deberá editar la hoja de estilo del tema de WordPress o la plantilla correspondiente para agregar los cambios que desea guardar.
Antes de comenzar a editar su tema actual de WordPress utilizando la herramienta Inspeccionar elemento, asegúrese de guardar todos los cambios creando un tema secundario.
Encuentra fácilmente errores en tu sitio
El elemento Inspeccionar tiene un área llamada Consola que muestra todos los errores que existen en su sitio web. Al intentar depurar un error o solicitar asistencia de autores de complementos, siempre es útil mirar aquí para ver cuáles son los errores.
Por ejemplo, si usted fuera un cliente de OptinMonster y se preguntara por qué no está cargando su software optinMonster, entonces puede encontrar fácilmente el problema “su archivo de página no coincide”.
Si su barra de acciones no funcionaba correctamente, puede ver que hay un error de JavaScript.
Las herramientas como Inspect Element Console y SupportAlly lo ayudan a obtener un mejor servicio de atención al cliente porque el equipo de soporte técnico ama a los clientes que toman la iniciativa de proporcionar comentarios detallados sobre el problema.
Esperamos que este artículo lo ayude a aprender los conceptos básicos del elemento de inspección y cómo usarlo con su sitio de WordPres. También es posible que desee echar un vistazo a la hoja de trucos CSS generada por WordPress predeterminada para acelerar sus habilidades de desarrollo de temas.