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

Question

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

最后我会描述我做了什么，我想要什么

我使用 TypeScript 输入创建了一个新的 Ionic 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 并且在之后，我将整个项目的远程 URL 设置为 webpack:///.，仅此而已。由于我目前的声誉水平，我不能 post 图片，抱歉。
在 WebStorm 的终端选项卡中，我输入 ionic build，然后输入 ionic serve，以便在我的默认浏览器 Safari 中编译和提供项目。
我之前 Chrome 安装了 JetBrains Chrome 扩展，因此我可以调试应用程序，点击位于配置框附近右上角的调试图标。

如果我在 TypeScript 中放置一个断点，它不会命中。如果我在转译的 JavaScript 文件（不是捆绑文件）中放置一个断点，它就会被击中。我想做的是直接调试 TypeScript，而不是转译后的文件。有谁知道我做错了什么或遗漏了什么？

备注：

我想使用视觉断点调试 TypeScript，所以 debugger; 对我没有帮助，因为它仅在转译级别有效（这与我目前使用断点实现的相同）。
.js 和 .map 文件在与 TypeScript 文件相同的文件夹中为每个 .ts 文件生成。
捆绑文件 app.bundle.js 有它自己的 app.bundle.map 文件并且它正在工作，因为调试器在单独的转译文件处停止，例如 app.js 或 list.js 派生来自 app.ts 和 list.js.
我在 WebStorm 中使用 TypeScript 的默认配置。我没有添加任何文件观察器，WebStorm 正在使用其捆绑版本的 TypeScript 等
如果我使用 ES6 对同一个 Ionic 2 项目执行相同的步骤，我可以调试 ES6 原始文件。

工具版本：

$ 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

Answer 1

我找到了解决办法。问题是我对打开 Ionic 项目时 WebStorm 问我的问题 yes Compile TypeScript to JavaScript? 说了。我应该说没有。

当您选择是时，将为每个 .ts 文件生成 .js 和 .map 文件。这是错误。应该只有您的 .ts 源文件和来自转译的单个 app.bundle.js 文件及其关联的 app.bundle.map 映射文件。

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

Debugging Ionic 2 project with TypeScript in WebStorm 11

debugging

webstorm

typescript

webpack

ionic2