Visual Studio ile TypeScript kodunda hata ayıklama

Visual Studio'da TypeScript kaynağında hata ayıklamanın bir yolu var mı (oluşturulan javascript'te hata ayıklamak yerine)?

TypeScript dil spesifikasyonlarından:

TypeScript, isteğe bağlı olarak kaynak düzeyinde hata ayıklamayı etkinleştiren kaynak haritaları sağlar.

Bu nedenle ts koduna kesme noktaları yerleştirebilmeyi ve hata ayıklayabilmeyi bekliyordum, ancak işe yaramıyor. Spesifikasyonlarda başka hata ayıklama belirtisi bulamadım. Bunun işe yaraması için yapmam gereken bir şey var mı? Belki de "isteğe bağlı olarak" sözcüğü, çalışması için bir şeyler yapmam gerektiğini ima ediyor ... Herhangi bir öneriniz var mı?

VS2017 ve sonrası için Geçerli Cevap

Türleri doğrudan Visual Studio'da hata ayıklama VS2017'den beri mümkün olmuştur. Gönderen belgeler :

Visual Studio kullanarak JavaScript ve TypeScript kodlarında hata ayıklayabilirsiniz. Kesme noktalarını ayarlayabilir ve bunlara basabilir, hata ayıklayıcıyı ekleyebilir, değişkenleri inceleyebilir, çağrı yığınını görüntüleyebilir ve diğer hata ayıklama özelliklerini kullanabilirsiniz.

Visual Studio'da Debugging Typescript / Asp.NET Core hakkında ek kaynaklar da vardır .

Ayrıca, Visual Studio Code'da typescript hatalarını ayıklamak da mümkündür :

Visual Studio Code, yerleşik Node.js hata ayıklayıcısı aracılığıyla ve ayrıca istemci tarafında TypeScript hata ayıklamasını desteklemek için Hata Ayıklayıcı gibi Chrome uzantıları aracılığıyla TypeScript hata ayıklamayı destekler.

VS'nin önceki sürümleri için Orijinal Cevap:

VS'de hata ayıklayamayabilirsiniz, ancak bazı tarayıcılarda yapabilirsiniz. Aaron Powell, Chrome Canary'de çalışan kesme noktaları hakkında bugün blog yazdı: https://www.aaron-powell.com/posts/2012-10-03-typescript-source-maps/ .

Aaron'un söylediklerini (çok kısaca) özetlemek gerekirse , kaynağınızla aynı dizinde -sourcemapbir *.js.mapdosya oluşturmak için derleyicideki anahtarı kullanın . Kaynak haritalarını destekleyen tarayıcılarda (Chrome Canary ve muhtemelen bir Mozilla fikri oldukları için en son Firefox sürümleri), .tsnormal .jsdosyalar gibi kaynağınızda hata ayıklayabilirsiniz .

Blog, "Umarım ya Visual Studio ya da IE (ya da her ikisi) ekibi de Kaynak Haritaları alır ve onlar için destek ekler." - ki bu henüz gerçekleşmediğini gösteriyor.

Güncelleme:

TypeScript 0.8.1 sürümüyle birlikte, Kaynak Haritası hata ayıklama artık Visual Studio'da da kullanılabilir:

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

Duyurudan:

Hata ayıklama TypeScript artık kaynak düzeyinde hata ayıklamayı destekliyor! Kaynak eşleme biçimi, JavaScript'e çevrilen ve çeşitli tarayıcılar ve araçlar tarafından desteklenen dillerde hata ayıklama yöntemi olarak popülerlik kazanmaktadır. 0.8.1 sürümüyle, TypeScript derleyici resmi olarak kaynak haritalarını destekler. Ayrıca, Visual Studio 2012 için TypeScript'in yeni sürümü, kaynak eşleme biçimini kullanarak hata ayıklamayı destekler. Komut satırından, artık JavaScript çıktısına karşılık gelen bir kaynak eşleme dosyası çıkaran --sourcemap bayrağının kullanımını tam olarak destekliyoruz. Bu dosya, kaynak eşlemenin etkin olduğu tarayıcılarda ve Visual Studio'da orijinal TypeScript kaynağında doğrudan hata ayıklamaya izin verir. Visual Studio'da hata ayıklamayı etkinleştirmek için TypeScript projesi ile bir HTML Uygulaması oluşturduktan sonra açılır menüden 'Hata Ayıkla' seçeneğini seçin.

Güncelleme :

WebStorm, SourceMaps aracılığıyla hata ayıklama desteği de ekledi: http://blog.jetbrains.com/webide/2013/03/webstorm-6-0-released-adds-typescript-debugging-with-source-maps-fresh-ui- ve daha fazlası/

