TL;DR;
Euskalbar Chromerako eskuragarri daukazu. Ctrl-Shift-U (klik bat, lehen bezala) sakatu eta zuzenean bilatu nahi duzun hitza idatzi. On egin! 🙂
Categoría: Chrome
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:
«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.
Google Cloud Print: imprimiendo en la nube
Problema: estás en el autobús de camino al trabajo con el móvil Android y quieres imprimir el PDF que estás viendo en pantalla para que nada más llegar, puedas recoger el taco de papeles impresos y hacer uso de ellos. No es algo traído de los pelos, en el mundo estresado en el que vivimos me ha ocurrido varias veces («ojalá pudiera enviar a imprimir este documento para que sea llegar al despacho y recoger el trabajo para entrar directo a clase…»). Lo sé, podía haberlo hecho antes O:-)
Bueno, el caso es que la espera terminó. Ya es posible hacerlo con una tecnología que salió hace meses para Windows y MacOSX (siendo los usuarios del pingüino otra vez ciudadanos de segunda clase) de la mano de Google. Se llama Google Cloud Print y en resumidas cuentas, lo que permite es enlazar a la nube de Google cualquier impresora a la que tengas acceso desde un ordenador de sobremesa ejecutando el navegador Chrome. De esta forma, cualquier otro dispositivo que tengas (smartphone Android, otro PC con Chrome, una tablet…) conectado y con permisos recibirá la opción de imprimir en esas impresoras. Realmente es como compartir una impresora local a través del navegador… para todo el que tú desees, esté donde esté.
¿Cómo se hace? Abre Chrome (¡ojo! ¡versión 12 como mínimo!). Teclea about:flags. Activa Google Cloud Print. Ahora, cierra y vuelve a abrir Chrome. Desde ele menú de opciones, preferencias, «Under the Hood», haz login en Google Cloud Print (te pedirá que te identifiques con una cuenta Google). Selecciona las impresoras que quieres compartir. ¡Listo! Los dispositivos Android desde los que quieras poder imprimir recibirán la notificación de que tienen impresora disponible sin que tengas que hacer nada más. Los navegadores Chrome de otros PCs tendrás que configurarlos.
Atajo de teclado para borrar la caché de Chrome
Tip rápido: pulsa «Control+Shift+Suprimir» y entrarás ipso-facto en la misma pantalla que pulsando el icono de la llave inglesa, Opciones / Under the Hood / Clear browsing data / Cache
PD1: sí, en Chrome ahora puedes, desde el formulario de Opciones teclear una palabra y automágicamente te llevará directo al menú que contenga dicha palabra, sin tener que andar navegando por opciones, pero el atajo de teclado ahorra más clicks de ratón 🙂
PD2: cómo escribís vosotros memoria caché, ¿con tilde o sin tilde? Toda palabra aguda terminada en vocal, en n o en s lleva acento… pero me pregunto si al derivar de una palabra original en inglés no deberíamos dejarla sin acento…
El albañil de la web
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 🙂