Vue进阶(幺陆柒):Vue项目调试

举报
SHQ5785 发表于 2021/02/19 22:20:38 2021/02/19
【摘要】 在`Vue`项目开发过程中,当你遇到应用逻辑出现错误,但又无法准确定位的时候,知晓`Vue`项目调试技巧至关重要。同后台项目开发一样,可以在`JS`实现的应用逻辑中设置断点,并进行单步、进入方法内、跳出方法等调试,从而准确定位问题根源。本文主要针对`JetBrains`系列`WebStorm`下`Vue`项目进行调试的2种方法:`debugger`和。## debugger`debugger...

在`Vue`项目开发过程中,当你遇到应用逻辑出现错误,但又无法准确定位的时候,知晓`Vue`项目调试技巧至关重要。

同后台项目开发一样,可以在`JS`实现的应用逻辑中设置断点,并进行单步、进入方法内、跳出方法等调试,从而准确定位问题根源。

本文主要针对`JetBrains`系列`WebStorm`下`Vue`项目进行调试的2种方法:`debugger`和。

debugger

`debugger`是谷歌浏览器提供的调试语句,其主要是通过停止`JS`的执行,相当于设置断点。它的使用方法很简单, 只需要在我们的`JS`语句中, 插入一行`debugger;` 即可。

在`JS`代码编写的过程中,我们都会通过浏览器的调试模式(`F12`)来检查代码逻辑是否正确,大多数我们都是通过设置断点来进行调试。

应用`debugger`调试`Vue`项目,需要在`vue.config.js`文件中加入如下代码,即可开启

```
  configureWebpack: {
    devtool: ‘#eval-source-map‘
  },
```

然后,在项目中需要的位置写`debugger`,项目运行后,打开浏览器按`F12`,在`chrome sources`页签中就会直接进入断点,至此可以进行单步、跳步调试了。

 Vue.js devtools

该调试工具为针对Chrome浏览器而设计的开源调试工具([Github地址](https://github.com/vuejs/vue-devtools/tree/master)),可以自行将该项目下载下来然后编译,并将生成后的`chrome`插件安装至`chrome`中,步骤如下:
找到谷歌浏览器的扩展程序功能,勾选开发者模式,然后我们将插件文件夹里的`shells>chorme`文件夹直接拖到页面中,完成安装。

P.png


然后运行本地项目用谷歌浏览器打开就可以调试了,如下图所示。

P1.png


 注
1. 应用`devtools`调试工具,还需要在`vue`项目中`man.js`需要配置:

```
    Vue.config.devtools = true;
```

2. 安装后, 需要关闭浏览器, 再重新打开, 才能使用;

3. 如果调试插件安装后,`vue`面板未出现,再到`vue-devtools`文件夹下执行一遍`npm run dev`。

也可以在联网状态下,在`Chrome`或`Firefox`浏览器的扩展插件仓库里搜`vue devtool`,安装`Vue.js devtools`。

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。