• Skip to primary navigation
  • Skip to main content
David Viña

Desarrollador web freelance especializado en WordPress

  • Diseño web
  • Optimización web
  • Conóceme
  • Blog
  • ¿Hablamos?

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

14/05/2019 por David Viña

Si te gusta, comparte!! No cuesta nada!!

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.

Contenido

  • 1 Como acceder al inspector de Chrome
  • 2 Visualización en distintos dispositivos
  • 3 Como maquetar una web desde el inspector de Chrome
  • 4 Sobrescribir clases CSS
  • 5 Conclusión

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.

Si te gusta, comparte!! No cuesta nada!!

Si te gusta, comparte!! No cuesta nada!!

David Viña

Soy Desarrollador Web freelance especializado en WordPress. Me gusta hacer páginas web que cargan muy rápido y estén lo más optimizadas posibles sin perder calidad ni diseño. I ❤️ Gutenberg!!

Reader Interactions

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

  • Aviso legal
  • Política de privacidad y cookies

Copyright © 2021 | David Viña | Inspired by Jarnote | hola@davidvina.es

En este sitio web solo usamos cookies técnicas para el correcto funcionamiento de la web [Leer másAceptar
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Siempre activado

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

Non-necessary

Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.

GUARDAR Y ACEPTAR