Angular断点调试_angular debug

        与其他程序一样，Angular程序也支持在调试的时候断点及单步执行。

        如果是使用VS Code开发，可以安装调试插件，直接在VS Code窗口中进行断点执行。插件名称：Debugger for Chrome，插件安装好之后直接F5就可以启动调试。但是这个插件不是特别好用，有时候会有未知的bug，比如变量值跟踪不到的情况。所以还是推荐直接使用Chrome浏览器的开发者工具进行调试。

        程序启动调试后，Chrome浏览器F12打开开发者工具，切换到源代码标签页找到页面代码。

        调试运行的项目代码位于：top->webpack://->. 目录：

         该目录就与实际的开发目录一致，点击文件打开就可以在想要的位置添加断点。如上图在13行的地方添加了断点。

        刷新页面，代码运行到断点处就会停住。此时就可以像其他程序一样进行调试了。鼠标悬停会显示变量的值，F10下一步，F11进入方法内部。也可以在右侧 Watch 窗口添加变量监视：

         提倡多断点调试，不要盲改。