在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项目

回答

相关问题