使用Vs Code进行Vue调试

1.前言

本文详细介绍如何Vs Code进行Vue调试，文章完全免费。

2.操作步骤

1.在前端根路径下新建.vscode文件，在文件夹下新建文件launch.json。

2.将以下配置填写再launch.json文件中。其中，参数url一定配置前端启动地址，到时候调试器会自动访问这个地址的页面。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:80/",
            "webRoot": "${workspaceRoot}"
        }
    ]
}

3.点击左侧“运行和调戏”菜单，会显示chrome。

4.启动调试页面，会自动打开一个谷歌浏览器页面，并且自动跳转到调试控制台。

5.找到需要打断点的位置，输入debugger（通过vscode代码行前面的断点标志，打断点是不生效的）。

6.打开刚开启动调试时生成的谷歌页面（非调试时生成的页面，不会触发debugger），找到调用这个函数的页面，会自动触发调试功能。点击“运行和调戏”菜单，能够查看调试信息。

7.如果想关闭调试，直接关闭调试生成的谷歌页面即可。调试按钮功能和其他调试软件类似，就不介绍了。

3.总结

这次文章内容很简单，不像我以前的风格，可能有些小伙伴觉得我在水文章。其实，我并没有水文章，因为我搜索了下vue调试的文章，很多文章介绍些没用的内容，把简单问题搞得那么复杂。有的还让安插件，这是完全没必要，因为VsCode内置的插件就可以完成调试功能了。
文章长短其实并不重要，重要的是能够对您有帮助。如果本文章对您有帮助的话，可以给我点赞支持下，您的支持就是我最大的动力。我会不定时发布一些关于若依框架、java、Vue、uniapp等方面的内容，如果感兴趣的话，可以关注我。如果您需要前后端分离版的文件管理系统、流程管理系统或其他以上四方面涉及的内容，查看我的主页一定不后悔。