Antes de avanzar con ese proyecto full-stack en el que nos tocaba montar el servidor, me ha parecido oportuno hablar de tu segundo mejor amigo a la hora de programar y maquetar (el primero es el buscador de Google, claro): las herramientas para desarrolladores de Google Chrome.
Como uno tiene cierro currículum ya, ha pasado por muchas etapas en el desarrollo, esos tiempos en los que el front solo era maquetar, salvo dos pequeñas funciones de javascript que se encargaban de validar los campos de formulario antes de su envío. Tiempos en los que el crossbrowser solo tenía dos integrantes: Internet Explorer y Netscape Navigator.
Como bien sabemos ya, todo evoluciona: el JS empezó a coger fuerza, llegó la época del jQuery para hacerlo más amigable… y ahora estamos en ese mundo front donde el JS lo gobierna todo, con maquetaciones responsive, multitud de frameworks…
Y ese aumento de complejidad exige un socio para poder debugear, algo que antes no era necesario ahora se torna imprescindible: llega el momento del inspector. No es Google Chrome el único que dispone de este tipo de herramienta, pero si el más completo de todos. Son muy similares, así que si le tienes rabia al Chrome, podrás utilizar los demás de manera similar.
Empecemos. Como buen inspector, vamos a inspeccionar; si pulsamos en cualquier parte de la página web en cuestión con el botón derecho del ratón, podremos pulsar en “Inspeccionar” en el menú emergente, lo cual abrirá las herramientas de desarrollador.
Como puedes ver, se sitúa en el elemento donde hiciste click (sí, también puede abrirse con F12, sin foco en ningún elemento). Puedes ver el CSS asignado a ese elemento, pudiendo hacer cambios para ver cómo quedaría tu elemento con otro tamaño, fuente, color… Puedes activar los hover, añadir clases nuevas… todo lo que quieras trastear. Es una herramienta muy potente para maquetar, puesto que puedes empezar con unas div limpitas, ver cómo va quedando y acabar tu maquetación feliz y con el resultado deseado. Además puedes ver tu página en diferentes resoluciones, para que no se te escape nada de tu perfecto responsive.
¿Mola, verdad? Pues solo hemos visto la pestaña “Elementos”, tienes muchas más para trabajar. Las que más usarás serán:
- Consola: pudiendo ver todos los log que devuelve el front. Además, puedes ejecutar código JS. Aquí tienes ambas cosas:
- Red: todas las llamadas que hace el navegador para solicitar los archivos que necesita. Muy interesante la parte de Fetch/XHR donde podrás ver qué devuelven ese tipo de llamadas
Y paramos aquí. Date una vuelta, cotillea y descubre todo lo que tu avispado inspector puede hacer por ti. Te dejo como tarea que mires los puntos de ruptura y los listeners, los vas a usar MUCHO. Por aquí me tienes si tienes cualquier duda sobre estas herramientas.
¡Hasta la semana que viene!
