vue调试的三种方式(debugger+vue-devtools+Debugger for Chrome)
第一种调试方式,在vue.config.js文件中加入如下代码,即可开启
configureWebpack: { devtool: ‘#eval-source-map‘ },
然后在项目中需要的位置写debugger,项目运行后,在chrome中就会直接进入断点,网上还有一种方式如下图,在sources中的page页签下的webpack://下找到index.vue找到vue文件,就可以直接打断点,然后也可以进入,但是这种办法有个比较不爽的地方就是,你看不到let定义变量的值,在下面的图片中来说,就是你直接看不到formatDisplayNameData中的值,只能看到storData中的值,这样调起来就很不爽,所以还是开启debugger调试的方式。
第二种 (vue-devtools) 这个个人也没搞清楚是怎么调的,反正我是按照网上的方法安装成功,vue的界面也出来了
参考的链接:
https://www.cnblogs.com/laneyfu/p/11221673.html
https://github.com/vuejs/vue-devtools/tree/master
https://www.jianshu.com/p/a8cda3388854
第三种(Debugger for Chrome) 就下在vscode中安装插件,也很容易安装成功了
参考的链接:
相关推荐
yuzhu 2020-11-16
85477104 2020-11-17
KANSYOUKYOU 2020-11-16
sjcheck 2020-11-03
怪我瞎 2020-10-28
源码zanqunet 2020-10-28
gloria0 2020-10-26
王军强 2020-10-21
学习web前端 2020-09-28
QiaoranC 2020-09-25
anchongnanzi 2020-09-21
安卓猴 2020-09-12
Macuroon 2020-09-11
kiven 2020-09-11
LittleCoder 2020-09-11
Cheetahcubs 2020-09-13
小焊猪web前端 2020-09-10
颤抖吧腿子 2020-09-04
softwear 2020-08-21