2012-10-03 181 views
65

是否有方法在Visual Studio中調試TypeScript源代碼(而不是調試生成的javascript)?使用Visual Studio調試TypeScript代碼

從打字稿語言規範:

打字稿可選地提供源映射,使源級的調試。

因此,我期待能夠在ts代碼中放置斷點,並且能夠調試它,但它不起作用。在規格中我沒有發現任何其他的調試內容。我應該做些什麼來完成這項工作?也許「可選」這個詞暗示我需要爲它做些事情......任何建議?

+0

您還可以檢查出[文件](http://stackoverflow.com/documentation/typescript/9131/) – Peopleware

回答

61

更新爲2017年VS的:

VS2017現在可以直接在Visual Studio調試打字稿,就像如果你調試C#。請參閱下面的答案。

爲VS的早期版本原來的答案:

您可能無法在VS調試,但你可以在某些瀏覽器。 Aaron Powell已經在博客上寫道,今天在Chrome Canary上工作的斷點:http://www.aaron-powell.com/web/typescript-source-maps

總結(很簡單),亞倫說什麼,你使用-sourcemap交換機上的編譯器生成一個*.js.map文件在同一目錄作爲源。在支持source maps(Chrome Canary,可能是最近的Firefox版本,因爲它們是Mozilla的想法)的瀏覽器中,您可以調試.ts源文件,就像正常的.js文件一樣。

博客完成「希望Visual Studio或IE(或兩者)團隊也拿起源地圖併爲它們添加支持。」 - 這表明它還沒有發生。

更新:

隨着打字稿0.8.1的發佈,源地圖調試,現在在Visual Studio還提供:

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

從公告:

調試 TypeScript現在支持源代碼級調試!源地圖格式 作爲一種調試語言的方式已經越來越流行,其中 轉換爲JavaScript並且被各種瀏覽器和 工具支持。在0.8.1版本中,TypeScript編譯器正式支持源映射 。此外,用於 的VisualScript 2012新版本的TypeScript支持使用源映射格式進行調試。 在命令行中,我們現在完全支持使用--sourcemap標誌,該標誌輸出對應於JavaScript輸出的源映射文件。該文件將允許在支持源圖的瀏覽器和Visual Studio中直接調試 原始TypeScript源代碼。 要在Visual Studio中啓用調試,請在使用TypeScript項目創建HTML應用程序後,從下拉列表中選擇「調試」。

更新

WebStorm還通過SourceMaps增加了對調試:http://blog.jetbrains.com/webide/2013/03/webstorm-6-0-released-adds-typescript-debugging-with-source-maps-fresh-ui-and-much-more/

首先,WebStorm允許更智能,更高效的網絡 發展與現代語言,如打字稿, CoffeeScript和 Dart。除了提供這些 語言,WebStorm 6提供了一流的代碼編輯器:這些高級語言 到那些所有支持的平臺上瀏覽器所識別的

自動編譯/ transpilation。 使用 源地圖進行TypeScript,Dart或CoffeeScript的全功能調試。

+3

是Chrome Canary版真正需要的?我使用Chrome穩定版,並且我看到「啓用源地圖」是開發者工具設置窗口中的一個選項。 –

+1

我認爲當亞倫寫博客時(當我發佈這個答案時),加納利是必要的。到目前爲止,該功能必須經過滲透才能釋放。 – JcFx

+4

現在,使用Internet Explorer時,似乎可以直接在Visual Studio GUI中調試TypeScript。我想知道這是否也可以通過其他瀏覽器來實現。 – kossmoboleat

14

使用VS2013 Typescript應用程序,我不必在web.config中更改任何內容。我在ts文件中放置了一個斷點並在IE中進行了調試,並且presto在TypeScript中停止了斷點。

+0

我同意。我使用VS 2013更新2 – Nash

+1

我默認 – Marko

+2

不起作用謝謝你指着IE。不幸的是,調試在Chrome中不起作用。 –

2

在我的任何一臺機器上,使用VS2013 Update 3時,TypeScript調試根本不適用於我。經過很多挫折之後,我決定嘗試升級到VS2013 Update 4 CTP。終於在VS中擊中了斷點!

+0

thx爲更新4 ctp擡頭,安裝。我的機器有更新3和打字稿調試工作。然而,開始ie需要很長時間,特別是每次編譯web應用程序時(雖然我只更改了ts代碼) – citykid

3

使用Visual Studio調試打印稿使用正確的設置。 (在VS的早期版本中我有時面對的問題,下面是它的工作原理罰款與VS 2015年CTP 6)

  1. 首先你確保您創建源代碼編譯打字稿的JavaScript時映射。所以你應該在每個xxx.js附近有一個xxx.js.map文件。通過運行打字稿編譯器的Visual Studio之外不會造成任何困難,在TSC命令行

    獲取源地圖添加

    --sourcemap %1.ts 
    

    你一飲而盡腳本通常會默認創建sourcemaps。

  2. 在Visual Studio中配置您的Web應用程序

    設置Internet Explorer作爲啓動瀏覽器。我只能用IE瀏覽器工作,不認爲任何其他瀏覽器都能正常工作。

    在項目屬性轉至「網絡」選項卡,在「調試」部分在底部配置:禁用所有調試!這是反直觀的,您可能會看到以下錯誤消息:

    您試圖啓動調試器,但根據Web屬性頁上的當前調試設置,沒有調試過程。當「不打開頁面,等待來自另一個進程的請求」選項被選中時,會發生這種情況,並且禁用ASP.NET調試。請在網絡媒體資源頁面上檢查您的設置,然後重試。

    隨着錯誤消息指出,在Web性能的頂部開始行動應該是另一種選擇,像「當前頁」。

    在現在或以後在Visual Studio中的TS碼

    設置斷點

    命中F5

雖然你可以使用Visual Studio編輯器來調試和編輯TS文件,「編輯並繼續」將無法正常工作,目前還沒有瀏覽器,可以重新加載JS和JS .map文件並繼續。 (糾正我的人,如果我錯了,我會很高興。)

+0

自4月份以來對您的設置所做的任何更改? – jth41

+0

你發現寫作有用嗎? – citykid

3

這是現在固定在2017年VS,所以你可以在Visual Studio和打字稿直接調試。

只需設置在你*的.ts文件斷點,它會被擊中。

它將在VS,而不是IE瀏覽器調試,因爲如果你是調試C#。

0

簡短的回答:重新啓動Visual Studio

背景: 我有2種的Visual Studio 2015年情況與打字稿兩個不同的項目。第一個啓動的實例沒有正確調試,第二個沒有。 所有的項目設置都是一樣的。 我終於重新啓動了第一個實例,然後調試了TypeScript(最後)。

相關問題