Cómo modificar nuestro CSS desde Google Chrome

Hola y bienvenidos de nuevo al área web de Escola Espai.

Os hemos enseñado cómo modificar el código CSS desde el inspector de código de nuestro navegador pero sin guardarlo. Ahora ya es posible guardar el código CSS creando en Google Chrome un espacio de trabajo (Workspace).

Para poder guardar nuestro código debemos seguir los siguientes pasos:

1. Generar nuestro espacio de trabajo:

Ir al Inspector de elementos (F12) y a opciones.

Una vez en opciones (settings), seleccionar Workspace y Add folder…

Seleccionar la carpeta raíz de nuestro proyecto

Permitir el acceso de DevTools a la carpeta del proyecto

Se reiniciará el inspector de elementos de Chrome.

Y ya hemos generado nuestro espacio de trabajo.

2. Mapear nuestro archivo CSS

Una vez creado nuestro espacio de trabajo debemos elegir el archivo CSS que queremos modificar, para eso debemos ir a sources dentro del inspector de elementos.

Entrar en la carpeta de nuestro archivo CSS local, hacer click derecho encima del archivo css y click encima Map to the file System resource…

Una vez terminada la última acción, Google Chrome ya nos permite modificar nuestro código desde sources y guardarlo con un sencillo Crtl + S. Chrome no sólo nos permite modificar el CSS, también nos permite modificar el Javascript y el Html.

Espero que el artículo os haya sido de ayuda.

Saludos desde el departamento web y hasta la próxima.

Marc