如何在PhpStorm / WebStorm中調試angular2種子項目？

Question

Angular2是用TypeScript編寫的。

我正在使用Angular2種子項目 ，我無法讓PhpStorm（WebStorm）調試它 - 它不會停止在.ts文件中的斷點。

何去做？

現在我使用JavaScript Debug和http://localhost:8080作為URL - 沒有斷點：/

Answer 1

要在WebStorm中進行調試，您需要確保生成源圖。 為此，打開angular2-seed\\webpack.config.js並添加

devtool: 'source-map',

到webpack配置; 然后使用http://localhost:8080/ URL創建javaScript調試運行配置，並為項目根目錄添加以下Remote URL映射

webpack:///.

現在，用npm start啟動你的服務器; 啟動服務器后，按Debug鍵在調試器中運行上述配置

Answer 2

如果您使用的是Chrome，請寫下您的代碼（您想要破解的地方）：

debugger;

打開瀏覽器，點擊F12（開發者控制台），然后刷新頁面。 應用程序的執行應該停止在該命令上。

注意，你的tslint（如果你使用它）可能會抱怨使用調試器命令。 編輯tslint.json文件並將no-debugger設置為true

Answer 3

您可以使用“Angular batarang”工具進行調試

Answer 4

在Chrome開發工具中，可以將斷點放入TypeScript文件並在其中執行逐步處理。

你試過試試嗎？

希望它能幫到你。 蒂埃里