angular2 step by step #2 - start to debug

强颜欢笑 提交于 2019-12-29 09:47:39

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. 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!