Editar html y css con DevTools

Home » Blog » Editar html y css con DevTools

Con la herramienta devTools de Google Chorme podemos configurar estilos y html, hacer pruebas antes de subirlo al servidor final o depurar el código fuente para corregir errores. Vamos a ver las posibilidades de esta herramienta y de su pestaña: Elements. Para ello abre el navegador Chrome -> pincha en configuraciones (3 puntos verticales arriba a la derecha) -> herramientas para desarrolladores.

Trabajar con el HTML

La pantalla se te dividirá en 2 bloques en uno tendrás la web que quieres depurar y en otra la herramienta DevTools, que a su vez se separa en 2 bloques, en el izquierdo está el HTML y en el derecho el css, vamos a repasar algunas de las muchas tareas que podemos hacer.

  • Seleccionar el html y css de un elemento concreto: Tanto pinchando en el html o bien usando el icono a la izquierda de la pestaña Elements con forma de flecha, y luego seleccionando el elemento en la propia web, seleccionaremos el elemento y podremos ver su HTML y su CSS.
  • Ver en formato móvil: Al lado de la pestaña Elements, a su izquierda, hay un icono con forma de móvil, al pinchar se transformara nuestra web en formato móvil.
  • Mover un código fuente arriba y abajo: Si seleccionamos un elemento en el bloque de html y lo arrastramos, veremos cómo se ve en la web. por ejemplo, vete a una lista y mueve los li de lugar. Esto ahorra un motón de tiempo de subida al servidor, ver cómo queda, etc.
  • Añadir etiquetas class y html: Si seleccionando un elemento html pinchamos con el botón derecho, nos sale un menú para poder añadir atributos class, id, etc.
  • Cambiar textos: Si pinchamos con doble click sobre un elemento podemos cambiar, por ejemplo la clase, el id, o el texto.
  • Delete o Hide de un elemento: Si pinchamos con el botón derecho sobre un elemento podemos ocultarlo (hide) o eliminarlo (delete). Por ejemplo, puedes quitar un css y ver como se ve todo.

Trabajar con el CSS

Podemos trabajar con ellos desde el bloque derecho:

  • Cambiar estilos: Si pinchamos en un elemento html veremos sus estilos y podemos modificarlos y añadir nuevos, incluso quitarlos.
  • Añadir un nuevo estilo: Si queremos añadir un estilo nuevo, tenemos un botón + encima a la derecha que permite añadir estilos nuevos a un elemento seleccionado.
  • Simular estados: Podemos ver el resultado de añadir los estados: hover, active, focus y visited en botones. Existe un botón arriba la derecha junto al más.
  • Cambiar color: Podemos cambiar colores con un selector de color, aquellos atributos que permitan añadir colores: Background, color, etc.

En definitiva tenemos un potente editor web en tiempo real sin afectar a lo que los clientes ven en cada momento, y desde la pestaña source podemos descargarnos los cambios realizados (botón derecho) y ver histórico de cambios.



Foto de Iñigo Mezo Alvarez

IÑIGO MEZO ALVAREZ (IMAcreste)


Comentarios

Deja una respuesta

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

Las reseñas son opiniones que las personas dejan en la página local de Google. Si son positivas, estas reseñas ayudarán a mejorar la confianza y credibilidad de una marca.

Participa en nuestro sorteo enviando un email con tu nombre y el asunto «Sorteo AUDITORÍA SEO». Se realizara un sorteo cada mes.

Evaluación EXCELENTE
A base de 7 reseñas
Gran profesional y muy competente, le contratamos para cambiar la web y mejorar el posicionamiento y gracias a su asesoramiento ha mejorado.
jorge martinez
jorge martinez
16/05/2024
Contactamos con Iñigo para el diseño web de nuestra tienda online y estamos encantados. Su asesoramiento, seguimiento y trato han sido excepcionales. Un verdadero crack. Recomendado al 100%. No dudes en ponerte en contacto con el.
erlantz rique
erlantz rique
19/02/2024
Un acierto quien elija a Iñigo. Autentico profesional, se preocupó en todo momento que entendiera el funcionamiento de la web. Me explicó todo las veces necesarias hasta entenderlo. Se preocupó y acertó en que la web tuviera lo que le pedí y lo hizo con creces. Muy contento con el servicio prestado. Una vez realizado el trabajo, cualquier duda que tengo me sigue ayudando. Lo recomiendo sin temor a equivocarme.
Jose Marlasca
Jose Marlasca
06/02/2024
Compromiso, implicación e innovación en los proyectos. Atento a las necesidades e incansable en la búsqueda de soluciones. Muy buena opción.
Jabier Fuertes Udaondo
Jabier Fuertes Udaondo
07/01/2024
Si buscas a alguien que además de hacer un diseño web moderno, responsivo y adaptado a tu sector, te explique por qué plantea el diseño web de esa manera y que te explique y ayude en posicionar tu web lo mejor posible en base a los objetivos fijados, ese es Iñigo Mezo y os lo recomiendo al 100%
Asier Hermoso
Asier Hermoso
03/01/2024
Genial trabajar con él! Además de ser muy buen profesional, experto y responsable, a destacar tanto su implicación en cada proyecto, así como su trato siempre cercano y su paciencia infinita ;) Un crack!!
itxaso zubia
itxaso zubia
15/12/2023
El plugin gratuito para integrar productos de Prestashop en Wordpress muy sencillo de utilizar y muy bien documentado, os felicito.
Fernando Cózar
Fernando Cózar
02/11/2023