Aprende a utilizar el inspector de Chrome.

Tu navegador tiene una potente herramienta que te permite responder a esas preguntas de: “¿cómo puedo saber que tipografía estoy utilizando?”, o “Se me han olvidado los valores de mi paleta de colores, ¿como puedo volver a saberlos?”… Pero no todo se limita a tipografías y colores, gracias a esta herramienta también puedes saber clases de los divs, o incluso la clase de la página donde te hallas. Además puedes ver in situ que es lo que te crea tal y cual error. Aunque parece que el campo donde más destaca es en el CSS también destaca en el campo de saber cuantos fallos tiene tu web (tanto de jQuery como de otros recursos), los archivos que componen tu sitio… Y creo que con todo eso ya te he convencido para que aprendas las cosas básicas del inspector de Chrome y dar así un pequeño empujón al diseño de tu web, ya que podrás solucionar errores e ir más rápido.

Accede a la página donde quieres hacer la inspección.

Una vez en ella, posiciónate en cualquiera de sus elementos y cuando estés en él pulsa el botón derecho del ratón, haciendo que se despliegue una lista.

La opción que nos interesa es la de “Inspeccionar” que sale en la última posición de la lista. Una vez darle se nos aparecerá un bloque a la derecha de la pantalla, con muchísimas cosas. No te estreses, vamos a ir viéndolas poco a poco.

Como puedes ver, la columna que nos aparece nada más abrir el inspector está dividida en tres secciones: la primera sección equivale al HTML de la página, donde aparece en azul el HTML del elemento sobre el que nos hemos situado al abrir el inspector,  pero si subes y bajas podrás ver el HTML del resto de la página, algunas zonas de ese archivo te aparecerán así “<elemento>…</elemento>” eso se debe a que esas etiquetas tienen anidadas dentro muchas otras haciendo referencia a sus respectivos elementos, por lo que el inspector para no mostrarte todas esas líneas de código las comprime y con dar a los tres puntos ya puedes comenzar a sacar matriuscas de la caja; la segunda sección equivale al CSS de ÚNICAMENTE el elemento sobre el que te has situado para abrir el inspector, además también te muestra los estilos que ha heredado de otros elementos. Para mi esta es la sección más útil porque puedes probar a añadir nuevos estilos, clicando en cualquier parte de la sección CSS; o quitarlos, situándote sobre el estilo aparecerá un rectángulo a su izquierda, quitando el tic que tiene el rectángulo eliminarás el estilo; y ver como queda el resultado. Los cambios que hagas en cuanto actualices la página desaparecen. Por último, la tercera sección, equivale a los errores que puede tener tu plantilla, normalmente suele ser que pones enlaces algún archivo (css o js) que no existe en tu directorio, también te avisan de los errores de JavaScript y jQuery…

¿Quieres saber la clase o estilo de un elemento específico? Como te he contado al principio esta herramienta nos permite saber cual es nuestra tipografía o nuestros colores o el tamaño de la fuente… Ahora la pregunta es “¿Cómo?”. Bien, vamos a olvidarnos de las tres secciones y nos vamos a centrar en la parte de arriba del inspector.

En la parte de arriba como puedes ver la captura hay varias opciones, la que nos interesa es la primera, la de la flechita, por lo que clicamos en ella. E imaginad que quiero saber qué color es el que estoy utilizando en la cabecera (“Con un portátil bajo el brazo”) de la web, pues una vez dada la opción que he mencionado anteriormente, me acercó al elemento y clico sobre él una vez.

Como puedes ver en la sección de HTML te aparece a que equivale ese elemento en el código y en el CSS sus valores, entre ellos el color, como he marcado en la imagen. Sin embargo, a veces te toca bajar mucho para poder dar con lo que buscas, puedes evitar este paso con una opción de la sección de los estilos.

Como ves en la captura de pantalla en la sección estilos hay tres opciones, la que nos interesa es la de filter, que es como un buscador, por lo que escribes ahí la declaración de CSS que te interesa y la encuentras en un periquete.

La última cosa básica que debes saber sobre la herramienta: Gracias a esta herramienta también puedes saber si tu web es responsive y como se ve en diferentes dispositivos, para ello volvemos a arriba del todo, donde antes dimos al símbolo de la flechita.

Pero esta vez le damos al símbolo del móvil con una tablet detrás.

Eso hará que la pantalla se encoja y la veamos como se vería en un móvil.

Sobre la pantallita con nuestra web aparecen varias opciones. La primera sobre la pantallita es una barra donde puedes ir marcando el tamaño y ver como queda en un móvil S, un M…

Luego más arriba en donde pone responsive podemos elegir la marca de dispositivo donde queremos ver nuestro diseño y si no está el que tú quieres en la lista te permite buscarlo dándole a “Edit”.

Con lo que se encuentra a la izquierda del último elemento mencionado podemos establecer nosotros mismos el tamaño de la pantalla. Y con la opción del final simplemente cambiamos el zoom con el que vamos la pantalla.

Pero si en cambio quieres cambiar el diseño e ir viendo la transición de un tamaño a otro, al lado de la pantallita (ancho) y bajo ella (alto) encuentras una barra gris con dos iconos, pues bien situándote sobre esa barra y arrastrándola puedes aumentar el ancho o el alto.

A partir de estos pasos básicos puedes comenzar a sacar un montón de provecho a esta herramienta y al final te darás cuenta que no necesitas invertir en visual composers que con un par de líneas de código tu propio navegador se convierte en uno. Y es que tanto Firefox como Microsoft Edge tiene esta opción, sin embargo yo recomiendo y he hecho este tutorial para Chrome porque es el mejor navegador hasta el momento y todas las webs se diseñan y desarrollan en base a este navegador.