Hola!
Hoy vengo a hablaros de un tema que me parece muy interesante contaros. Y es que creo que esta nueva funcionalidad ha aparecido en la versión 29 de Chrome.
Se trata de los Workspaces de la Google Chrome Developer Tools, desde donde podremos modificar los fuentes (HTML, CSS o Javascript) directamente desde el inspector de elementos. Esto nos va a evitar el uso, en la mayoría de los casos, de plugins como LiveReload (que refresca la web que estamos construyendo en cuanto guardamos un fichero después de modificarlo).
Comencemos:
- deberemos la carpeta htdocs o www de nuestro apache accesible como carpeta en nuestro sistema operativo.
- cargamos nuestra página en el navegador, yo por ejemplo: http://localhost/PageTransitionsBlog/index.htm
- Supongamos que quiero modificar los colores de cada una de los bloques que aparecen ahí… ¡lo podemos hacer desde el inspector! Abrimos el inspector con F12 o botón derecho del ratón encima de algún elemento de la web y seleccionamos «Inspeccionar elemento».
- Hagamos click en la ruedecita de opciones de esta ventana:
- En la opciones del inspector, seleccionamos Workspace y hacemos click en «Add folder», añadiendo la carpeta de nuestro sistema de ficheros donde están los fuentes de esta web que estamos desarrollando y queremos modificar «on-fly».
- Aparecerá una aviso en la parte superior de la Developer Tools donde «permitiremos» que Chrome acceda con permisos de escritura a esa carpeta:
- Como hemos dicho queremos modificar los estilos de nuestro sitio. Para ello, salimos de las opciones (ya que ya hemos configurado la workspace) y localizamos el fichero de estilos CSS que queremos modificar en «Sources» y hacemos click derecho y seleccionamos «Map to file system resource». La developer tools buscará entre todos tus workspaces dados de alta, un fichero llamado igual al que queremos mapear, en este caso «component.css». Después de seleccionar el fichero que corresponda, es normal que se reinicie el inspector de Chrome:
- A partir de aquí, ya podremos modificar desde aquí este fichero y darle a guardar. Los cambios se harán efectivos en nuestro disco duro y además, la web que modificamos se refrescará automáticamente. En el ejemplo, modifico la propiedad background de #F06060 a olive. Guardamos con Crtl+S y ya tenemos estos cambios en nuestro fichero.
Podremos modificar cualquier fichero de nuestro proyecto: javascript, html o css…, y guardarlo en tu disco.
Yo, personalmente, no usaría solamente esta herramienta para desarrollar frontend, pero sí para alguna cosa puntual.
Nada más!!!
Espero que os guste este trabajillo…