在WebStorm 11中使用TypeScript調試Ionic 2項目

我想使用WebStorm 11.0.3作爲IDE在OS X中使用TypeScript編寫Ionic 2應用程序。我發現的問題是我無法使用斷點調試TypeScript文件在WebStorm中。到目前爲止，我只能調試傳輸的JavaScript文件。在WebStorm 11中使用TypeScript調試Ionic 2項目

我會描述我做了什麼，最後我想要什麼。

我創建了一個新的離子2項目，打字稿打字：
```
$ ionic start demo sidemenu --v2 --ts 
```

我加入tsconfig.json文件中的兩個標誌："sourceMap": true和"removeComments": false，導致以下文件：

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false 
    }, 
    "filesGlob": [ 
    "**/*.ts", 
    "!node_modules/**/*" 
    ], 
    "exclude": [ 
    "node_modules", 
    "typings/main", 
    "typings/main.d.ts" 
    ], 
    "compileOnSave": false, 
    "atom": { 
    "rewriteTsconfig": false 
    } 
}

我修改了webpack.config.js文件，將devtool: 'source-map'添加到其模塊導出文件離子。最終的配置文件是（不重視註釋行）：

var path = require('path'); 


module.exports = { 
    devtool: 'source-map', 
    entry: [ 
    path.normalize('es6-shim/es6-shim.min'), 
    'reflect-metadata', 
    path.normalize('zone.js/dist/zone-microtask'), 
    path.resolve('app/app') 
    ], 
    output: { 
    path: path.resolve('www/build/js'), 
    filename: 'app.bundle.js', 
    pathinfo: false, // show module paths in the bundle, handy for debugging 
    //devtoolModuleFilenameTemplate  : '[absolute-resource-path]', 
    //devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.ts$/, 
     loader: 'awesome-typescript', 
     query: { 
      doTypeCheck: true, 
      resolveGlobs: false, 
      externals: ['typings/browser.d.ts'] 
     }, 
     include: path.resolve('app'), 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.js$/, 
     include: path.resolve('node_modules/angular2'), 
     loader: 'strip-sourcemap' 
     }, 
     //{ 
     // test: /\.js$/, 
     // loader: 'strip-sourcemap' 
     //} 
    ], 
    noParse: [ 
     /es6-shim/, 
     /reflect-metadata/, 
     /zone\.js(\/|\\)dist(\/|\\)zone-microtask/ 
    ] 
    }, 
    resolve: { 
    root: ['app'], 
    alias: { 
     'angular2': path.resolve('node_modules/angular2') 
    }, 
    extensions: ["", ".js", ".ts"] 
    } 
};

我在WebStorm 11打開的項目，創造了新的JavaScript調試配置。在我的情況下，URL是http://192.168.1.16:8100和question，我將整個項目的遠程URL設置爲webpack:///.，就是這樣。由於我目前的聲譽，我無法發佈圖片，對不起。
在WebStorm的終端選項卡中，我輸入ionic build，然後輸入ionic serve，以便在我的默認瀏覽器（即Safari）中編譯和提供項目。
我使用JetBrains Chrome擴展程序安裝了以前的Chrome，因此我可以調試應用程序，點擊位於配置框右側頂部的調試圖標。

如果我把一個破發點中的打字稿，它是不命中。如果我在轉換的JavaScript文件中放置一個斷點（不是捆綁文件），它會被擊中。我想要做的是直接調試TypeScript，而不是轉錄文件。有沒有人知道我做錯了什麼或失蹤？

注：

我想與視覺破發點，打字稿進行調試，所以debugger;並不能幫助我，因爲它是有效的只在transpiled水平（這是我目前正與破發點實現相同的）。
.js和.map文件是在與TypeScript文件相同的文件夾中爲每個.ts文件生成的。
的包文件app.bundle.js都有自己app.bundle.map文件，它是工作，因爲調試器停止在個人transpiled文件，如app.js或list.js從app.ts和list.js的。
我在WebStorm中使用TypeScript的默認配置。我沒有添加任何文件觀察器，WebStorm正在使用它的捆綁版本的TypeScript等。
如果我使用與ES6相同的Ionic 2項目執行相同的步驟，則可以調試ES6原始文件。

工具版本：

$ npm ls -g --depth 0 
/usr/local/lib 
├── [email protected] 
├── [email protected] 
├── [email protected] 
├── [email protected] 
├── [email protected] 
└── [email protected]

來源

2016-03-02 XME

您是否找到任何解決方案？我有同樣的問題，但與Visual Studio。 –

@NicklasWiborg不，對不起。我仍然在調試傳輸的JS，這有時是一種痛苦。 – XME

感謝您的詳細描述。有同樣的問題。 Webstorm 2016和VSCode都沒有停止TS中斷...我發現至少Chrome能夠顯示TS文件並對其進行調試 – decades

我找到了解決辦法。問題是我說是到WebStorm問Ionic項目打開時的問題編譯TypeScript到JavaScript？。我應該說沒有。

當您說是時，會爲每個.ts文件生成.js和.map文件。這是錯誤。應該只有您的.ts源文件和一個app.bundle.js文件來自與其關聯的app.bundle.map映射文件。

來源

2016-04-20 15:29:58 XME

嗨。那麼，在你的桌面文件夾中，每個.ts文件都沒有相應的.js文件？有時候IDE可能不會顯示給你......只是有興趣知道它們是否在那裏，但沒有在IDE中顯示。 – Ryan

這些文件不在那裏，我檢查了它。 – XME

啊。無論如何，無論如何，無法在Visual Studio代碼中調試離子型打字稿文件，所以只是在尋找指針 – Ryan

在WebStorm 11中使用TypeScript調試Ionic 2項目

回答

相關問題