El inspector de elementos es una herramienta que nos permite analizar los contenidos de un sitio web. Con él podremos ver el código fuente de la página, así como analizar los diferentes elementos que la conforman. Es muy útil cuando quieres ver cómo está hecho algo en una página o a la hora de desarrollar para poder afinar estilos y depurar los scripts que se ejecuten.

Cada navegador incluye su propio inspector de elementos. Hay diferencias menores entre ambos, pero básicamente las acciones que podemos realizar son las mismas. En los ejemplos que mostraremos a lo largo de estas publicaciones el inspector de elementos será el incluido en el navegador Google Chrome.

La ventana del inspector

Para abrir el inspector de elementos podemos hacerlo pulsando la tecla F12 o bien pulsando con el botón derecho en cualquier parte de la página y acceder a través de la opción «Inspeccionar».

La ventana del inspector puede estar integrada en la propia ventana del navegador o mostrarse en una ventana a parte. Para acceder a estas opciones puedes hacerlo mostrando las opciones pulsando el icono de configuración arriba a la derecha del inspector y cambiando el valor de la propiedad “Dock Side”.

Además, tenemos opción a pasar con un solo click de vista de ordenador a vista móvil, para aquellas páginas en las que tengamos que tener en cuenta los diferentes dispositivos que puedan visualizarla haciendo click en el segundo botón de la barra superior. Al hacer click en la parte superior de la página se desplegarán las dimensiones del dispositivo para realizar la prueba. Automáticamente se mostrará el contenido como si estuviésemos accediendo desde ese tipo de dispositivo.

Pestañas principales del inspector

El inspector se compone de diferentes pestañas. Desde cada una de ellas tendremos acceso a diferentes funcionalidades y características:

• Elements: Aquí podremos observar el código HTML de la página, así como los estilos que se aplican. Podremos también modificarlos y añadir nuevas reglas rápidamente.

• Console: Aquí se quedarán los diferentes mensajes de error y advertencia que se producen en la página (imágenes que no cargan, errores de javascript, …)

• Sources: Árbol de recursos de la página. Podremos ver de dónde se obtienen los diferentes recursos y modificarlos sobre la marcha

• Network: Para analizar las diferentes peticiones que se realizen desde el sitio web, accediendo al contenido de la petición, la respuesta obtenida, tiempos…

• Performance: Acceso a procesos para medir el rendimiento de la página.

• Memory: Medición de memoria consumida durante la carga y ejecución de la página web.

• Aplicación: Información de utilidad de los recursos empleados por una aplicación web.

• Security: Información sobre los diferentes sitios a los que se accede desde la página y los certificados respectivos.

• Audits: Una serie de controles para comprobar errores típicos.

• Hay plugins que añaden pestañas y funcionalidad al inspector, por lo que puede haber más pestañas.

Primeros pasos: La pestaña Elements

Desde esta pestaña accedemos al código HTML y a los estilos de los diferentes elementos de la página. Podemos analizar el árbol de código o buscar haciendo click de ratón el elemento en la página que queremos analizar. Automáticamente en el panel de la derecha se mostrarán las reglas de estilos CSS aplicadas al elemento, pudiendo modificar éstas o añadir nuevas rápidamente.

En la ventana principal podremos ver el código fuente e incluso hacer alguna modificación menor. Para realizar modificaciones podemos hacer click con el botón

Para el panel de estilos tenemos las siguientes pestañas:

• Styles: Aquí podemos ver las reglas aplicadas, modificarlas y añadir nuevas.
• Computed: Todas las reglas aplicadas al elemento, con un panel que representa los bordes, margen y relleno del mismo.
• Event Listeners: Árbol de eventos que se han lanzado en la página y controles afectados por ellos.

De estas, las que más trabajaremos serán las 2 primeras. En la pestaña de Styles podremos eliminar ciertas reglas, añadir nuevas y editar los valores de las reglas actuales, todo desde el panel de la derecha. Aquí vemos también una pequeña caja representando el elemento en el que podemos ver fácilmente las propiedades de diseño básicas del elemento (margin, padding, border, tamaño…)

En la pestaña Computed vemos una información similar, pero en vez de tenerla organizada por reglas de estilo, como en el anterior, aquí vemos todas las propiedades del elemento seleccionado, independientemente de si se han establecido o de si las está cogiendo de valores por defecto.

Hasta ahora hemos visto qué es el inspector de elementos y para qué se puede utilizar, así como una vista general con las diferentes funcionalidades que incluye. En la próxima publicación veremos ejemplos de cómo editar los estilos sobre la marcha, añadir nuevas reglas, y utilizar correctamente el inspector de elementos con estos propósitos.

Confía tu desarrollo web a nuestra agencia

Qué útil que es el inspector de elementos, ¿a que sí? ¿Y si te decimos que nosotros podemos inspeccionar tus páginas web para corregir todos los errores y darle el aspecto perfecto para que triunfes entre tus clientes? Pues no se hable más, dinos cómo es tu página web para que empecemos a darle caña a tu desarrollo.