首页 > 其他 > 详细

angular2 step by step #2 - start to debug

时间:2017-03-15 14:29:15      阅读:255      评论:0      收藏:0      [点我收藏+]

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. 

angular2 step by step #2 - start to debug

原文:http://www.cnblogs.com/chsw/p/6553852.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!