Vue 进阶(幺陆柒):Vue 项目调试技能
一、前言
在Vue
项目开发过程中,当遇到应用逻辑出现错误,但又无法准确定位的时候,知晓Vue
项目调试技巧至关重要。
同后台项目开发一样,可以在JS
实现的应用逻辑中设置断点,并进行单步、进入方法内、跳出方法等调试,从而准确定位问题根源。
本文主要讲解针对JetBrains
系列WebStorm
下Vue
项目进行调试的 2 种方法:debugger
和Vue-devtools
。
二、debugger
debugger
是谷歌浏览器提供的调试语句,其主要是通过停止JS
的执行,相当于设置断点。它的使用方法很简单, 只需要在我们的JS
语句中, 插入一行debugger;
即可。
在JS
代码编写的过程中,我们都会通过浏览器的调试模式(F12
)来检查代码逻辑是否正确,大多数我们都是通过设置断点来进行调试。
应用debugger
调试Vue
项目,需要在项目中需要的位置写debugger
,项目运行后,打开浏览器按F12
,在chrome sources
页签中就会直接进入断点,至此可以进行单步、跳步调试了。
三、Vue-devtools
该调试工具为针对 Chrome 浏览器而设计的开源调试工具(Github地址),可以自行将该项目下载下来然后编译,并将生成后的chrome
插件安装至chrome
中,步骤如下:找到谷歌浏览器的扩展程序功能,勾选开发者模式,然后我们将插件文件夹里的shells>chorme
文件夹直接拖到页面中,完成安装。
然后运行本地项目用谷歌浏览器打开就可以调试了,如下图所示。
四、延伸阅读
应用
devtools
调试工具,还需要在vue
项目中man.js
配置:
安装后, 需要关闭浏览器, 再重新打开, 才能使用;
如果调试插件安装后,
vue
面板未出现,再到vue-devtools
文件夹下执行一遍npm run dev
。
也可以在联网状态下,在Chrome
或Firefox
浏览器的扩展插件仓库里搜vue devtool
,安装Vue.js devtools
。
五、拓展阅读
版权声明: 本文为 InfoQ 作者【No Silver Bullet】的原创文章。
原文链接:【http://xie.infoq.cn/article/7fbf90406ee1ae9ab656b8272】。文章转载请联系作者。
评论