How to debug Typescript in Ionic 2.0.1 Release using VSCode!


#1

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.

  1. Close all instances of Google Chrome. On windows sometimes Chrome runs in the background so be thorough.

  2. 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)

  3. cd to your project directory and run ionic serve

  4. 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”).

  5. 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


How to debug Typescript in Ionic Apps using VS Code and App Scripts 0.0.46
#2

In your upgrade steps 3 and 4 above, you mean merge all entries from a fresh new project 2.0.1 into your current latest project packages.json, while keeping any non ionic2 dependencies/entries in place?

Some people suggest dropping the current code (I assume src/**) into the latest blank project, but I find it also problematic. Besides dealing with conflicts, I still have to move over my .vscode, .git and other development related configs etc…

Is there a way to create the latest blank project without the node_modules ?

Thanks for posting.


#3

Hi, I did the following
npm uninstall -g ionic
npm install -g ionic
npm info

ordova CLI: 6.4.0
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v7.2.0
Xcode version: Not installed

However it seems nothing changed Ionic Framework Version is still 2.0.0 I was expecting 2.0.1
What did I miss?

My next step would have been something like this
ionic start --v2 myApp tabs

Upon “npm install -g ionic” I got this in its first lines

npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@0.3.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated node-uuid@1.4.7: use uuid module instead
npm WARN deprecated node-uuid@1.3.3: use uuid module instead

and the following towards the end

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\ionic\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.17: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN In ionic@2.2.1 replacing bundled version of cross-spawn with cross-spawn@4.0.2
npm WARN In ionic@2.2.1 replacing bundled version of semver with semver@4.2.0
npm WARN In ionic@2.2.1 replacing bundled version of mime-types with mime-types@2.0.14
npm WARN In ionic@2.2.1 replacing bundled version of form-data with form-data@0.2.0
npm WARN In ionic@2.2.1 replacing bundled version of request with request@2.51.0
npm WARN In ionic@2.2.1 replacing bundled version of ionic-app-lib with ionic-app-lib@2.2.0

Thank you.


#4

Yeah exactly what i meant. Just made the edit. Also there is no ideal way of updating. I like to create a new project because its clean. I know that i cant make a human error with this. Actually it would be great for the CLI tonhave an update feature.


#5

Thanks, are you able to explain why after uninstall and install ionic, Framework Version is still 2.0.0 I was expecting 2.0.1,
Does you ionic info show Ionic Framework Version: 2.0.1 ?


#6

@AlGantori Take a look at your package.json: by default Ionic installs with a specific version so unless you edit your versions in that file it will stay at the version you used when you created your app.


#7

Thank you, I did the following to update packages.json

npm install --save ionic-angular@2.1.0

now it’s showing up in the info :slight_smile:

$ ionic info

Your system information:

 ordova CLI: 6.5.0
Ionic Framework Version: 2.1.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v7.2.0
Xcode version: Not installed