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.