Alguna vez quiso editar temporalmente una página web para ver cómo se vería con colores, fuentes, estilos, etc. específicos. Esto es posible con una herramienta que ya existe en su navegador llamada Inspect Element. Este es un sueño hecho realidad para todos los usuarios de bricolaje cuando lo descubren. 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 HTML, CSS y JavaScript de una página y cómo el navegador ejecuta el código.
Con la herramienta Inspeccionar elemento, puede editar el código HTML, CSS o JavaSCript de cualquier página web y ver los cambios en tiempo real (solo en su computadora).
Para el 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 hacer los cambios para todos.
Para los escritores, estas herramientas son excelentes porque pueden editar fácilmente la información de identificación personal al tomar capturas de pantalla al eliminar la necesidad de difuminar los elementos por completo.
Para los agentes de soporte, esta es una excelente manera de identificar el error que podría estar causando que las galerías no se carguen o que los controles deslizantes funcionen mal.
Solo estamos rascando la superficie de los casos de uso. El elemento Inspeccionar es realmente poderoso.
En este artículo, nos centraremos en Inspect Element en Google Chrome porque es nuestro navegador favorito. Firefox tiene sus propias herramientas de desarrollo que también se pueden invocar seleccionando Inspeccionar elemento en el menú del navegador.
¿Listo? Vamos a empezar.
Si no le gusta el video o necesita más instrucciones, siga leyendo.
Iniciando Inspect Element y localizando el código
Puede iniciar el inspector de elementos presionando las teclas CTRL + Shift + I en su teclado. Alternativamente, puede hacer clic en cualquier lugar de una página web y seleccionar Inspeccionar elemento en el 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 Herramientas de desarrollo se divide a su vez en dos ventanas. A su izquierda, verá el HTML de la página. En el panel derecho, verá las reglas CSS.
A medida que mueva 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 colocar el puntero del mouse sobre un elemento de 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 Inspect Element
Tanto HTML como CSS en el inspector de elementos 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 CSS. Para agregar una regla de estilo personalizada, haga clic en el icono + en la parte superior del panel CSS.
A medida que realice cambios en CSS o HTML, esos cambios se reflejarán inmediatamente en el navegador.
Tenga en cuenta que los cambios que realice aquí no se guardan en ningún lugar. Inspect element es una herramienta de depuración y no reescribe los cambios en los archivos de su servidor. Esto significa que si actualiza la página, se perderán todos los cambios.
Para realizar los cambios, deberá editar la hoja de estilo del tema de WordPress o la plantilla relevante para agregar los cambios que desea guardar.
Antes de comenzar a editar su tema de WordPress existente con la herramienta Inspeccionar elemento, asegúrese de guardar todos los cambios creando un tema hijo.
Encuentra errores fácilmente en tu sitio
El elemento Inspeccionar tiene un área llamada Consola que muestra todos los errores en su sitio web. Al intentar depurar un error o solicitar asistencia de los autores de plugins, siempre es útil mirar aquí para ver cuáles son los errores.
Por ejemplo, si fueras un Cliente de OptinMonster preguntándose por qué su suscripción no se está cargando, puede encontrar fácilmente el problema «la barra de su página no coincide».
Si su barra compartida no funcionaba correctamente, puede ver que hay un error de JavaScript.
Herramientas como Inspect Element Console y SupportAlly ayudarlo a obtener una mejor atención al cliente porque el equipo de soporte técnico ama a los clientes que toman la iniciativa para brindar comentarios detallados sobre el problema.
Esperamos que este artículo le haya ayudado a aprender los conceptos básicos del elemento de inspección y cómo utilizarlo con su sitio WordPres. Es posible que también desee consultar la hoja de trucos CSS predeterminada generada por WordPress para acelerar sus habilidades de desarrollo de temas.
¿Te ha resultado útil??
0 / 0