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:

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{}

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.

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

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

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.

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.

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.

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!