En este vídeo veremos a través de un ejemplo cómo puedes utilizar Google Chrome como un completo editor de código front-end de manera que puedas depurar y editar todo al mismo tiempo y además sin necesidad de nada externo y sin envidiar nada a otros editores de los que hay por ahí.
Lo que mucha gente no sabe es que, Google Chrome, aparte de tener las herramientas del desarrollador para poder depurar y afinar cosas es también un excelente editor y además te permite editar directamente contra disco. Es decir, si dispones del código fuente de la página que estás tocando lo puedes tocar directamente con las herramientas del desarrollador al mismo tiempo que depuras.
A continuación te resumo por escrito lo explicado en el vídeo:
Veremos todo esto con un ejemplo muy sencillo que está servido desde un servidor web. En este caso está en local (pero podría estar en internet) y consiste en la típica lista desplegable con tiempos que al hacer clic en iniciar arranca una cuenta regresiva.
Se sirve desde un servidor local Server que es un servidor muy conocido de Node.js. En el disco duro está el código fuente, que en este caso es muy sencillo ya que se trata de una página HTML y CSS, nada más. Además, todo esto lo tenemos abierto en Notepad++, que es un editor simple de texto que colorea código pero que tampoco ofrece demasiado de cara a trabajar con código.
¿Por qué se guardan los cambios que hagamos en la web?
Bien, resulta que en Google Chrome o en cualquier navegador basado en Chromium (como puede ser por ejemplo Opera o incluso Microsoft Edge en Windows) si sacamos las herramientas del desarrollador, aparte de todos los elementos habituales, en la pestaña Sources tenemos el código fuente traído de la página como siempre, solo que podemos entrar y verlo, pero no nos lo deja tocar porque esto es en el servidor.
También existe una pestaña que se llama Filesystem (que si no la ves la puedes ver desplegando en las flechitas) que te permite escoger una carpeta local disco en la que tienes el código fuente de la página que estás depurando, aunque esté en un servidor, y mapea los archivos de la pestaña Page con los archivos que estén en esa carpeta, de manera que todos los cambios que hagas quedan reflejados inmediatamente.
¿Cómo modificamos la página web en Chrome?
Para ello lo que tienes que hacer es ir a Filesystem, darle al "+" y añadir una nueva carpeta donde esté el código fuente. Seleccionamos la carpeta, y el navegador pedirá permisos para poder acceder al disco duro (lógicamente) porque los navegadores siempre te piden este permiso.
Lo permites y a partir de este momento tienes ahí los archivos del disco duro. Si además refrescas esta página, fíjate cómo habrán cambiado los iconos y se ponen dos puntitos de color verde alrededor, de manera que quiere decir que ya están enganchados los archivos de la pestaña Page con los archivos de Filesystem. Si hubiera aquí alguno más que no estuviera en el sistema de archivos pues no estaría con el puntito verde.
Ahora están enlazados de manera que si hacemos cualquier cambio se ve reflejado inmediatamente en disco duro y lo podemos subir al servidor cuando haya terminado. Bien, ahora fíjate, en este caso si despliego, tengo una errata en esa página ya que tengo dos veces 10 minutos cuando aquí debería poner 15.
Abrimos el archivo en el editor, le ponemos 15, grabamos con Ctrl + S y ahora si refrescamos el servidor, como esto es un servidor local, veremos que ya ha cogido el cambio. Y si vamos a Notepad ++ y abrimos la página nos dice que ha cambiado y si queremos volver a cargarla (obviamente sí) y veremos ese cambio reflejado.
Bien, pues lo mismo podemos hacer con cualquier otra cosa que haya dentro de esta aplicación. Por ejemplo, imagínate que consideramos los números del contador como demasiado grandes o demasiado pequeños. Lo podemos seleccionar, vamos a la parte normal y corriente de elementos, tenemos las propiedades y fíjate que el tamaño que nos font-size son 10em. Le damos para arriba o para abajo si lo quiere hacer mayor o menor, por ejemplo lo hacemos más grande hasta 14 em. Vale, en el momento en que le das a enter automáticamente por detrás te lo ha graba también en disco duro porque tenemos guardada en la pestañas Sources la relación entre el archivo CSS donde estaba ese valor y el archivo en disco duro.
Conclusiones
Fíjate en que estamos tocando en el servidor pero con ese mapeado nos lo guarda en el disco duro. Si ahora vamos en el editor (Notepad++) al archivo abierto crono.css nos dice que ha cambiado y si lo queremos recargar. Le decimos que sí y fíjate como ahora ha puesto esos 14 em directamente en el código fuente. De esta manera es muy sencillo editar, depurar, hacer cambios y demás y ya verlos reflejados inmediatamente de nuestros archivos de código fuente con lo cual cuando terminemos ya no tenemos que ir al editor y ahí replicar los cambios, ya lo está haciendo directamente Chrome.
Chrome es un editor bastante capaz. Por ejemplo si vamos al font-size que acabamos de cambiar e intentamos ponerle otro valor, fíjate que ya sugiere qué cosas podemos poner ahí exactamente igual que haría desde Elements. Incluso podemos editar colores con su editor específico, así que se trata de un editor bastante potente tanto de CSS como de JavaScript, HTML y demás. Con este truco no necesitas otro editor si solo estás haciendo front-end y puedes estar haciendo los cambios y depurando y tenerlo todo en un único sitio.
De esta manera, al terminar simplemente subes los archivos a tu servidor y tienes todos los cambios hechos.
Esperamos que este truco te haya parecido interesante.
Fecha de publicación: