Saltar al contenido

Depuración de código TypeScript con Visual Studio

Si encuentras algún error en tu código o proyecto, recuerda probar siempre en un entorno de testing antes subir el código al trabajo final.

Solución:

Respuesta actual para VS2017 y posteriores

La depuración de TypeScript directamente en Visual Studio ha sido posible desde VS2017. De la documentación:

Puede depurar código JavaScript y TypeScript con Visual Studio. Puede establecer y alcanzar puntos de interrupción, adjuntar el depurador, inspeccionar variables, ver la pila de llamadas y usar otras funciones de depuración.

También hay recursos adicionales sobre la depuración de TypeScript/Asp.NET Core en Visual Studio.

También es posible depurar texto mecanografiado en Visual Studio Code:

Visual Studio Code admite la depuración de TypeScript a través de su depurador Node.js integrado y también a través de extensiones como Debugger for Chrome para admitir la depuración de TypeScript del lado del cliente.

Respuesta original para versiones anteriores de VS:

Es posible que no pueda depurar en VS, pero puede hacerlo en algunos navegadores. Aaron Powell ha escrito hoy en su blog sobre cómo hacer que los puntos de interrupción funcionen en Chrome Canary: https://www.aaron-powell.com/posts/2012-10-03-typescript-source-maps/.

Para resumir (muy brevemente) lo que dice Aaron, usas el -sourcemap encienda el compilador para generar un *.js.map archivo en el mismo directorio que su fuente. En los navegadores que admiten mapas de origen (Chrome Canary y presumiblemente versiones recientes de Firefox, ya que son una idea de Mozilla), puede depurar su .ts fuente tal como lo harías normalmente .js archivos

El blog termina con “Esperemos que el equipo de Visual Studio o IE (o ambos) también tome Source Maps y agregue soporte para ellos también”. – lo que sugiere que aún no ha sucedido.

Actualizar:

Con el lanzamiento de TypeScript 0.8.1, la depuración de Source Map ahora también está disponible en Visual Studio:

https://blogs.msdn.com/b/typescript/archive/2012/11/15/anunciando-typescript-0-8-1.aspx

Del anuncio:

depuración
¡TypeScript ahora admite la depuración a nivel de fuente! El formato del mapa de origen ha ido ganando popularidad como una forma de depurar lenguajes que se traducen a JavaScript y es compatible con una variedad de navegadores y herramientas. Con la versión 0.8.1, el compilador de TypeScript es oficialmente compatible con los mapas de origen. Además, la nueva versión de TypeScript para Visual Studio 2012 admite la depuración mediante el formato de mapa de origen. Desde la línea de comandos, ahora admitimos completamente el uso de la marca –sourcemap, que genera un archivo de mapa de origen correspondiente a la salida de JavaScript. Este archivo permitirá depurar directamente la fuente de TypeScript original en navegadores habilitados para mapas de fuente y Visual Studio. Para habilitar la depuración en Visual Studio, seleccione ‘Depurar’ en el menú desplegable después de crear una aplicación HTML con un proyecto de TypeScript.

Actualizar:

WebStorm también ha agregado soporte para la depuración a través de SourceMaps: http://blog.jetbrains.com/webide/2013/03/webstorm-6-0-released-adds-typescript-debugging-with-source-maps-fresh-ui- y mucho más/

En primer lugar, WebStorm permite un desarrollo web más inteligente y optimizado con lenguajes modernos como TypeScript, CoffeeScript y Dart. Además de proporcionar un editor de código de primera clase para estos lenguajes, WebStorm 6 ofrece:

Compilación/transpilación automática de estos idiomas de nivel superior a los reconocidos por los navegadores en todas las plataformas compatibles. Depuración completa de TypeScript, Dart o CoffeeScript con mapas de origen.

Con la aplicación VS2013 Typescript, no tuve que cambiar nada en web.config. Puse un punto de interrupción en el archivo ts y lo depuré en IE, y listo, el punto de interrupción se detuvo dentro de TypeScript.

Esto ahora está solucionado en VS 2017 para que pueda depurar directamente en Visual Studio y mecanografiar.

Simplemente establezca su punto de interrupción en su archivo *.ts, y será alcanzado.

Y se depurará en VS, no en IE, como si estuviera depurando C#.

Valoraciones y comentarios

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *