譯文，原文地址 https://www.jetbrains.com/help/webstorm/debugging-typescript.html
調(diào)試TypeScript
說明
在調(diào)試之前，您需要將代碼編譯為JavaScript。
WebStorm需要映射源代碼來識(shí)別您在TypeScript代碼中設(shè)置的斷點(diǎn)。要在編譯期間生成映射，請(qǐng)打開tsconfig.json文件并確保sourceMap屬性設(shè)置為true。
在開始之前，按照配置JavaScript調(diào)試器中的描述配置內(nèi)置調(diào)試器。要使用Live Edit功能在瀏覽器中實(shí)時(shí)顯示HTML和CSS中的更改，請(qǐng)安裝JetBrains IDE支持Chrome擴(kuò)展。在HTML，CSS和JavaScript中的Live Edit中查找更多信息。（注：配置方法及安裝插件http://blog.csdn.net/sujun10/article/details/54139560）
在客戶端調(diào)試TypeScript
大多數(shù)情況下，您可能需要調(diào)試運(yùn)行在外部開發(fā)Web服務(wù)器上的客戶端應(yīng)用程序，例如由Node.js提供支持。
1.在TypeScript代碼中配置和設(shè)置斷點(diǎn)。
2.將TypeScript代碼編譯為JavaScript。(注：運(yùn)行ng build,在根目錄下會(huì)生成一個(gè)dist文件夾，就是JavaScript)
3.在開發(fā)模式下運(yùn)行應(yīng)用程序。通常你需要運(yùn)行npm start。當(dāng)開發(fā)服務(wù)器準(zhǔn)備就緒時(shí)，復(fù)制在瀏覽器中運(yùn)行應(yīng)用程序的URL地址。(后面會(huì)用到)您需要在運(yùn)行/調(diào)試配置中指定此URL地址。
4.創(chuàng)建類型為JavaScript Debug的調(diào)試配置：
選擇運(yùn)行|在主菜單上單擊編輯配置，
5.在工具欄上單擊添加，然后從彈出列表中選擇JavaScript調(diào)試。
在打開的“運(yùn)行/調(diào)試配置：JavaScript調(diào)試”對(duì)話框中，指定應(yīng)用程序運(yùn)行的URL地址。
這里的URL地址是從第三步復(fù)制過來的，點(diǎn)擊OK，保存設(shè)置。
調(diào)試。這時(shí)會(huì)彈出一個(gè)新的瀏覽器窗口，運(yùn)行配置中指定的URL地址。并顯示調(diào)試工具窗口。（注：注意，第三步的時(shí)候運(yùn)行npm start 會(huì)刪掉編譯的JavaScript代碼，所以當(dāng)拿到URL的時(shí)候要停掉server，并且重新運(yùn)行ng build，獲取JavaScript代碼，否則斷點(diǎn)無法走到）
7.在調(diào)試工具窗口中，照常進(jìn)行：逐步執(zhí)行程序，停止并恢復(fù)程序執(zhí)行，在暫停時(shí)檢查它，查看實(shí)際的HTML DOM等。
（此時(shí)已經(jīng)大功告成啦）
如果您的TypeScript代碼在內(nèi)置的WebStorm服務(wù)器上運(yùn)行，您還可以像調(diào)試在內(nèi)置服務(wù)器上運(yùn)行的JavaScript一樣調(diào)試它。
