logo
contacto@lagahe.com
+(34) 967 10 14 30
+(34) 610 74 57 87
Parque Empresarial Campollano
Avenida Cuarta, número 3 - 02007 Albacete

El inspector de elementos: qué es y para qué se utiliza - Lagahe
60069
single,single-post,postid-60069,single-format-standard,qode-core-1.0,ajax_fade,page_not_loaded,,pitch-ver-1.1, vertical_menu_with_scroll,smooth_scroll,side_menu_slide_from_right,grid_1300,blog_installed,wpb-js-composer js-comp-ver-4.8.0.1,vc_responsive
El inspector de elementos- que es y para qué se utiliza

El inspector de elementos: qué es y para qué se utiliza

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.

El inspector de elementos: qué es y para qué se utiliza

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”.

El inspector de elementos: qué es y para qué se utiliza

El inspector de elementos: qué es y para qué se utiliza

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”.

El inspector de elementos: qué es y para qué se utiliza

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.

El inspector de elementos: qué es y para qué se utiliza

Pestañas principales del inspector

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…)

Primeros pasos: La pestaña Elements

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.

En la pestaña Computed

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.

Alberto García Martínez Sobre el autor

¿Te ha gustado nuestro artículo?

Si quieres recibir las novedades más creativas del mundo online, suscríbete a nuestra newsletter.

* indica obligatorio
No hay comentarios

Deja un comentario:

Una cookie o galleta informática es un pequeño archivo de información que se guarda en su navegador cada vez que visita nuestra página web.

La utilidad de las cookies es guardar el historial de su actividad en nuestra página web, de manera que, cuando la visite nuevamente, ésta pueda identificarle y configurar el contenido de la misma en base a sus hábitos de navegación, identidad y preferencias.

Las cookies pueden ser aceptadas, rechazadas, bloqueadas y borradas, según desee. Ello podrá hacerlo mediante las opciones disponibles en la presente ventana o a través de la configuración de su navegador, según el caso.

En caso de que rechace las cookies no podremos asegurarle el correcto funcionamiento de las distintas funcionalidades de nuestra página web.

Más información en el apartado POLÍTICA DE COOKIES de nuestra página web.