Herramientas para desarrolladores del navegador

Qué son estas herramientas y qué nos permiten hacer

Las herramientas para desarrolladores que nos proporcionan los distintos navegadores básicamente son unas extensiones que nos van a permitir, entre otras cosas, jugar con los estilos y con el código HTML de nuestra página para visualizar cómo va quedando, ver qué archivos se han descargado cuando hemos obtenido una página y muchas otras cosas más.

Cómo empezar a trabajar con ellas

Todos los navegadores actuales nos ofrecen estas herramientas para desarrolladores. Para acceder a ellas solo hay que pulsar el botón derecho y elegir la opción Inspeccionar elemento sobre cualquier elemento de la web.

En Google Chrome también se accede a las mismas pulsando la combinación de teclas Ctrl+Mays+J. Una vez abierta la consola podemos colocarla en la parte inferior de la pantalla, en cualquiera de los dos lados e incluso separarla en una nueva ventana si tenemos dos monitores, utilizando la opción Dock side del menú.

Diferentes zonas de la consola

En la consola de Google Chrome tenemos varias pestañas diferentes:

Sources Aquí podemos ver todos los archivos que se han descargado para la página correspondiente, ya sean archivos JavaScript, HTML entre otros tipos.

Network En esta pestaña se nos muestran las cabeceras y lo que han tardado en cargarse entre otras cosas.

Performance Aquí podemos ver datos del rendimiento vale, como por ejemplo hacer un profile de cuánto tarda en cargar la página.

• Elements Aquí podemos visualizar el código HTML, además de poder eliminar o modificar partes del mismo de forma local, para así ver cómo queda la página. Incluso podemos mover bloques de código dentro del HTML, para jugar con los mismos y ver el resultado. En la ventana derecha, dentro de Elements, también tenemos varias opciones, como por ejemplo Styles, dónde podemos ver qué estilos se están aplicando. También podemos cambiar esos estilos, quitando o añadiendo propiedades, incluso borrando elementos, para realizar pruebas.
• Console En esta pestaña se nos habilita una consola en la que podemos insertar código JavaScript para realizar todo tipo de pruebas.
• Memory Desde aquí podemos comprobar la memoria que ocupa la web que se ha cargado.
• Application Aquí podemos ver, por ejemplo, las cookies que tenemos.
• Security Dónde podemos ver todo lo relacionado con la seguridad de la web.
• Audits En esta pestaña podemos realizar auditorías de la página web. En el caso de utilizar Firefox la consola es también muy similar a la de Chrome. Para el curso de HTML y CSS la pestaña que principalmente vamos a utilizar es la pestaña Elements, y dentro de la misma en la parte derecha tanto la opción Styles, que ya hemos nombrado antes, como la opción Computed, en la que podemos ver también la caja de los distintos elementos CSS y podremos modificarlos.

Muy importante también si utilizamos diseño responsivo saber que tenemos un botón a la izquierda de Elements, que nos permite ver y simular cómo quedaría la web en distintos tamaños de pantalla. A la izquierda de este botón para el diseño responsivo tenemos una opción que nos permite ir seleccionando la zona de la web de la que queremos inspeccionar su código.

Como puedes ver, estas herramientas son muy útiles, porque nos ayuda a acelerar el desarrollo de una web, ya que porque sin este tipo de herramientas los cambios se realizan a ciegas, sin ver el efecto inmediato de forma más visual.