WebStorm：調試打字稿

Question

問題已更新。 請檢查修改

我想使用Webstorm中包含的調試器來運行我的項目。 我正在使用Angular2和TypeScript。 我需要在我的打字稿文件中放置斷點。

基本上，我的index.html只是導入一些.js文件，然后通過調用在另一個.js文件（ 從.ts文件中編譯！ ）中定義的名為bootstrap的函數來啟動我的應用程序。

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="/">
    <meta charset="UTF-8">
    <title></title>

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="../node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="../node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="../node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

    <script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="../node_modules/systemjs/dist/system.src.js"></script>
    <script src="../node_modules/rxjs/bundles/Rx.js"></script>
    <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>

    <script src="build/core/system.config.js"></script>
    <script src="build/core/moduleLoader.js"></script>
    <script src="build/core/bootstrap.js"></script>
    <script src="../node_modules/angular2/bundles/router.dev.js"></script>

    <script>
        bootstrap();
    </script>
</head>
<body>

    <app-view>Loading...</app-view>

</body>
</html>

bootstrap定義如下：

const bootstrap:()=>Promise<void>= async function() {
    await ModuleLoader.loadAll();
    System.import('core/app').then(null, console.error.bind(console));
};

window.bootstrap = bootstrap;

當我在調試模式下運行index.html時，將引發錯誤，未定義bootstrap（）。

當我在瀏覽器中運行該應用程序時，它運行良好。 我錯過了一些配置嗎？

我已經安裝了jetbrains插件（我正在使用chrome）並配置了端口。 我可以在瀏覽器中看到“正在加載...”。

編輯

也許有用的信息：

我正在使用node 。 在主服務器端腳本中，我設置了express並進行了一些配置。 當我嘗試調試時，我的服務器正在偵聽，但在另一個端口（8080）上。 調試器使用端口63343。

Answer 1

您可以為任何URL啟動JavaScript調試會話-只需在JavaScript運行配置中指定它即可。 如果您的應用程序在localhost:8080上運行，則在JavaScript調試配置中使用該URL。

另一個要點：確保在編譯TypeScript代碼時生成源映射。

WebStorm：調試打字稿

問題描述

1 個解決方案

解決方案1
3 已采納 2016-04-01 15:00:31

WebStorm：調試打字稿

問題描述

1 個解決方案

解決方案1 3 已采納 2016-04-01 15:00:31

解決方案1
3 已采納 2016-04-01 15:00:31