Como usar el inspector de Chrome para diseñar una web

2 min 14/05/2019

Una de las herramientas que más uso durante mis diseños webs es Chrome. Y con mucha diferencia!! La uso para acceder a WordPress, a las muchas herramientas web que uso, al panel de control del servidor e incluso edito código desde el propio administrador de archivos del servidor. Pero si hay una funcionalidad que destaca entre todas ellas, es el inspector de código Chrome. Tiene muchas más funcionalidades, pero yo me voy centrar en las que se refieren al diseño web o maquetación de páginas web.

Las principales ventajas del inspector de Chrome para un diseñador web radican en la inspección de un determinado elemento donde se puede ver todo el Html que se carga y los estilos CSS que le dan forma. Otro recurso imprescindible es la consola, especialmente para depurar errores de javaScript o consulta de información que se necesite sacar por la consola.

En este artículo voy a describirte como le saco partido al inspector de Chrome para diseñar una web.

Como acceder al inspector de Chrome

Lo primero es acceder al inspector de Chrome. Hay varias formas:

• Pulsando el botón derecho sobre un determinado elemento y pulsando en inspeccionar. La ventaja de este método es que te resalta directamente el elemento en cuestión.
• Pulsando la combinación de teclas Control+Alt+I.
• Accediendo al menú de Chrome (3 puntitos de la barra superior a la derecha) -> Más herramientas -> Herramientas para desarrolladores.

Al acceder se abre una ventana como la siguiente:

Visualización en distintos dispositivos

Otra característica importante para un buen diseño es la posibilidad que ofrece el inspector de Chrome de visualizar la página web en distintos formatos (escritorio, móvil, tablet o eligiendo las medidas).

Si el dispositivo o tamaño que quieres visualizar no aparece, en responsive te permite poner las medidas que quieras. Y en Edit puedes crear un nuevo dispositivo.

Como maquetar una web desde el inspector de Chrome

Pongamos por caso que tenemos nuestra página web hecha con Gutenberg y queremos darle estilo. Abrimos el inspector y seleccionamos cada elemento que queremos maquetar y ponemos todo el CSS en element.style en la parte de Estilos de la consola. Una vez maquetado ese elemento, vemos la clase o el id que tiene dónde está el código HTML y lo copiamos en el archivo de estilos tanto la etiqueta como el código CSS. Si lo que queremos hacer es modificar una clase que aparece en la lista, y puede afectar a varios elementos, también se puede modificar desde la parte de Estilos de la consola.

Con todo esto conseguimos por un lado, ver los cambios en tiempo real, y por otro lado tenemos el autocompletado que ofrece el inspector y te puede ayudar mucho en las tareas de maquetación.

Sobrescribir clases CSS

Uno de los principales problemas que ocasiona el uso de plantillas, ya sea en CMS como en diseños a medida, es saber exactamente que estilo se le está aplicando a un elemento determinado ya que se van sobrescribiendo los estilos según se van añadiendo Frameworks o estilos. Pero gracias al inspector de Chrome, podemos saber exactamente que estilo se está aplicando y desde dónde lo aplica para coger exactamente la etiqueta que hay que aplicar en nuestra hoja de estilos.

Como puedes ver en la imagen, en la zona de la derecha de los estilos, te muestra todas las características que están activas para el elemento seleccionado y desde el archivo desde donde se aplica, de manera que pulsando en el archivo, te lleva directamente a el para coger ese trozo de código y poder sobre escribirlo. Si pulsas en la característica en sí, en este caso en ‘Poppins’, te abre en la parte de la izquierda el código CSS que se está aplicando.

Conclusión

Como puedes ver, el inspector de Chrome es una gran ayuda para el diseño o maquetación de una página web. Ya sea para ver como se visualiza la web en distintos dispositivos, para ver los estilos que se están aplicando o para diseñar directamente desde el propio inspector, esta herramienta no puede faltar en el día a día de un diseñador web.