欢迎光临
我们一直在努力

VueJS项目调试(debug)

 

Vue.js devtools开发工具

Vue.js devtools开发工具

上图蛮有意思。

VueJS用了很久了,大部分时候看下报错信息,结合Vue.js devtools查看下各个组件的数据其实就可以了,但是有时候还是有必要使用debugger的。

话分两头,本文主要讲两个东西:

  1. Vue.js devtools开发工具的使用;
  2. 使用debugger和sourcemap调试Vue组件(重点)

一、Vue.js devtools开发工具的使用

在Chrome或Firefox浏览器的扩展插件仓库里搜vue devtool,安装Vue.js devtools后结合下面这张官方动图,其他就不多说了,这不是本文重点。

二、使用debugger和sourcemap调试Vue组件

针对vue-cli webpack官方脚手架,打开build/webpack.dev.conf.js文件,找到下面这句:

将其修改为:

要修改的地方已经都改好了,就是这么简单,惊不惊喜,意不意外。

现在是具体调试了。假设我们想调试App.vue这个组件,可以在想要调试的代码前添加debugger方法,如下图所示:

然后运行npm run dev(如果你没改命令的话,默认开始命令是这个),启动服务后刷新页面(刷新前先把浏览器开发者工具打开),可以看到在程序进入App.vue组件mounted这个组件生命周期钩子里后,指定到debugger处时程序就被debug了。如下图所示,剩下的大家应该都很熟悉了。可以看到,此处显示的代码就是我们组件里的实际代码,并非被我们编译混淆后的那种代码,可读性非常好。

赞(0) 打赏(金额可任意指定)
未经允许不得转载:峰间的云 » VueJS项目调试(debug)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

上海宝山顾村棉被加工店 专业加工新旧棉被

查看详情了解一下

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