angular2 step by step #2 - start to debug

this step by step is based on angular cli.

1. check the environment

C:\MyDoc\Temp\Angular2\helloworld>ng -v
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.0.0-rc.1
node: 7.2.0
os: win32 x64
@angular/common: 2.4.9
@angular/compiler: 2.4.9
@angular/core: 2.4.9
@angular/forms: 2.4.9
@angular/http: 2.4.9
@angular/platform-browser: 2.4.9
@angular/platform-browser-dynamic: 2.4.9
@angular/router: 3.4.9
@angular/cli: 1.0.0-rc.1
@angular/compiler-cli: 2.4.9

2. Install "Debugger for Chrome" extension for VSCode. my version is 2.6.0.

3. create a brand new project "helloworld"

4. go to "helloworld" project folder, and open VSCode from there. (make sure VSCode is openning in the project's working folder)

5. go to VSCode \ "debug", setup launch.json. (click the setting icon, select chrome, the launch.json will be created)

6. use the following confirmation.

{

    "version": "0.2.0",

    "configurations": [

        {

            "name": "LaunchChrome",

            "type": "chrome",

            "request": "launch",

            "url": "http://localhost:4200",

            "sourceMaps": true,

            "webRoot": "${workspaceRoot}",

            "userDataDir": "${workspaceRoot}/.vscode/chrome"

        }

    ]

}

7. start web server. (in window command, ng serve)

8. start debug in VSCode, chrome browser will be launched, and set a breakpoint

export class AppComponent {

  title = 'app works!';

}

 9. seems it doesn't hit the breakpoint in Chrome at first, the url is "http://localhost:4200".

10. manually add the "/" after "http://localhost:4200", and click enter again. now debug is working. not sure why initially it didn't hit the break point, because of doing the initial loading? ...

11. Anyway, this should be very straight forward to make Angular2 debug working.