在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]
我找到了解决办法。问题是我说是到WebStorm问Ionic项目打开时的问题编译TypeScript到JavaScript?。我应该说没有。
当您说是时,会为每个.ts
文件生成.js
和.map
文件。这是错误。应该只有您的.ts
源文件和一个app.bundle.js
文件来自与其关联的app.bundle.map
映射文件。
您是否找到任何解决方案?我有同样的问题,但与Visual Studio。 –
@NicklasWiborg不,对不起。我仍然在调试传输的JS,这有时是一种痛苦。 – XME
感谢您的详细描述。有同样的问题。 Webstorm 2016和VSCode都没有停止TS中断...我发现至少Chrome能够显示TS文件并对其进行调试 – decades