En diversas ocasiones necesitamos realizar cambios en nuestro sitio web o verificar si tenemos algunos errores que no puedan verse a simple vista.
Usualmente, en lo primero que pensamos es en verificar los archivos de nuestra web sin pensar que tenemos una potente herramienta que nos permite ver y modificar nuestra web para implementar los cambios que necesitamos.
Es en este punto donde llega a escena el inspector de elementos: una herramienta que nos permite analizar el contenido de nuestro sitio web.
Con él podremos ver todo el código fuente de la página. De igual forma nos permite realizar cambios de estilos para hacer pruebas, así como verificar los scripts que se ejecutan en nuestro sitio.
Cada navegador incluye su herramienta para inspeccionar los elementos, pero todas funcionan de la misma forma.
¿Cuáles son las pestañas principales del inspector de elementos?
Esta herramienta se compone de diferentes pestañas en las cuales hay diferentes funcionalidades y características que nos permitirán realizar pruebas y verificar errores en nuestro sitio web.
Elements: en esta sección podremos visualizar todo el código HTML de nuestra página web. También podremos verificar cuáles estilos se aplican en los diferentes elementos que tenemos en nuestro código y añadir nuevas reglas con las que podremos probar e implementar.
Dentro de esta pestaña también tenemos disponibles opciones adicionales que nos permiten modificar y probar todo el contenidos de nuestro sitio web.
En el panel veremos dos secciones principales: en la parte izquierda veremos todo el código fuente de nuestra página web y en la derecha tendremos disponible el panel de las diferentes reglas y estilos CSS que se están aplicando a cada uno de los elementos de nuestro sitio web.
En este panel derecho tendremos tres pestañas adicionales.
- Styles: esta pestaña te muestra todas las reglas CSS y estilos aplicados a nuestra web que podremos modificar para añadir nuevas reglas y realizar pruebas.
- Computed: nos mostrará todas las reglas aplicadas en cada elemento, con paneles que indican los márgenes, bordes y espaciados de cada elemento que tenemos seleccionado.
- Event Listeners: tendremos el árbol de eventos que se han lanzado en nuestra página web y cuáles controles están afectando los elementos.
Console: dentro de console podemos ver los diferentes mensajes de error o advertencia que se producen en nuestro sitio web como imágenes que no carguen y errores de javascript, entre otros.
Sources: en esta sección podemos ver el árbol de recursos de la página. Tendremos acceso a los diferentes recursos y podremos modificarlos mientras visualizamos los cambios.
Network: podremos analizar las diferentes peticiones que se realizan en el sitio web, ingresando al contenido de la petición, respuesta obtenida y tiempos.
Performance: nos muestra los procesos que se ejecutan. Es muy útil para medir el rendimiento de nuestra página web.
Memory: nos mostrará la memoria consumida durante la carga y ejecución de nuestra página web.
Application: tendremos información de utilidad de los recursos que se emplean por una aplicación web.
Security: contiene información sobre los diferentes sitios a los que se accede desde la página web y sus certificados. Es muy útil ya que podremos comprobar el nivel de seguridad de los sitios web.
Audits: permite generar un informe de auditoría y comprobar los diferentes errores de nuestra web.
¿Cómo podemos abrir el inspector de elementos?
Abrir el inspector de elementos es muy sencillo. Tenemos dos opciones básicas: pulsar la tecla F12 o hacer clic con el botón derecho de nuestro ratón en cualquier parte de nuestro sitio web y seleccionar la opción Inspeccionar.
Para abrirlo en Mozilla puedes seleccionar Inspeccionar Elemento.
La ventana de inspeccionar estará integrada en la ventana del propio navegador pero podemos seleccionar que se muestre en una ventana emergente.
Asimismo, dentro del inspector de elementos tenemos diferentes funcionalidades disponibles, como por ejemplo que con un solo clic podemos cambiar de vista desde ordenador a vista móvil o tablet.
Con esto podremos tener en cuanta la visualización de nuestros sitios web en diferentes dispositivos.
Al hacer clic en la parte superior, veremos las opciones disponibles para las diferentes dimensiones de los dispositivos y así poder ir realizando pruebas de acuerdo con diferentes tamaños de resoluciones.
De esta forma podremos usar el inspector para editar cualquier estilo CSS en nuestro sitio web, ver los elementos HTML y los errores en consola si hace falta.
Revisar la siguiente imagen para ver los pasos para editar estilos en tu sitio web
Lecturas Sugeridas