Herramienta para desarrolladores – Uso
No hace mucho, veíamos en este artículo una manera de aplicar nuestros márgenes, y os introducíamos a una herramienta que los desarrolladores web utilizan a diario: la herramienta para desarrolladores. En el post de hoy veremos de qué elementos se compone esta consola, y cómo utilizarla en nuestro beneficio.
¿Qué compone la herramienta para desarrolladores?
Como ya sabéis, la manera de mostrar la herramienta para desarrolladores en Chrome o Firefox es simple: pulsando la combinación de teclas Ctrl + Shift + I. En otros navegadores, es posible encontrarla entre las opciones. En este artículo, la herramienta que utilizaremos como referencia será la de Chrome, sabiendo que el resto son similares.
Herramienta para desarrolladores en Chrome
Como podéis ver, hay varios elementos, y es necesario tener un mínimo de conocimiento de inglés (¡como para todo lo que es programación!). Vamos a empezar con los dos iconos. Estos son elementos básicos, y entraremos luego uno por uno en todas las herramientas que nos ofrece esta ventana.
El primer icono es el selector. Si pinchamos en él y, seguidamente, en algún elemento de la web, se nos seleccionará ese elemento en el panel inferior y, a la derecha, se nos abrirán sus estilos.
Continuamos con la barra de herramientas de dispositivos. Al pulsar en este icono, se transformará nuestra ventana y podremos elegir el tamaño de ventana que queramos. Es especialmente útil cuando estamos trabajando en un diseño responsive y queremos ver, en caliente, cómo se comportaría.
¿Qué más herramientas ofrece?
Empezamos con la leña: el panel Elements muestra un arbol DOM (Modelo de Objetos del Documento), que nos permite ir inspeccionando todos los elementos HTML de la página en la que nos encontremos. Se utiliza, en conjunto con las dos opciones anteriores, para identificar objetos en concreto que necesitemos modificar.
Lo siguiente es la Console. Es una consola de JavaScript, y da dos funciones elementales a los desarrolladores: muestra información de un proceso en desarrollo y nos permite utilizarlo para interactuar con el documento.
Sources: útil para debugging
Cuando se trabaja con JavaScript, es necesario hacer debugging, para saber en qué parte del código se pueden encontrar los posibles fallos y así solucionarlos. Para esto, el apartado más útil es Sources. Este nos permite trabajar de manera más sencilla con estos elementos (y creedme, es necesario que sea lo más sencillo posible).
Network. Este panel nos muestra información sobre los recursos que necesita la página y que son descargados en tiempo real. Es clave a la hora de optimizar nuestra web. Así podremos saber qué recursos son los que tardan más en cargar, cuales dan más problema…
Como veréis, todavía quedan algunas opciones, pero llevamos mucho material con el que podéis ir bicheando cómo cargan vuestras webs.
De cualquier manera, si queréis profundizar más en esta herramienta, os recomiendo que os paséis por la ayuda de Google. Ahí podréis ver todo más detallado y aprender mejor todos los usos que le podréis dar. Sin duda, ¡esta herramienta hará vuestra vida como desarrolladores mucho más sencilla!
