¿Alguna vez ha querido editar temporalmente una página web para ver cómo se vería con colores, fuentes, estilos, etc. específicos? 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 se enteran. En este artículo, le mostraremos los conceptos básicos del elemento inspeccionar 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 de una página y cómo el navegador ejecuta el código.

Con la herramienta Inspeccionar elemento, puede editar código HTML, CSS o JavaSCript para cualquier página web y ver sus cambios en vivo (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 increíbles porque pueden cambiar fácilmente la información de identificación personal al tomar sus capturas de pantalla, eliminando la necesidad de difuminar los elementos por completo.

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

Solo estamos rascando la superficie de los casos de uso. Inspeccionar elemento es realmente poderoso.

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

¿Listo? Empecemos.

Tutorial en video

Suscríbete a

Si no le gusta el video o necesita más instrucciones, continúe leyendo.

Lanzamiento de Inspect Element y localización del código

Puede iniciar la herramienta inspeccionar elemento 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.

Inspeccionar menú

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 a su vez en dos ventanas. A su izquierda, verá el código HTML de la página. En el panel de la derecha, verá las reglas de CSS.

Paneles HTML y CSS en la ventana Inspeccionar

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.

Editar un elemento HTML en particular

También puede llevar el puntero del mouse a 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 el HTML como el CSS de la ventana de inspección del elemento son editables. Puede hacer doble clic en cualquier parte del código fuente HTML y editar el código como desee.

Edición de código HTML en la herramienta inspeccionar elemento

También puede hacer doble clic y editar cualquier atributo y estilo en el panel CSS. Para agregar una regla de estilo personalizada, haga clic en el icono + en la parte superior del panel CSS.

Editar CSS en la herramienta inspeccionar elemento

A medida que realice cambios en CSS o HTML, esos cambios se reflejarán en el navegador al instante.

Cambios de CSS en vivo en la pantalla del 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 escribe los cambios en los archivos de su servidor. Esto significa que si actualiza la página, todos sus cambios desaparecerán.

Para realizar los cambios, tendrá que editar la hoja de estilo de su 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 sus cambios creando un tema secundario.

Encuentre errores fácilmente en su 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 a plugin autores, siempre es útil mirar aquí para ver cuáles son los errores.

Error de la consola del navegador

Por ejemplo, si fueras un Cliente de OptinMonster preguntándose por qué su opción de suscripción no se está cargando, entonces puede encontrar fácilmente el problema “el slug 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 adora 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 de WordPres. También es posible que desee echar un vistazo a la hoja de trucos CSS predeterminada generada por WordPress para acelerar sus habilidades de desarrollo de temas.

Si le gustó este artículo, suscríbase a nuestro Canal de Youtube . También puedes encontrarnos en Twitter y Google+.

.

Fuente: wpbeginner

Entradas relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *