visual-studio - para - visual studio code javascript

Depuración de código de TypeScript con Visual Studio (6)

¿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 TypeScript:

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

Por lo tanto, esperaba 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?

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 está ahora resuelto en VS 2017, por lo que puede depurar directamente en Visual Studio y mecanografiado.

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

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

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!

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

Primero, asegúrese de crear mapas fuente al compilar mecanografiado para javascript. Por lo tanto, debe tener un archivo xxx.js.map cerca de cada xxx.js.
Obtener mapas fuente ejecutando el compilador de mecanografía fuera de Visual Studio no causa ninguna dificultad, en la línea de comando de tsc agregar
--sourcemap %1.ts
su secuencia de comandos gulp generalmente creará mapas de origen de forma predeterminada.
Configure su aplicación web en Visual Studio .
Establezca 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: ¡ desactive todos los depuradores ! Esto es contradictorio 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 web debe ser otra opción, como " Página actual ".
Establezca puntos de interrupción en su código de ts dentro de Visual Studio ahora o más tarde.
Hit F5

Si bien puede usar el Editor de Visual Studio para depurar y editar archivos ts, "Editar y Continuar" no funcionará, actualmente no hay un navegador que pueda volver a cargar los archivos js y js.map y continuar. (Corrígeme a alguien si estoy equivocado y seré feliz).

respuesta corta: reiniciar Visual Studio

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

Actualización a partir de VS 2017:

VS2017 ahora funciona para depurar mecanografiado directamente en Visual Studio, como si depurara c #. Ver mi respuesta a continuación.

Respuesta original para versiones anteriores de VS:

Es posible que no pueda depurar en VS, pero puede hacerlo en algunos navegadores. Aaron Powell ha blogueado acerca de conseguir puntos de interrupción trabajando 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, utiliza el -sourcemap en el compilador para generar un archivo *.js.map en el mismo directorio que su fuente. En los navegadores compatibles con los mapas fuente (Chrome Canary, y supuestamente las compilaciones recientes de Firefox, ya que son una idea de Mozilla), puede depurar su fuente .ts tal como lo haría con los archivos .js normales.

El blog termina con "Ojalá el equipo de Visual Studio o IE (o ambos) también recojan Source Maps y les agreguen soporte también". 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:

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

Del anuncio:

¡La depuración de TypeScript ahora es compatible con la depuración de nivel de fuente! El formato del mapa fuente ha ido ganando popularidad como una forma de depurar idiomas que se traduce 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 los 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 totalmente el uso del indicador --sourcemap, que genera un archivo de mapa fuente correspondiente a la salida de JavaScript. Este archivo permitirá depurar directamente la fuente original de TypeScript en buscadores 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 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-and-much-more/

En primer lugar, WebStorm permite un desarrollo web más inteligente y simplificado con lenguajes modernos como TypeScript, CoffeeScript y Dart. Además de proporcionar un editor de código de primera clase para estos idiomas, WebStorm 6 ofrece:
La compilación / transpilación automática de estos lenguajes de alto nivel en aquellos reconocidos por navegadores en todas las plataformas compatibles. Depuración completa de TypeScript, Dart o CoffeeScript con mapas de origen.