Buscando un editor de código fuente

Uso Apache y PHP en localhost para poner a prueba el desarrollo de las páginas de este sitio antes de subirlas al sitio en producción. Estaba utilizando Eclipse como editor de código fuente. Sin embargo es un IDE demasiado potente para el poco uso que hago del mismo. Hay muchos editores más sencillos que ese con los que podemos editar los documentos HTML, JS, CSS y algo de PHP para un único sitio web. Pero buscaba alguno que pudiera integrar fácilmente con el navegador Chrome.

Ya estaba usando las herramientas de Chrome como Elements, Networks, Timeline, etc. y extensiones que podemos instalar como PageSpeed así como la depuración remota para los móviles. Chrome está incorporando constantes mejoras en estas herramientas y también hay mucha información sobre ellas.

Y en el 2013 el Developer Tools del navegador Chrome agregó la posibilidad de editar código de documentos mediante la creación de un workspace que apunta a las carpetas de nuestro ordenador donde almacenamos los archivos de código fuente. Podemos seguir probando las páginas en un servidor local con ese navegador y hacer los cambios directamente en el editor de código del navegador. Es una ventaja porque en el mismo navegador codificamos, visualizamos y depuramos las páginas.

Todo eso me hizo decidir darle una oportunidad al editor de código. La primera impresión resultó un poco decepcionante. Uno está acostumbrado a ver un montón de "botones" y aquí todo funciona con teclas de método abreviado (shortcuts). Manteniendo Apache + PHP en localhost, empecé a usar este editor y por ahora me resulta muy satisfactorio.

En este tema explico como configurarlo para empezar a usarlo y en el siguiente expongo las shortcuts que, después de todo y cuando uno se acostumbra, son una forma más eficiente y rápida que los clásicos botones en el uso de un editor de código.

Agregar, quitar y excluir carpetas del workspace

El workspace es el conjunto de recursos para desarrollar un proyecto web. Para un sitio web son los archivos con el código fuente HTML, PHP, CSS, JS y otros. Son los archivos originales que pueden estar en un ordenador y luego se suben al sitio en producción. Agregar un workspace al Developers Tools de Chrome es muy sencillo. En el enlace anterior puede ver cómo se hace. O También en esta página de HTML5Rocks, donde pienso que se explica mejor. Pero voy a realizar el proceso completo aquí con capturas de pantalla.

Gestionando el workspace

Imagen no disponible

La pestaña Sources presenta la página del navegador pero el código no es editable.

1. La pestaña Sources presenta la página del navegador, en este caso desde el dominio en desarrollo localhost, con el icono "Internet" (globo terráqueo). La página (index), que está entre paréntesis, es el código actual de la página que estamos viendo en el navegador. Este código no es editable.
2. Para agregar una carpeta al workspace vamos a los ajustes de configuración (Settings), en el ajuste workspace, botón Add folder.
3. Nos saldrá un cuadro de diálogo para buscar la carpeta raíz en local donde se encuentran nuestros códigos fuente. Seleccionamos esa raíz (wx en mi caso) y aceptamos.
4. Permitiremos que Developers Tools pueda gestionar esa carpeta para crear, editar y eliminar archivos y subcarpetas.
5. Ya tenemos la carpeta raíz agregada al workspace. Podemos agregar tantas carpetas como proyectos tengamos. O incluso carpetas que estén fuera de la raíz por motivos de seguridad.
6. Volviendo a la pestaña Sources vemos el árbol de carpetas que cuelgan de la raíz. Abrimos por ejemplo la página de inicio del sitio. Vemos la pestaña index.html sin paréntesis. Este es el contenido del código fuente que tenemos en local. Ahora si que podemos modificar ese archivo, guardarlo con Ctrl+S y refrescar la página con Ctrl+R para ver los cambios en la ventana del navegador (usando, por supuesto, algún servidor local).
7. En cualquier momento podemos quitar una carpeta del workspace. Sólo hay que volver a la configuración y pulsar el botón con una "X".
8. También podemos excluir subcarpetas, ocultándolas del workspace. La carpeta no-publicable que aparece en la imagen la utilizo para almacenar cosas que finalmente no subiré al sitio en producción. Podemos ocultarla en la configuración...
9. ... y también podemos usar el menú contextual en la pestaña Sources para realizar esa y otras acciones.
10. Para volver a incluir una subcarpeta excluida previamente, vamos a la configuración, seleccionamos la carpeta raíz de la que cuelga y pulsamos el botón de edición. En la carpeta excluida pulsamos el botón con una "X" y esa carpeta se incluirá nuevamente. Al volver a la pestaña Sources quizá será necesario refrescar la carpeta raíz para actualizar el árbol de carpetas. Esto se hace con el menú contextual, entrada Refresh.

Mapeado de URL al workspace

Otra utilidad que podemos hacer con el workspace es mapear una URL. Aunque no encuentro mucha utilidad en esto, explicaré las pruebas que he realizado hasta ahora.

Mapeando URL al workspace

Imagen no disponible

Una vez creado el workspace tenemos dos grupos de carpetas. En el primero están las que apuntan a la página que se visualiza en el navegador, extraídas desde Internet. El segundo grupo es el de nuestro workspace. Hemos abierto los index.html de las carpetas raíces.

1. Al crear el workspace tendremos dos grupos de carpetas raíces. La primera es la de Internet tal como se recibe en el navegador. Aquí estamos navegando en la página de inicio del dominio localhost. En paréntesis (index) es este documento de Internet, junto a otros recursos que se descargaron desde la carpeta res/inc. A medida que el navegador descarga recursos va formando este árbol de carpetas. La segunda carpeta raíz es la local wx. El documento de inicio es index.html. Podemos modificar ese documento, guardar y refrescar la página para ver los cambios.
2. Si la estructura del sitio en Internet es la misma que la local, podemos mapear la URL de la página de inicio. Vamos a (index) y buscamos en el menú contextual la entrada Map to file system resource..., mapear a recurso del sistema local de archivos.
3. Nos saldrá una ventana con un cuadro de texto y una lista de archivos locales. Escribimos index.html y la lista va filtrándose a medida que escribimos. Seleccionamos la página de inicio. Al cerrar esa ventana pulsando fuera de ella ya tendremos mapeada la URL. Refrescamos la página para actualizar esto.
4. También podríamos haber realizado lo mismo desde la configuración. Ahí también podemos eliminar un mapeado.
5. Después de mapear y refrescar la página desaparecerá la carpeta raíz de Internet. Sólo tendremos las carpetas locales. La útilidad del mapeo de URL es más bien escasa. O quizás no logro verle mayor utilidad. Según comenta la documentación, por ahora sólo sirve para hacer modificaciones en los CSS en la pestaña Elements y que esos cambios se guarden de forma persistente en el archivo mapeado local. Pero no he podido, o sabido, probarlo.
6. En cualquier caso encuentro un problema al mapear la URL. Antes del mapeado teníamos el archivo index.html en local que, como se observa en la imagen, puede contener código PHP que no se recibe así en el navegador.
7. Si no tenemos mapeado podemos ver el archivo (index) donde el anterior código PHP se mostrará como el resultado de su acción. En ese ejemplo inyecta un comentario <!--[if lt IE 9]... y estilo CSS dentro del elemento <style id="css-before">. Con el mapeado este código recibido del servidor no lo podremos ver en la pestaña Sources...
8. ... aunque si estará disponible en la pestaña Elements,...
9. ... y en la pestaña Resources. En definitiva, por ahora y mientras voy conociendo más esta herramienta prefiero no mapear la URL para tener disponible el código fuente local index.html y también el de Internet (index) ambos en la pestaña Sources.