Más allá de lo que ves: 2017

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: