## 一、概述 通过vscode的**debugger for chrome**插件实现； ## 二、安装  ## 三、配置 1、首先，打开工程目录；  2、选择VSCode的左边栏之运行调试栏：  选择创建launch.json，即可为当前工程创建一个调试配置文件；  选择chrome环境，创建一个launch.json， 它会在工程的根目录下，建立一个.vscode目录，里面包含一个launch.json配置文件，这里可以定义调试的url等信息；  3、完成配置了，可以使用该插件来进行断点调试了； ## 四、应用 1、在代码里设置一个断点；  2、正常启动的你的项目，比如npm run serve； 3、启动完毕，点击运行调试栏的启动调试图标，这样会调出chrome浏览；  弹出之后，断点就生效了，可以看到浏览器端的标记：  VSCode代码端停在断点那里了，能看到变量的值了，也能够通过顶上的调试按钮，操控调试进程了（跟后端调试基本没有差异了）：   ## 五、调试命令  | 按键 | 操作 | | --- | --- | | F5 | 跳过当前断点，跳到下一个断点，如果下面没有断点了，则执行完所有当前代码；| | F10 | 跳过当前断点，单步到下一行代码处，在当前源码行，逐行调试，不会进入当前代码的调用堆栈中去；| | F11 | 单步调试，在当前源码行，进入调用堆栈中去| | Shift+F11 | 单步跳出，在当前源码行，从调用堆栈中跳出原来代码行| | Ctrl+Shift+F5 | 重启当前调试 | | Shift+F5 | 停止当前调试 | ## 六、监控变量 通过调试标签页，可以在监视窗口，随时增加监控的变量；  增加要观察的变量：