如何调试VUE代码（VUE调试利器 vue devtools）

最新推荐文章于 2024-08-07 09:31:34 发布

daimeijin

最新推荐文章于 2024-08-07 09:31:34 发布

阅读量2k

点赞数 1

分类专栏： VUE 笔记前端技术文章标签： vue 前端框架前端 vue.js

本文链接：https://blog.csdn.net/daimeijin/article/details/119305018

版权

本文介绍了如何使用vue devtools来调试Vue项目，包括下载、构建、安装和使用方法。详细讲解了components面板、Vuex面板、Events面板、Routing面板和Performance的使用，帮助开发者更好地理解并优化Vue应用。

摘要由CSDN通过智能技术生成

前言

最新想开发一个前后端分离的项目，一直想开始的，拖延了好久终于决定要对它下手了。最早的时候开发的时候使用的还是JSP，那个时候使用的还是EL表达式，后来切换到Spring和SpringMVC之后采用的是HTML+JS的all in one的模式，虽然也可以称为前后端分离，但是还是耦合在一个大工程里面。到最近的项目拆分为前后端完全分离的模式。由于公司组织结构调整，前后台完全分离，所以对前端技术有点生疏了。需要及时补救一下。虽然VUE已经是一个很流行的框架了，但是三天不练手生，所以还是决定自己搞一个项目练练手。然后记录一下其中遇到的问题。这个项目也是在别人的基础上进行的开发改造。

如何查询VUE代码

在学习VUE之前，我们查看前端代码的时候，是很简单的。只需要按一下F12就能打开控制台调试。常用的是Elements和Console
在这里插入图片描述
但是使用VUE之后，你会发现仅仅通过这两个控制台的页签不行了。然后就是我们这一篇文章的主角vue devtools出场了。

下载

进入github上找到vue devtools的源码。记得选择main分支。直达地址
从github上下载文件需要有一点耐心，特别是网络不好的同学。
克隆到本地，这个克隆的话应该都知道吧？
在这里插入图片描述
有一个问题，之前我直接clone他的地址报错了。

原因值因为我没有权限直接下载，所以我登录之后fork到我自己的git空间了。这样才把它clone下来，克隆成功的图片忘记截图了。只能补充拉取的图片。