Depuración de código de TypeScript con Visual Studio

Question

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

De las especificaciones del lenguaje Letra de imprenta:

mecanografiado ofrece opcionalmente mapas fuente, lo que permite la depuración a nivel de fuente.

Estaba esperando poder colocar puntos de interrupción en el código de 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? Tal vez la palabra "opcionalmente" insinúe que necesito hacer algo para que funcione ... ¿Alguna sugerencia?

Answer 1

datos a fecha de VS 2017:

VS2017 ahora trabaja para depurar mecanografiado directamente en Visual Studio, al igual que si la depuración de C#. Ver mi respuesta a continuación.

respuesta original para las versiones anteriores de VS:

Usted puede no ser capaz de depurar en VS, pero puede en algunos navegadores. Aaron Powell ha blogueado acerca de conseguir puntos de interrupción trabajando en Chrome Canary hoy: http://www.aaron-powell.com/web/typescript-source-maps.

Para resumir (muy brevemente) lo que dice Aaron, utiliza el -sourcemap en el compilador para generar un archivo *.js.map en el mismo directorio que su fuente. En los navegadores que admiten source maps (Chrome Canary, y probablemente compilaciones recientes de Firefox, ya que son una idea de Mozilla), puede depurar su fuente .ts tal como lo haría con los archivos normales .js.

El blog termina con "Esperemos que el equipo de Visual Studio o IE (o ambos) también elijan los mapas de origen y les agreguen soporte también". lo que sugiere que aún no ha sucedido

Actualización:

Con el lanzamiento de mecanografiado 0.8.1, Fuente Mapa depuración ahora también está disponible en Visual Studio:

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

Desde el anuncio:

Depuración TypeScript ahora es compatible con la depuración de nivel de fuente! El formato de mapa fuente ha ido ganando popularidad como una forma de depuración de idiomas que traducen a JavaScript y es compatible con una variedad de navegadores y herramientas . Con la versión 0.8.1, el compilador de TypeScript oficialmente admite mapas fuente. 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 del indicador --sourcemap, que genera un archivo de mapa fuente correspondiente a la salida de JavaScript. Este archivo permitirá depurar directamente el origen de 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 proyecto de TypeScript.

actualización:

WebStorm también ha añadido 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-and-much-more/

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

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

Answer 2

Con la aplicación VS1913 de tipografía, 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.

Answer 3

La depuración de TypeScript no funcionó para mí 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 ruptura están siendo golpeados en VS!

Answer 4

La depuración de mecanografía con Visual Studio funciona con la configuración correcta. (En las versiones anteriores de VS me enfrento a problemas a veces, a continuación es la forma en que funciona bien con VS 2015 CTP 6)

1. Primero asegurarse de que se crea mapas fuente al compilar mecanografiado a javascript. Por lo tanto, debe tener un archivo xxx.js.map cerca de cada xxx.js.

   Obtención de mapas fuente ejecutando el compilador mecanografiado fuera de Visual Studio no causa ninguna dificultad, en la línea de comandos TSC añaden

   --sourcemap %1.ts 
   

   su script trago por lo general crear sourcemaps por defecto.

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

   Establecer Internet Explorer como el navegador de inicio. Lo tengo trabajando 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: Deshabilite todos los depuradores! Esto es contra intutitivo y es posible que vea este mensaje de error:

   Ha intentado iniciar el depurador, pero según la configuración de depuración actual en la página de propiedades web, no hay ningún proceso para depurar. Esto ocurre cuando se selecciona la opción "No abrir una página. Espere una solicitud desde otro proceso" y la depuración de ASP.NET está deshabilitada. Verifique su configuración en la página de propiedades web e intente de nuevo.

   Como dice el mensaje de error, la Acción de inicio en la parte superior de las propiedades de la tela debe ser otra opción, al igual que "Página actual".

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

   Hit F5

Aunque se puede usar el Editor de Visual Studio para depurar y editar ts archivos, "Editar y continuar" no va a funcionar, no existe actualmente ningún navegador que puede recargar js y JS archivos .map y continuar. (Corrígeme a cualquiera si me equivoco y estaré contento).

Answer 5

Esto está ahora reparado en VS 2017, por lo que puedes depurarlo directamente en Visual Studio y en mecanografiado.

Simplemente configure su punto de interrupción en su archivo * .ts, y se verá afectado.

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

Answer 6

respuesta corta: reinicie Visual Studio

fondo: tuve 2 de Visual Studio 2015 casos con dos proyectos diferentes con mecanografiado. La primera instancia iniciada no se depuró correctamente, la segunda sí. Todos los ajustes del proyecto fueron los mismos. Finalmente reinicié la primera instancia y luego depilé TypeScript (finalmente).