vscode实时调试vue代码

引用=>作为前端开发，基本每天都要调试 Vue 代码，不知道大家都是怎么调试的，但我猜大概有这么几种

• 不调试，直接看代码找问题。
• console.log 打印日志。
• 用 Chrome Devtools 的 debugger 来调试。
• 用 VSCode 的 debugger 来调试。

推荐使用vscode的debugger来调试，效率提升一个档次

第一步：安装这个插件 Debugger for Firefox

第二步：在launch.json文件中进行如下配置

注意箭头的指向路径，改成你项目的启动路径

第三步：在你需要调试的位置打断点

1、在需调试的代码行左边点击，打断点
2、点击左上角的绿色按钮执行代码，此时打开火狐浏览器
3、在运行到响应的位置时，悬浮在目标代码上方，此时实时数据、调用堆栈、原型链等详细的数据都清清楚楚的罗列出来，好比鱼竿和渔网，不比console.log快得多？

此文章引用自该作者的内容：在此表示感谢！
https://mp.weixin.qq.com/s/ryBuaX6_KcBVEnd_whk8xw

其他相关链接：

• https://code.visualstudio.com/docs/editor/debugging#_launch-configurations
• https://v2.vuejs.org/v2/cookbook/debugging-in-vscode.html?redirect=true
• https://code.visualstudio.com/docs/nodejs/vuejs-tutorial#_debugging-vue