Categoría: 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:

 «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.

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

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.

 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).

 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.

From Wikipedia, jugando con las palabras/enlaces: «Albañil […] también se refiere a aquel que se dedica a la reparación o reforma con materiales de obra. Antiguamente, al menos hasta el S. XIX, el oficio de albañilería era un oficio gremial. Para pertenecer a él, el candidato debía ser presentado por un miembro y ser aceptado formalmente como aprendiz. Una vez dentro del gremio podía conseguir distintos grados hasta llegar a maestro, que tenía una consideración social importante.»

Los albañiles de la web actual también deberían de pasar por un período de formación hasta conseguir el título de webmaster, tan en desuso hoy en en día…

Tenemos un problema a resolver: la siguiente web tiene un enlace para cambiar de idioma (de castellano a euskera o viceversa).

La cuestión es que al pinchar en el cambio de idioma, el navegador vuelve a la home de esa sección de la web, cambiando el contenido de la página por completo (cambia de idioma, pero nos lleva al «hall» de la web, en lugar de mantenernos donde estábamos)








Es decir, pasamos de estar aquí (navegando en español):

http://www.tic.ehu.es/p265-shintrct/es/contenidos/enlace/intrehutic_ldap_indice/es_indizea/ldap_indice.html

a estar aquí (navegando en euskera):

http://www.tic.ehu.es/p265-shintrhm/eu/

Podemos cambiar la URL original a mano, donde pone «es» lo sustituimos por «eu»… O bien, podemos hacer un pequeño script que lo haga por nosotros. Y si tenemos la ayuda de la consola de Chrome, mejor que mejor. Desde ese navegador, pulsamos el botón derecho sobre la página y seleccionamos «Inspect Element».

En la parte inferior izquierda, pulsamos sobre el botón que abre la consola. Veremos algo como lo siguiente:

En la parte inferior, he tecleado «wind» y el propio Chrome me sugiere que «window» es un objeto DOM válido, que puedo manipular vía Javascript. Estudiando un poco ese modelo DOM, y con la ayuda del propio navegador (autocompletamiento de nombres de objetos y propiedades), sabiendo que las teclas para movernos por una sugerencia de keyword son el tabulador y/o la «flecha derecha», llegaremos fácilmente a:

   window.location.href

Y si tras teclearlo pulsamos Enter:

Vemos que Chrome nos da el valor de esa propiedad href. Lo que nos interesa ahora es cambiar toda aparición de «es» por «eu» automágicamente 🙂 ¿Toda? Bueno, toda no, porque el .es del dominio no lo queremos cambiar. ¿Cómo obtener la parte de la URL a la derecha del dominio? Curioseando en el modelo DOM, vemos que es la propiedad window.location.pathname. Ahora, un find&replace y lo tenemos 🙂

¿Cómo lo añadimos ahora a la barra de bookmarks de Chrome para tenerlo siempre disponible? Botón derecho sobre la barra de bookmarks, «Add page..», y tecleamos lo que ves en la imagen de la izquierda (ojo, pulsa sobre la imagen o no verás un carajo)

Listo! Cuando pulsemos en el enlace especial Javascript que acabamos de crear (bookmarklet se llaman), cambiará la URL de la página, de «es» a «eu», con un sólo click.

El albañil se va a por el bocata, satisfecho del trabajo bien hecho 🙂