vue项目调试的三种方法总结

 更新时间:2023年09月13日 10:24:11   作者:maya1024  
这篇文章主要给大家总结介绍了关于vue项目调试的三种方法,大家可以根据需要选择调试方法,文中通过图文介绍的非常详细,需要的朋友可以参考下

一、console.log

这个开始学就会,不演示了。重要的是需要养成这样的能力,代码出了问题,光看是看不出来问题的。

二、debugger方法

vscode安装插件,debugger for chrome;

在代码需要打断点的位置,写上debugger(如果安装eslint可能报错,这时鼠标移到代码出现小灯泡,点击选第一项忽略即可);

gn7rxU.png

npm run serve启动,到了断点位置浏览器会停下来;

gnHezT.png

在浏览器里使用步进开始调试。

三、vscode里断点调试

1. 在需要的位置打断点(每行行号前面);

gnqM5R.png

2. 点击菜单栏–运行–启动调试,在弹出的框里选chrome,进入launch配置,配置好url,再次启动调试就打开一个调试窗口;

gnqaad.png

3. 操作到我们打断点的位置,就可以看到vscode代码运行停止到断点位置,然后我们再进行自己的代码调试。

gnq0PI.png

总结

到此这篇关于vue项目调试的三种方法总结的文章就介绍到这了,更多相关vue调试方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解vue-cli@2.x项目迁移日志

    详解vue-cli@2.x项目迁移日志

    这篇文章主要介绍了详解vue-cli@2.x项目迁移日志,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • vue3组合式API中setup()概念和reactive()函数的用法

    vue3组合式API中setup()概念和reactive()函数的用法

    这篇文章主要介绍了vue3组合式API中setup()概念和reactive()函数的用法,接下来的事件,我将带着你从浅到深分析为什么我们需要学习组合式API以及我们的setup()函数作为入口函数的一个基本的使用方式,需要的朋友可以参考下
    2023-03-03
  • vue2从数据变化到视图变化之diff算法图文详解

    vue2从数据变化到视图变化之diff算法图文详解

    这篇文章主要介绍了vue2从数据变化到视图变化之diff算法图文详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • Vue mock.js模拟数据实现首页导航与左侧菜单功能

    Vue mock.js模拟数据实现首页导航与左侧菜单功能

    这篇文章主要介绍了Vue mock.js模拟数据实现首页导航与左侧菜单功能,mockjs是用来模拟产生一些虚拟的数据,可以让前端在后端接口还没有开发出来时独立开发。我们可以使用真实的url,mockjs可以拦截ajax请求,返回设定好的数据
    2022-09-09
  • vue中三种调用接口的方法

    vue中三种调用接口的方法

    这篇文章主要介绍了vue中三种调用接口的方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue使用nprogress加载路由进度条的方法

    vue使用nprogress加载路由进度条的方法

    这篇文章主要介绍了vue使用nprogress加载路由进度条的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • Vue.js组件通信的几种姿势

    Vue.js组件通信的几种姿势

    组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。下面通过本文给大家分享Vue.js组件通信的几种姿势,感兴趣的朋友一起看看吧
    2017-10-10
  • vuex中mapState思想应用

    vuex中mapState思想应用

    这篇文章主要分享vuex中mapState思想及应用,在需求开发过程中,有的接口返回的结果中有很多字段需要展示到页面上。通常可以将这些字段在.vue文件中封装为计算属性,或者重新将对应字段赋值到 data 中的字段来达到便于使用的目的,具体内容,我们一起来看下面文章内容吧
    2021-10-10
  • vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)

    vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)

    这篇文章主要介绍了vue中实现点击按钮滚动到页面对应位置的方法,这段代码主要使用c3平滑属性实现,需要的朋友可以参考下
    2019-12-12
  • 解决el-menu标题过长显示不全问题

    解决el-menu标题过长显示不全问题

    本文主要介绍了如何解决el-menu标题过长显示不全问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,感兴趣的朋友们跟着小编来一起学习学习吧
    2023-12-12

最新评论