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

我想使用WebStorm 11.0.3作为OS X中的IDE编写一个带有TypeScript的Ionic 2应用程序。我发现的问题是，我无法使用WebStorm中的断点调试TypeScript文件。到目前为止，我只能调试传输的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:'sourcemap'

添加到其模块导出部分。最后一个配置文件是（不要注意注释行）：

我在WebStorm 11中打开了该项目，并创建了一个新的JavaScript调试配置。在我的例子中，URL是

http://192.168.1.16:8100

接下来，我将整个项目的远程URL设置为

webpack:///.

，就是这样。我不能发布图片，因为我目前的声誉水平，对不起

在WebStorm的终端选项卡中，我键入了

ionic build

，然后键入

ionic serve

，以便在我的默认浏览器Safari中编译和服务项目

我以前安装了带有JetBrains Chrome扩展的Chrome，因此我可以点击位于右上角靠近配置框的调试图标来调试应用程序

如果我在TypeScript中放置一个断点，它是而不是命中。如果我在传输的JavaScript文件（而不是捆绑文件）中放置断点，它将被命中。我想做的是直接调试TypeScript，而不是传输的文件。有人知道我做错了什么或错过了什么吗

注:

• 我想用可视化断点TypeScript进行调试，所以

  调试器对我没有帮助，因为它只在传输级别有效（这与我目前通过断点实现的效果相同）

• .js

  和

  .map

  文件是为每个

  .ts

  文件生成的，这些文件与TypeScript文件位于同一文件夹中
• bundle文件

  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
  

---

我找到了解决办法。问题是，当爱奥尼亚项目被打开时，WebStorm问了我一个问题：将TypeScript编译成JavaScript？我说是？。我应该说不

---

当您说是时，将为每个

.ts

文件生成

.js

和

.map

文件。这就是错误所在。应该只有您的

.ts

源文件和transpilation中的单个

app.bundle.js

文件及其关联的

app.bundle.map

map文件。
您找到解决方案了吗？“我也有同样的问题，但与Visual Studio有关。”@NicklasWiborg没有，对不起。我仍在调试传输的JS，这有时是一件痛苦的事。谢谢你的详细描述。有同样的问题。Webstorm 2016和VSCode都不会在TS中断时停止…我发现至少Chrome能够显示TS文件并调试ITI。在你的桌面文件夹中，你没有每个.ts文件对应的.js文件吗？有时IDE无法向您显示它们。。。我只是想知道它们是否在那里，但没有显示在IDE中。文件不在那里，我检查了一下。啊。就我所知，无法在VisualStudio代码中调试ionic typescript文件，所以我只是在寻找指针

$ 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