web前端工程化之VS Code调试

         开发完了，避免不了要使用工具进行调试，其实对于有经验的人来说，怎样调试，用什么工具调试，都只是些细微的差别。用什么工具都可以做这件事情。

那使用vscode怎么调试呢。

         从后端开发熟悉debug之后，前端会有点点不习惯，但是没有关系，做一次就明白怎么回事了。

1、vscode启动

 我使用过的前端有angular和ionic，使用不同的前端框架，启动的方式是不同的。

           angular启动命令是ng serve，在控制台中有访问地址：http://localhost:4200

           ionic命令是ionic serve，在控制台访问地址是：http://localhost：8100

           启动之后，使用自动保存，vscode会自动进行编译，这样会非常快的将修改展示到页面。

2、添加断点

我习惯的方式有两种

一种是在要调试的地方，使用Debugger；加上断点，在执行到这句话的时候会停下。

另一种是在浏览器-->sources-->webpack-->(点).-->找到要调试的页面，在function上就可以加上断点，这样的方式比较像后端调试的时候。