İlk olarak, WebStorm, TypeScript, CoffeeScript ve Dart gibi modern dillerle daha akıllı ve daha akıcı web geliştirmeye izin verir. Bu diller için birinci sınıf bir kod düzenleyici sağlamanın yanı sıra, WebStorm 6 şunları sunar:

Bu üst düzey dillerin, desteklenen tüm platformlarda tarayıcılar tarafından tanınan dillere otomatik olarak derlenmesi / aktarılması. TypeScript, Dart veya CoffeeScript'in kaynak haritaları ile tam özellikli hata ayıklaması.

VS2013 Typescript uygulamasıyla web.config dosyasında herhangi bir değişiklik yapmam gerekmedi. Ts dosyasına bir kesme noktası koydum ve IE'de hata ayıkladım ve presto, kesme noktası TypeScript içinde durdu.

Bu, artık VS 2017'de düzeltilmiştir, böylece doğrudan Visual Studio ve typecript'te hata ayıklayabilirsiniz.

Kesme noktanızı * .ts dosyanızda ayarlayın ve vurulacaktır.

Ve sanki c # hata ayıklaması yapıyormuşsunuz gibi IE'de değil VS'de hata ayıklayacaktır.

Visual Studio ile typcript hata ayıklama doğru ayarlarla çalışır. (VS I'in önceki sürümlerinde bazen sorunlarla karşılaşılır, aşağıda VS 2015 CTP 6 ile nasıl iyi çalıştığı anlatılmaktadır)

1. Öncelikle , typcript'i javascript'e derlerken kaynak haritaları oluşturduğunuzdan emin olun . Bu nedenle, her xxx.js yakınında bir xxx.js.map dosyanız olmalıdır.

   TypeScript derleyicisini Visual Studio dışında çalıştırarak kaynak haritalarını elde etmek tsc komut satırında ekleme herhangi bir zorluğa neden olmaz

   --sourcemap %1.ts
   

   gulp betiğiniz genellikle varsayılan olarak kaynak haritalar oluşturur.

2. Web uygulamanızı Visual Studio'da yapılandırın .

   Internet Explorer'ı başlangıç ​​tarayıcısı olarak ayarlayın . Sadece IE ile çalıştırdım ve başka bir tarayıcının çalışacağını düşünmüyorum.

   Proje özelliklerinde "Web" sekmesine gidin ve alttaki "Hata Ayıklayıcılar" bölümünü yapılandırın: Tüm hata ayıklayıcıları devre dışı bırakın ! Bu, sezgisel değildir ve şu hata mesajını görebilirsiniz:

   Hata ayıklayıcıyı başlatmayı denediniz, ancak Web özellikleri sayfasındaki geçerli hata ayıklama ayarlarınıza göre hata ayıklama işlemi yok. Bu, "Bir sayfayı açma. Başka bir işlemden bir istek bekle" seçeneği seçildiğinde ve ASP.NET hata ayıklama devre dışı bırakıldığında oluşur. Lütfen Web özellikleri sayfasındaki ayarlarınızı kontrol edin ve tekrar deneyin.

   Hata mesajında ​​da belirtildiği gibi, Web özelliklerinin üst kısmındaki İşlemi Başlat, " Geçerli sayfa " gibi başka bir seçenek olmalıdır .

   Şimdi veya daha sonra Visual Studio içindeki ts kodunuzda kesme noktaları ayarlayın .

   hit F5

Ts dosyalarında hata ayıklamak ve düzenlemek için Visual Studio Düzenleyicisi'ni kullanabilirsiniz, ancak "Düzenle ve Devam Et" çalışmaz, şu anda js ve js.map dosyalarını yeniden yükleyip devam edebilecek bir tarayıcı yoktur. (Yanlışsam beni düzeltin, mutlu olurum.)

TypeScript hata ayıklama, makinelerimden herhangi birinde VS2013 Güncelleme 3 ile benim için hiç işe yaramadı. Çok fazla hayal kırıklığından sonra, VS2013 Update 4 CTP'ye güncellemeyi denemeye karar verdim. Sonunda VS'de kesme noktaları vuruluyor!

kısa yanıt: Visual Studio'yu yeniden başlatın

arka plan: TypeScript ile iki farklı projeye sahip 2 visual studio 2015 örneğim vardı. İlk başlatılan örnek doğru şekilde hata ayıklamadı, ikincisi yaptı. Tüm proje ayarları aynıydı. Sonunda ilk örneği yeniden başlattım ve ardından TypeScript'in hatalarını ayıkladım (sonunda).