接下来,我将描述我做了什么以及最终想要的结果。
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 addingdevtool: '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 aswebpack:///.
, 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 thenionic 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.
- 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 ownapp.bundle.map
file and it is working, since the debugger stops at the individual transpiled files such asapp.js
orlist.js
derived fromapp.ts
andlist.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