Las herramientas para desarrolladores de Google Chrome pueden mejorar el flujo de trabajo de un desarrollo web. Digamos que estás trabajando en el diseño de un tema de WordPress y usas el preprocesador Sass.
Normalmente estarás trabajando en local, para ello tendrás instalado algún software para tener un servidor local en tu equipo que corra Apache, MySQL y PHP: XAMP, AMPPS, MAMP o cualquier otro. En el artículo Cómo instalar WordPress en local paso a paso explico cómo hacerlo.
Y trabajarás con algún editor o IDE en el que irás editando los archivos PHP del tema. En este artículo vamos a ver cómo editar en vivo el CSS o Javascript desde el navegador y poder guardar los cambios realizados aunque trabajes con un preprocesador.
Las herramientas para desarrolladores de los navegadores son parte fundamental del proceso, utilizamos la consola, analizamos, etc. pero cuando editamos algo los cambios no se guardan y tenemos que reproducir esos cambios en nuestro IDE.
Google Chrome permite que le demos permiso para que cuando editemos algo esos cambios se guarden gracias a los Workspaces (espacios de trabajo).
Añadir Workspaces
El proceso es muy sencillo:
- Abre en el navegador Google Chrome tu proyecto web y las herramientas para desarrolladores
- En Settings > Workspace añade el directorio de tu proyecto, si trabajamos con WP, añade la ruta al tema en el que estás trabajando. Te aparecerá un mensaje pidiendo arriba «DevTools solicita acceso completo a (tu directorio). Asegúrate de no revelar información confidencial». Pincha en «Permitir»
- Una vez añadido este Workspace debes mapear tus archivos locales con los de red, introduce la url de tu sitio, por ejemplo: localhost/wordpress y en la derecha no tienes más que poner / .
- Si actualizas la página ya podrás editar en vivo y verás que los cambios que hagas en tu CSS se están guardando, en la consola tienes un historial de cambios que siempre puedes revertir.
Algunas consideraciones, estos cambios no se van a guardar:
- los cambios en el DOM,
- los estilos que añadas como inline,
- las nuevas reglas que hagas a no ser que los insertes en el panel Sources.
Trabajando con un preprocesador como Sass en Chrome
Claro que seguramente estés trabajando con un preprocesador CSS, digamos que es Sass aunque puede ser otro como Less o Stylus o alguno de Javascript (ver preprocesadores soportados). Si es así no querrás editar el archivo CSS sino el archivo .scss que corresponda, el archivo donde has incluido esa regla CSS.
Chrome es capaz de detectar estos archivos de origen gracias al archivo de mapa de origen (.map), un archivo en formato JSON que establece la relación de cada declaración de CSS y la línea correspondiente del archivo de origen (.scss)
En Settings > Preferences asegúrate que en Sources tienes activada la opción «Enable CSS source maps», por defecto lo está.
Cada archivo CSS compilado hace referencia a ese mapa de origen en forma de comentario especial en la última línea del archivo.
Ejemplo:
/*# sourceMappingURL=estilos.css.map */
Si te manejas con Sass pero no con la línea de comandos puedes usar Koala, un software multiplataforma de código abierto y gratuito que además de compilar Sass, Less, Compass y CoffeeScript tiene la opción de crear este mapa de origen y añadir esa línea en el CSS compilado.
Por último te aconsejo que actives un par opciones experimentales de Chrome que pueden ayudarte. Primero activa las opciones experimentales en chrome://flags/#enable-devtools-experiments
Experimentos de Herramientas para desarrolladores Mac, Windows, Linux, Chrome OS
Habilita los experimentos de Herramientas para desarrolladores. Utiliza el panel de configuración de este servicio para activar experimentos individuales.
En Settings > Experiments activa Live Sass y Source diff
Live Sass te permite editar en vivo variables de Sass y Source diff añadirá una ayuda visual de colores a los cambios que vayas haciendo. Las líneas borradas se marcarán en rojo, las modificadas en púrpura y las nuevas en verde.
Una vez hecho esto podrás editar CSS (o Sass) directamente desde el navegador.
Deja una respuesta