在WebStorm 11中使用TypeScript调试Ionic 2项目

Question

在WebStorm 11中使用TypeScript调试Ionic 2项目

debuggingtypescriptwebpackwebstormionic2

4

我希望使用WebStorm 11.0.3作为IDE，在OS X上编写一个使用TypeScript的Ionic 2应用程序。我发现的问题是，我无法在WebStorm中使用断点调试TypeScript文件。到目前为止，我只能调试已转换为JavaScript的文件。

接下来，我将描述我做了什么以及最终想要的结果。

I created a new Ionic 2 project with TypeScript typing:
```
$ ionic start demo sidemenu --v2 --ts
```

I added to the tsconfig.json file two flags: "sourceMap": true and "removeComments": false, resulting in the following file:

{
  "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
  }
}

I modified the webpack.config.js file adding devtool: 'source-map' to its module exports section. The final config file is (don't pay attention to commented lines):

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"]
  }
};

I opened the project in WebStorm 11 and created a new JavaScript debug configuration. The URL in my case is http://192.168.1.16:8100 and following question, I set the remote URL for the entire project as webpack:///., just that. I cannot post an image because of my current level of reputation, sorry.
In the terminal tab of WebStorm I typed ionic build and then ionic serve in order to compile and serve the project in my default browser, which is Safari.
I installed previously Chrome with the JetBrains Chrome Extension so I can debug the application hitting on the debug icon located on the right top near the configuration box.

如果我在TypeScript中设置断点，它不会被触发。如果我在转译后的JavaScript文件（而不是打包文件）中设置断点，则会被触发。我希望直接调试TypeScript，而不是转译后的文件。有没有人知道我做错了什么或者漏了什么？

I want to debug with visual break points TypeScript, so debugger; does not help me, because it is effective only at the transpiled level (it's the same I currently achieve with break points).
.js and .map files are generated for each .ts file in the same folder than the TypeScript file.
The bundle file app.bundle.js has its own app.bundle.map file and it is working, since the debugger stops at the individual transpiled files such as app.js or list.js derived from app.ts and list.js.
I use default configuration for TypeScript in WebStorm. I didn't add any file watcher, WebStorm is using its bundle version of TypeScript, etc.
If I follow the same steps with the same Ionic 2 project using ES6, I can debug ES6 original files.

Tools versions:

$ npm ls -g --depth 0
/usr/local/lib
├── cordova@6.0.0
├── ionic@2.0.0-beta.17
├── ios-deploy@1.8.5
├── ios-sim@5.0.6
├── npm@2.14.12
└── typescript@1.8.2

- XME

你找到任何解决方案了吗？我也有同样的问题，但是是在Visual Studio中。 - Nicklas Wiborg

@NicklasWiborg 不好意思，我还在调试转译后的JS代码，有时候很痛苦。 - XME

感谢详细的描述。我遇到了同样的问题，Webstorm 2016和VSCode都不能在TS断点处停止...至少我发现Chrome能够展示TS文件并进行调试。 - decades

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- XME · Answer 1

我找到了解决方案。问题在于当打开Ionic项目时，WebStorm问我一个问题：“将TypeScript编译为JavaScript？” 我应该选择“否”，而不是“是”。

如果你选择“是”，每个.ts文件都会生成一个.js和.map文件。这就是错误的原因。应该只有你的.ts源文件和一个单独的app.bundle.js文件以及与之相关联的app.bundle.map映射文件。