Ionic 3: Debugging on VS Code and Chrome

After long time, since from my first post Quick start your mobile app with Ionic,  now I have a project using Ionic. So I want to share this post to my team for how to debugging on latest Ionic 3. Because saving debug time means you will delivery the application faster.

As beginning, I want to brief important things for starting with latest Ionic 3:

• Follow the document on Ionic's website to install Node JS (version 6+), then install/update Ionic with command:

npm install -g ionic cordova

• Start an app with command (cutePuppyPics is your app name/project)

ionic start cutePuppyPics tutorial

• Install MS VS Code and some good extensions for developing Ionic on VS Code, such as: Ionic Extension Pack, Debugger for Chrome.

OK, you are ready to code! But wait, let setup to debug for your app on Chrome firstly. Open your app on VS Code and do the following steps:

1. Press F5 >> select Chrome:

2. Edit file launch.json generated with content like below:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Ionic on Chrome",
            "url": "http://localhost:8100",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}/src"
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach Ionic on Chrome",
            "url": "http://localhost:8100",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}/src"        }
    ]
}

For Ionic 4, let use ${workspaceFolder} instead of ${workspaceRoot}/src.

3. If you use Windows, let open Properties of Chrome's short cut, and add --remote-debugging-port=9222 in to Target box:

For Mac, let use same debug flag as Windows. This debug flag is used for attaching your Ionic app into existing Chrome running.

4. Press Ctrl+` to open VS Code terminal, key:

ionic serve -b

It will build the app and start the server (http://localhost:8100/) but don't launch browser (-b option).

5. Close all Chrome opened, click debugger icon >> select Launch Ionic on Chrome option >> open a file, for example cutePuppyPics\src\pages\list\list.ts, set break point and press F5. It will launch the app on Chrome and display a debug player on the top of VS Code. In this example, when you click My First List menu and hit an item, it will jump to the break point for debugging, see the following picture:

You can stop the debug by pressing Shift+F5 or stop buttonon debug player. Stopping the debugger doesn't stop the app, it is still running until you press Ctrl+C in terminal.

6. In case you want to debug dynamically, you can attach the debugger into the app is running on Chrome. To try, let open Chrome and key http://localhost:8100 to running the app. Then go to VS Code >> click debugger icon >> select Attach Ionic on Chrome option >> click run (or press F5). It will open a debug player like below, and when you click an item in My First List page, it will jump to the break point.

7. You can change source code and see this change updated to running app on Chrome. That's great point of Ionic which can help to speed up developing your application. I love it due to this live update feature.

Happy coding! Any comment is welcome.