¿Alguna vez ha querido editar temporalmente una página web para ver cómo se vería con colores, fuentes, estilo, etc. específicos? 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 enteran. 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 Inspeccionar Elemento o Herramientas para Desarrolladores?
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, lo que elimina la necesidad de desenfocar 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 arañando la superficie de los casos de uso. Inspeccionar elemento es realmente poderoso.
En este artículo, nos centraremos en Inspeccionar elemento 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.
Videotutorial
Si no le gusta el video o necesita más instrucciones, continúe leyendo.
Lanzamiento de Inspeccionar Elemento y Localización del Código
Puede iniciar la herramienta de inspección de elementos presionando las teclas CTRL + Shift + I en su teclado. Alternativamente, puede hacer clic en cualquier parte de una página web y seleccionar inspeccionar elemento en el menú del navegador.
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 de la derecha, verá las reglas de CSS.
A medida que mueve 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 Inspeccionar elemento
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 cualquier atributo y estilo en el panel CSS. Para agregar una regla de estilo personalizada, haga clic en el ícono + en la parte superior del panel 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 guardarán en ninguna parte. Inspeccionar elemento es una herramienta de depuración y no vuelve a escribir los cambios en los archivos de su servidor. Esto significa que si actualiza la página, todos los cambios desaparecerán.
Para realizar los cambios, deberá 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 los cambios creando un tema secundario.
Encuentre fácilmente errores en su sitio
Inspeccionar elemento 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 los autores de complementos, siempre es útil consultar aquí para ver cuáles son los errores.
Por ejemplo, si fueras un Cliente OptinMonster Si se pregunta por qué su optin no se carga, puede encontrar fácilmente el problema «el slug de su página no coincide».
Si su barra compartida no funcionaba correctamente, entonces puede ver que hay un error de JavaScript.
Herramientas como Inspect Element Console y ApoyoAliado ayudarlo a obtener una mejor atención al cliente porque el equipo de soporte técnico ama a los clientes que toman la iniciativa al brindar comentarios detallados sobre el problema.
Esperamos que este artículo lo haya ayudado 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.
Si te ha gustado este artículo, suscríbete a nuestro Canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Gorjeo y Google+.