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: CSS y Javascript - Lagahe
60175
single,single-post,postid-60175,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: CSS y Javascript

El inspector de elementos: CSS y Javascript

En el anterior blog vimos qué era el inspector de elementos y las principales características del mismo. Hoy veremos más en detalle cómo trabajar con los estilos CSS de la página, editar Javascript y depurar el código.

 

CSS – Viendo y editando los estilos de la página

Cuando queramos modificar el estilo CSS en ejecución para ver cómo queda un cambio antes de aplicarlo en realidad, o simplemente para ver los estilos que afectan a un elemento, mostraremos el inspector de elementos haciendo click en el botón derecho sobre el mismo y pulsando la opción “Inspector de elementos”.

Esto nos abre la ventana del inspector, situándonos sobre el elemento sobre el que hayamos hecho click. Dentro de la pestaña “Elements” tendremos en la parte izquierda el código HTML y en la parte derecha las reglas CSS y otros elementos. Para ir cambiando de elemento, podemos hacer click en el propio árbol de elementos HTML para ir cambiando el elemento del que se nos muestran las propiedades. Podemos también ayudarnos con el botón de arriba a la izquierda de la barra superior del inspector para ir viendo sobre la marcha qué elemento se corresponde en pantalla:

 

CSS – Viendo y editando los estilos de la página

 

CSS – Viendo y editando los estilos de la página

 

Veamos un ejemplo para cambiar el color de fondo. Los pasos a seguir serían los siguientes:

Nos situamos en el elemento a cambiar. En este caso, BODY.

Una vez seleccionado en el inspector, nos vamos a la parte de la derecha, de los estilos CSS.  Aquí veremos las reglas aplicadas, y podremos añadir rápidamente nuevos estilos al hacer click en la parte de element.style{}

 

estilos css

 

Añadimos el cambio CSS a realizar. En este caso, background: green; para poner el fondo de la página en verde. También tenemos opción a quitar / volver a incluir reglas desmarcando el check que tienen a la izquierda.

 

background

En la parte de arriba a la derecha podremos cambiar también el estado del elemento seleccionado por si queremos editar el estilo cuando esté el puntero encima, cuando sea el elemento activo….

 

Img5

 

También tenemos opción a incluir reglas para una nueva clase a través del botón [+]

 

Img6

 

Tenemos que tener en cuenta que si cambiamos de página o la actualizamos, todos los cambios aplicados se perderán, ya que no estamos guardando ningún cambio, sólo estamos realizando algunos ajustes sobre la marcha. Esta funcionalidad es muy útil en caso de que tengas que asegurarte antes de que el cambio que vas a aplicar no vaya a dar ningún problema, o incluso si tienes que preparar alguna vista previa de alguna modificación.

 

La pantalla CONSOLE – Viendo mensajes de alerta y advertencia

Esta pantalla nos proporcionará cierta información en tiempo de ejecución. Si los componentes que utilizamos en la página escriben alguna información en consola, podremos verla aquí. Así como si se está produciendo algún tipo de error a la hora de lanzarse el código.

En caso de que se produzca algún error, tendremos un enlace directo para poder analizar el código fuente.

 

Img7

 

SOURCES – Viendo el código fuente y depuración de código

Esta es una de las principales funciones de este inspector y probablemente la más utilizada. Si pulsamos en la pestaña Sources vemos el código fuente de la página que estamos visualizando. Aquí veremos tanto el código HTML como los diferentes scripts que se están cargando y ejecutando. La opción de depuración no es para usuarios inexpertos y hay que tener algunas nociones de lo que es la depuración, qué son los puntos de ruptura, las expresiones, la pila de ejecución… No vamos a entrar a explicar estos conceptos,, sino cómo trabajarlos en el Inspector.

 

SOURCES – Viendo el código fuente y depuración de código

 

En caso de que estemos depurando un error que venga en la Consola, al pulsar en el enlace se mostrará el código del fichero que ha producido el error. También tenemos opción a navegar por el árbol de la parte izquierda para buscar el script en concreto que queramos depurar.

 

Para la depuración, llevaremos a cabo las siguientes opciones:

  • Haciendo click en los números de línea añadiremos / quitaremos puntos de interrupción. La ejecución de la página se detendrá en este punto, lanzando el inspector, permitiéndonos realizar la depuración línea a línea con los botones F8 (línea a línea) y F10 (función a función)
  • También podremos evaluar cualquier expresión añadiéndolo en la sección watch, pulsando el botón más. Esta expresión, en caso de ser un objeto, nos permitirá expandirlo para ver sus propiedades fácilmente.

 

Img9

 

De esta manera podremos ir línea a línea para ayudarnos a localizar un error y obrar en consecuencia.

 

En el próximo blog de la serie veremos cómo depurar las peticiones que se hagan desde la página web, controlando el mensaje que se envía y la respuesta recibida, así como el resto de funciones incluidas en el Inspector que puedan resultar de utilidad.

¡Os esperamos en el siguiente post!

 

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.