在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浏览器而设计的开源调试工具(