Más allá de lo que ves

domingo, 26 de marzo de 2017

Debug Angular 2 Visual Studio Code

Finalizado el Quickstart de Angular 2 utilizando Vistual Studio Code, lo siguiente que me he planteado es ¿como puedo hacer debug de la aplicación que he "creado"?

En la propia página de Visual Studio Code se puede encontrar información detallada de como configurar/ejecutar este debug Debugging Visual Studio Code. Para ello es necesario instalar la extensión Debugger for Chrome de Visual Studio Code.

Una vez tengas instalada la extensión y hayas reiniciado el editor, siguiendo los pasos que se indican en la página de la extensión verás como añadir al fichero launch.json la configuración necesaria.

Puedes definir dos formas de ejecutar tu Debug en Chrome: launch y attach, la primera te lanzará una nueva instancia de Chrome y la segunda correrá sobre la que puedas tener abierta. Por simplicidad he optado por la primera.

Breakpoint ignored because generated code not found (source map problem?)


Si ya funciona tu debug en Chrome pero los puntos de interrupción no se alcanzan en la ejecución y cuando pones un punto de interrupción en tu código Typescript te aparece un mensaje del tipo: Breakpoint ignored because generated code not found (source map problem?)  tan solo debes tener en cuenta que debes configurar correctamente el launch del Debugger en Chrome.

En mi caso tan solo ha sido necesario configurar correctamente el atributo webRoot haciendo que apunte al root de los ficheros de la aplicación. webRoot apunta a la carpeta raíz del proyecto y mis ficheros están en la carpeta src/app así pues tan solo he tenido que configurar este atributo correctamente y el debug ha funcionado sin problemas como podéis ver en la captura:

"webRoot": "${workspaceRoot}/src/app"


Ejemplo del código de mi fichero launch.json:

    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Debug en Chrome",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceRoot}/src/app"
        }
    ]

domingo, 5 de marzo de 2017

QuickStar de Angular 2 con Visual Studio Code

Ya acostumbrado al uso de Sublime Text e intentando aprender Angular 2 me he topado con Visual Studio Code un editor de Microsoft que es open source y multiplataforma. Sí, has leído bien, de Microsoft, open source y multiplataforma.

Lo he utilizado para seguir el QuickStart de Angular 2 y la impresión que me ha causado el editor es buenísima!!!! (la impresión que me ha causado angular es objeto de otra entrada, Maravilloso!!!!) Visual Studio Code es rápido, flexible con extensiones, intellisense, debug, git integrado, consola... Todo el fuente que he ido generando lo puedes consultar en Github

He realizado la instalación sobre elementary OS, sistema operativo basado en linux, pero lo puedes descargar también para Mac y como no para Windows. Desde consola lo puedes lanzar con: $ code fichero.txt

Puedes descargarlo en este enlace; Descargar Visual Studio Code

En este enlace puedes consultar la multitud de extensiones disponibles para personalizarlo, Extensiones Visual Studio Code.



viernes, 3 de marzo de 2017

Plunker - Crea, comparte y colabora tus ideas para desarrollos web

Cuanto tiempo sin escribir en el blog, voy a poner una entrada corta sobre una plataforma que me ha parecido simplemente mágica.

Tienes un ejemplo de código que quieres compartir en tu blog y te gustaría poder mostrar en la propia entrada todo el código en acción, para que tus lectores puedan tanto leer y modificar el código como ver el resultado ejecutado? Plunker te ofrece una forma sencilla de realizar esto de forma que utilizando la opción embebida de el plunker concreto que hayas creado podrás incluirlo en tu blog utilizando un simple iframe.

En esta entrada he incluido un sencillo ejemplo para que podéis comprobar lo que os comento. En este caso he utilizado una plantilla ya existente en Plunker para probar su uso.

Ejemplo en accción:
 

viernes, 16 de octubre de 2015

Thunderbird - Emojis en tus correos

¿Quieres añadir a tus correos en Thunderbird Emojis (emoticons de WhatsApp por ejemplo)? Con el plugin Emoji Menu de Thunderbird podrás hacerlo de forma muy sencilla.

Añade el plugin a tu Thunderbird y podrás incluir emojis en tus correos como se muestra en la siguiente imagen. Sencillo ¿no?


jueves, 15 de octubre de 2015

NTFS en OS X - Como escribir en tu disco usb externo NTFS de forma libre

Si conectas tu disco USB en formato NTFS a tu Mac y puedes acceder a la información pero no modificarla o crear nuevos ficheros o carpetas existen soluciones de pago para realizar esta tarea pero también lo puedes hacer mediante terminal (consola) con una sencilla instrucción:

Conecta tu disco USB y anota el nombre con el cual se monta en mi caso: Iomega_HDD

Una vez hecho esto abres una ventana de terminal y escribes:
$ sudo nano /etc/fstab


Esto creará el fichero fstab en etc

Una vez en la ventana de edición del fichero añades el siguiente texto:
LABEL=hdd-nombre none ntfs rw,auto,nobrowse


Deberás modificar hdd-nombre con el nombre que se montó tu disco, en mi caso Iomega_HDD, así pues mi fichero fstab tiene el siguiente contenido:
LABEL=Iomega_HDD none ntfs rw,auto,nobrowse

Para guardar el fichero utiliza:

Ctrl + O // Para salvar
Ctrl + X // Para salir

Desconecta ahora tu disco y vuélvelo a conectar. Ahora no verás en Finder el disco montado sin embargo si utilizas la opción de menú Ir / Ir a la carpeta y escribes /volumes

Tachan !!!! ya tienes acceso a tu disco con posibilidad para copiar, borrar, modificar....

Sencillo no!