使用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等方面的内容，如果感兴趣的话，可以关注我。如果您需要前后端分离版的文件管理系统、流程管理系统或其他以上四方面涉及的内容，查看我的主页一定不后悔。