前端调试（三） ---- vscode devtools

前言

前两节我们学习了使用chrome devltools进行调试，但是在浏览器上进行某些操作的调试多少有点别扭（比如想要边写代码边调试）。这节，我们尝试用vscode进行调试。

用VsCode进行断点调试

启动项目

首先我们启动我们的项目，记住服务端口号。

配置vscode debug文件

新建launch.json文件

点击左下角的添加配置

选择chrome launch

将服务地址改成我们的服务地址

在调试面板启动调试服务

在代码中设置断点，点击刷新按钮，就可以进行调试。最上面的几个控制按钮和chrome devtools的基本一致。左边就是当前状态下的本地和全局作用域的变量以及调用栈堆等。