Depurar código TypeScript con Visual Studio

¿Hay alguna manera de depurar la fuente de TypeScript en Visual Studio (en lugar de depurar el javascript generado)?

De las especificaciones del lenguaje TypeScript:

TypeScript opcionalmente proporciona mapas de origen, lo que permite la depuración a nivel de origen.

Por lo tanto, esperaba poder colocar puntos de interrupción en el código ts y poder depurarlo, pero no funciona. No encontré ninguna otra mención de depuración en las especificaciones. ¿Hay algo que deba hacer para que esto funcione? Quizás la palabra "opcionalmente" insinúe que debo hacer algo para que funcione ... ¿Alguna sugerencia?

Respuesta actual para VS2017 y posterior

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 utilizar otras funciones de depuración.

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

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

Visual Studio Code admite la depuración de TypeScript a través de su depurador Node.js incorporado y también a través de extensiones como Debugger para 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 en su blog sobre cómo hacer que los puntos de interrupción funcionen en Chrome Canary hoy mismo: https://www.aaron-powell.com/posts/2012-10-03-typescript-source-maps/ .

Para resumir (muy brevemente) lo que dice Aaron, use el -sourcemapconmutador del compilador para generar un *.js.maparchivo 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 el .tscódigo fuente como lo haría normalmente..js archivos .

El blog termina con "Con suerte, el equipo de Visual Studio o IE (o ambos) también eligen Mapas de origen y les agregan soporte". - lo que sugiere que aún no ha sucedido.

Actualizar:

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

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

Del anuncio:

Depuración ¡TypeScript ahora admite la depuración de 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 admite oficialmente mapas de origen. Además, la nueva versión de TypeScript para Visual Studio 2012 admite la depuración utilizando 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 TypeScript original en navegadores habilitados para mapas de origen 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.

Actualización :

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/

Primero, 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 lenguajes de nivel superior a los reconocidos por los navegadores en todas las plataformas compatibles. Depuración con todas las funciones 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 depuré en IE, y listo, el punto de interrupción se detuvo dentro de TypeScript.

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

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

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

La depuración de mecanografiado con Visual Studio funciona con la configuración correcta. (En versiones anteriores de VS, a veces tengo problemas, a continuación se muestra cómo funciona bien con VS 2015 CTP 6)

1. Primero, asegúrese de crear mapas de origen al compilar mecanografiado en javascript. Por lo tanto, debería tener un archivo xxx.js.map cerca de cada xxx.js.

   Obtener mapas de origen ejecutando el compilador mecanografiado fuera de Visual Studio no causa ninguna dificultad, en la línea de comando tsc agregar

   --sourcemap %1.ts
   

   su script gulp generalmente creará mapas de origen por defecto.

2. Configure su aplicación web en Visual Studio .

   Configurar Internet Explorer como el navegador de inicio. Lo tengo funcionando solo con IE y no creo que ningún otro navegador funcione.

   En las propiedades del proyecto, vaya a la pestaña "Web" y configure la sección "Depuradores" en la parte inferior: Deshabilitar todos los depuradores ! Esto es contrario a la intuición y es posible que vea este mensaje de error:

   Ha intentado iniciar el depurador, pero según su configuración de depuración actual en la página de propiedades web, no hay ningún proceso para depurar. Esto ocurre cuando la opción "No abrir una página. Esperar una solicitud de otro proceso" está seleccionada y la depuración de ASP.NET está deshabilitada. Verifique su configuración en la página de propiedades web y vuelva a intentarlo.

   Como dice el mensaje de error, la Acción de inicio en la parte superior de las propiedades web debería ser otra opción, como " Página actual ".

   Establezca puntos de interrupción en su código ts dentro de Visual Studio ahora o más tarde.

   Presiona F5

Si bien puede usar Visual Studio Editor para depurar y editar archivos ts, "Editar y continuar" no funcionará, actualmente no hay ningún navegador que pueda recargar archivos js y js.map y continuar. (Corríjame cualquiera si me equivoco y seré feliz).

La depuración de TypeScript no me funcionó en absoluto con VS2013 Update 3 en ninguna de mis máquinas. Después de mucha frustración, decidí intentar actualizar a VS2013 Update 4 CTP. ¡Finalmente los puntos de interrupción están siendo alcanzados en VS!

respuesta corta: reinicie Visual Studio

antecedentes: tenía 2 instancias de Visual Studio 2015 con dos proyectos diferentes con TypeScript. La primera instancia iniciada no se depuró correctamente, la segunda sí. Todas las configuraciones del proyecto eran iguales. Finalmente reinicié la primera instancia y luego depuré TypeScript (finalmente).