Depurar, editar y guardar ficheros JS en Google Chrome

Receta rápida para los desarrolladores JavaScript interesados, y para retomar el blog tras un parón de unos cuantos meses (he estado ocupado 🙂

La cuestión es: las DevTools de Google Chrome permiten editar y depurar código JavaScript desde el propio navegador. Pero cuando editas un fichero .js y lo intentas guardar, salta el siguiente error:

chrome no deja grabar ficheros js «Changes to this file were not saved to file system». Vaya… pues qué bien… mmmmhh….  ¿y qué dice StackOverflow al respecto? Que existe una solución 🙂 Vamos allá…

Lo primero: pulsa en el botón de configuración.

Botón configuración

 

 

 

Lo segundo, elige la opción Workspaces y añade las carpetas con las que trabajas (las que contienen tu código JS):

carpeta dropbox

 

Puedes añadir más de una carpeta. Fíjate también que puedes editar mapeos URL –> Carpeta local, pero ahí no me meto (por ahora!)

Ojo, cuando añadas carpetas tendrás que aceptar dar permiso, para cada una, para que DevTools pueda acceder a esos datos en modo lectura/escritura. Esta ventana de solicitud de permisos aparece por debajo, en la ventana de Chrome, así que atento, porque hasta que no la pulses, la carpeta no se añadirá correctamente.

Selection_786 Ya casi está. Si estás usando el protocolo file:// para trabajar con tus ficheros en lugar de http://, ojo, porque en ese caso, deberás abrir tus archivos JS desde la carpeta que acabas de añadir al workspace (no vale abrir el fichero haciendo doble click sobre él desde el escritorio o tecleando la ruta en la barra de direcciones del navegador).

 

Abriendo workspaces Sino que tendrás que ir a la pestaña «Sources» y hacer doble click sobre los ficheros de las carpetas importadas (ojo, no desde file://)

Y a partir de ahora, cualquier cambio realizado en el panel DevTools podrás guardarlo «automágicamente» en el sistema de archivos local con un simple Ctrl+S.

 

2 comentarios en «Depurar, editar y guardar ficheros JS en Google Chrome»

Deja una respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.