Visual Studio Code断点调试前端程序(Vue)

0. 背景

众所周知, 断点调试时开发人员必不可少的技能包之一。
缺少了这一技巧的开发人员如同少了一只手臂, 开发效率大打折扣。

在如今五彩缤纷的众多开发集成环境(IDE)中，后端Java开发人员最钟爱的是IntelliJ IDEA。
而前端开发者最钟爱的则是VS Code。

Java开发者们都知道，在IDEA或Eclipse中断掉调试程序非常简单，只需要在你所需要断点
调试的代码行前点个小圆点，然后点击debug就可以了。

那么在Vs Code中断点调试也是这么简单呢?

答案是:
没那么傻瓜化，需要稍微配置一下。
下面我们就来看看前端小白如何在Vs Code中断点调试程序吧。

 

1. 添加Debugger for Chrome插件

在Vs Code左侧的工具类点击"Extensions"按钮。

安装插件如下:

安装插件

 

2. 为你的项目添加启动文件

打开项目后, 在左侧的工具类点击"Run and Debug"按钮。
点击"Add Configuration"。

添加Chrome启动文件

这时候，会在项目中生成一个文件launch.json。

你需要修改launch.json如下:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "91.0.4469.4",
    "configurations": [
        
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080/#/",
            "runtimeExecutable": "/Applications/Google Chrome Dev.app/Contents/MacOS/Google Chrome Dev",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

上面的配置文件中需要注意两点:
version和runtimeExecutable。
很多开发者会遇到一个问题就是:
Unable to find a Chrome installation on your system

这是由于配置文件中的版本还有Chrome的执行路径和你开发机不匹配导致的。

那么，我们如何查看自己的Chome版本和执行路径呢。
很简单。
你只需要在浏览器输入路径:
chrome://version/

见下图

Chrome版本和执行路径

 

3. 开启断点调试

配置完成以后，我们便可以开启我们的断点调试之旅了。
首先，你需要在你的程序中打断点，这个和别的IDE没有区别。

然后，你照常先运行你的程序。
(eg: npm run serve)

最后，点击那个小三角的调试按钮。
见下图

点击调试

这个时候，你会看到断点进来了。
效果如下:

断点模式

好了，Vs Code中断点调试技巧就结束了，是不是很简单啊。