Hi everyone. My last post was on how to debug typescript way back in the RC3 days… Now I just upgraded my project to the latest sparkling new Ionic 2.0.1 and low and behold, my breakpoints stopped working!!!
But thankfully there is a solution! And its even easier than last time…
Prerequisites
-
Google Chrome
-
Latest VS Code
-
Latest Ionic CLI + Latest package.json. The easiest way I have found to get the latest build environment is to:
1.Upgrade my CLI
2 Create a template project.
3.Copy the contents of the new project’s package.json into my actual project package.json.
4.Put back any non ionic dependancies that were originally in my package.json.
5.Delete the node_modules folder.
6.cd into the project directory and run npm install.
And that is an easy way of updating your project. Also be aware that they removed main.dev.ts and main.prod.ts from the app directory. Simply rename main.dev.ts to main.ts and delete main.prod.ts
- The Chrome Remote Debugger extension (Go to extensions in VS Code and search Chrome. After installing restart VS Code). Make sure its up to date… really helps.
Config
- Typescript Sourcemaps
You don’t have to do any of this in your package.json anymore:
"config": {
"ionic_source_map_type": "source-map",
"ionic_generate_source_map": true
}
They have made the source maps totally automatic. However you may be interested in what you can put under ‘config’. Check out this page to see: https://github.com/driftyco/ionic-app-scripts/blob/master/README.md
- Sourcemap Mappings
1.In VS Code click on the debugger panel. Ensure that your project is currently in VS Code.
2.Click the settings Cog and choose the Chrome option. Don’t use Cordova Tools. If clicking the settings cog only brings up the launch.json, delete the .vscode folder in your project directory.
3.In the project file viewer find a folder called .vscode
4.Find launch.json under .vscode
5.Make your launch.json look like mine except under the source map overrides. Here, specify your own typescript files which you want to be able to debug. Anything not specified here wont be accessible by the debugger:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome against localhost, with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8100",
"sourceMaps": true,
"webRoot": "${workspaceRoot}/src"
},
{
"name": "Attach to Chrome, with sourcemaps",
"type": "chrome",
"request": "attach",
"port": 9222,
"sourceMaps": true,
"webRoot": "${workspaceRoot}/src",
"url":"http://localhost:8100/",
}
]
}
NOTE: This is way different from last time. Notice now we have ${workspaceRoot}/src where as before we had ${workspaceRoot}. Also we don’t need to use the "sourceMapPathOverrides" entry anymore - yay! You don’t have to specify every blasted file you want to debug! All this is because the new script organises your source map files in a new and organised way - in chrome you won’t see the “web pack:///” heading in the sources tab of dev tools. Its the way it always should’ve been!
NOTE: I like to debug using ‘Attach to Chrome’. BUT… you are most welcome to use ‘Launch Chrome’. I just had to turn off some security features due to cross-domain access not being granted in normal chrome. I need to control how chrome boots myself. Also I find that it doesn’t catch my breakpoints until I refresh the browser … then again I haven’t experimented with this much.
NOTE: When I drop-dragged my project onto VSCode, I used the folder which had all these files in it:
If you put a ‘higher’ folder in, the launch.json won’t point to the right stuff.
Debugging
Now the fun bit.
-
Close all instances of Google Chrome. On windows sometimes Chrome runs in the background so be thorough.
-
On a Mac, open the terminal and type:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
(on a windows, launch chrome with the same flag) -
cd to your project directory and run
ionic serve -
Once the build process is complete and chrome is displaying your app, got to VS Code and start the debugger. You do this by going into the debugging tab and clicking the green play button. (NOTE: Make sure the mode is set to “Attach to Chrome, with sourcemaps”).
-
Set some breakpoints (You can do this earlier) in your .ts files and refresh the browser by clicking the address bar and hitting enter. (For some reason the Ionic CLI has got rid of the ‘r’ command, not sure why - could someone clarify!)
You are done!
I hope this has been helpful
Thanks
Chris
