正文

vue调试神器vue-devtools的安装(代码片段)

java-studyer  java-studyer  2022-12-10  523

关键词：

Vue调试神器vue-devtools 的安装

问题：为什么要安装该插件：
答案：因为vue是进行数据驱动的，仅仅从chrome浏览器的控制台进行element查看，是看不到数据的动向的。

未安装的情形：

技术图片

浏览器的控制台会提示你：

下载vue DevTools扩展以获得更好的开发体验；（插件的GitHub地址：https://github.com/vuejs/vue-devtools）
您正在以开发模式运行Vue。当为生产部署时，一定要打开生产模式。
更多提示见 https://vuejs.org/Guide/ployment.html。

安装前的准备

因为安装依赖需要Node.js环境。所以，第一件事就是安装Node.js。
安装完成之后，从github的下载地址将该插件下载下来：https://github.com/vuejs/vue-devtools

win系统下nodejs安装及环境配置 - CSDN博客

安装步骤

下载之后，解压文件，然后复制粘贴解压的文件，放在某个盘的某个文件夹下面。我的（D:\\vue-devtools-dev）
然后通过Windows+R这个快捷键打开“运行”对话框，输入cmd，进入命令行。
在命令行内，进入到vue-devtools-master目录下。
先执行npm install命令；（执行过程比较长，请耐心等待...）
执行成功后，再执行npm run build命令；
这两个命令都执行成功，就可以关闭命令行了。
然后进入C:\\Software\\vue-devtools-master\\shells\\chrome目录下，修改mainifest.json 文件中的persistent属性的值为true。（根据自己安装的目录去找mainifest.json 文件）
打开谷歌浏览器 —— 点击右上角纵向排列的三个点选项 —— 更多工具 —— 右上角勾选开发者模式（有的已默认勾选了）—— 加载已解压的扩展程序 —— 找到本地磁盘中vue-devtools-master目录下的chrome文件夹 —— 选择该文件夹并点击确定按钮。

后来才发现，其实安装过程存在进度条的，进度条其实就是图中的#号。（如下图所示）

1.执行npm install命令

技术图片

2.执行npm run build命令

技术图片

3.修改mainifest.json 文件

技术图片

4.打开谷歌浏览器，设置开发者模式，添加扩展程序文件

技术图片

至此，恭喜vue devtools插件已经安装成功！！

注：Vue.js devtools插件在chrome浏览器安装成功后，在浏览器的右上角会存在一个插件图标。

5.启动vue devtools插件

6.打开vue项目,在控制台选择vue：

技术图片

7.点击vue，查看数据

技术图片

可能会遇到的问题

1.在命令行执行npm install时，会长时间停留在fetchMetadata

2.npm install 获取 fetchMetadata 的阶段非常慢，有什么方法可以加速呢？

3.Vue.js devtool插件安装后无法使用，出现提示“vue.js not detected”的解决办法

转自： https://blog.csdn.net/tom0915/article/details/80431335

验证：vue-devtools插件是否按照成功：

技术图片

vue-devtoolsvue调试神器

Vue调试神器vue-devtools安装vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装。chrome商店直接安装vue-devtools可以从chrome商店直接下载安装，非常简... 查看详情

vue学习记录——vue开发调试神器vue-devtools安装

...直没装上，切记！！install后还需build，且install和build都在vue-devtools文件夹内执行github下载地址点击跳转具体步骤：第一步：找到vue-devtools的github项目，并将其clone到本地vue-devtoolsgitclonehttps://github.com/vuejs/v 查看详情

vue调试辅助神器

除了代码中添加debugger，本地用npmrundev之外Chrome的插件vue-devtools对于查看各个组件上的状态值非常有用https://github.com/vuejs/vue-devtools安装在谷歌商店就可以查看详情

vue调试工具vue-devtools安装及使用(代码片段)

本文主要介绍vue的调试工具 vue-devtools的安装和使用工欲善其事,必先利其器,快快一起来用vue-devtools来调试开发你的vue项目吧安装: 1.到github下载：gitclonehttps://github.com/vuejs/vue-devtools 2.在vue-devtools目录下安装依赖包cdvue-de... 查看详情

vue调试工具vue-devtools安装及使用(代码片段)

本文主要介绍vue的调试工具 vue-devtools的安装和使用工欲善其事,必先利其器,快快一起来用vue-devtools来调试开发你的vue项目吧安装: 1.到github下载：gitclonehttps://github.com/vuejs/vue-devtools2.在vue-devtools目录下安装依赖包cdvue-devtoolscnp... 查看详情

vue调试工具vue-devtools安装及使用(代码片段)

本文主要介绍vue的调试工具 vue-devtools的安装和使用工欲善其事,必先利其器,快快一起来用vue-devtools来调试开发你的vue项目吧安装: 1.到github下载：gitclonehttps://github.com/vuejs/vue-devtools2.在vue-devtools目录下安装依赖包cdvue-devtoolscnp... 查看详情

vue调试工具vue-devtools安装及使用具体步骤(代码片段)

vue调试工具vue-devtools安装及使用具体步骤：一、先克隆工具包代码：https://gitcode.net/mirrors/vuejs/vue-devtools.git二、安装:1、安装yarn和镜像，为了节约安装时间：1️⃣npminstall-gyarn2️⃣yarnconfigsetregistryhttps://regis 查看详情

vue(chrome)调试工具vue-devtools安装

vue(chrome)调试工具vue-devtools安装谷歌浏览器chrome的vuejsdevtools插件的安装查看详情

vue的调试工具vue-devtools(代码片段)

一.登录github官网下载vue-devtools压缩包或者打开命令行使用命令直接进入官网，下载zip(注意下载master分支的)（不然会出问题）?https://github.com/vuejs/vue-devtools二.将下载的压缩包解压，进入vue-devtools-master文件夹中，点击“此电脑...... 查看详情

vue-devtools工具的安装

vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装1、登录github，获取到vue-devtools源码并下载下来。https://github.com/vuejs/vue-devtools。 &... 查看详情

通过npm安装vue-devtools（vue的chrome调试工具）

...载chrome的扩展程序包　　github地址：https://github.com/vuejs/vue-devtools2.下载完成后，解压到先关文件夹下。进入vue-devtools文件夹，开始安装项目所需依赖包　　命令：npminstall(如果有国内镜像环境，直接cnpminstall就好了)　　下载成功... 查看详情

vue-调试工具vue-devtools安装及使用

1：直接在谷歌应用商店搜索: Vue.jsdevtools进行安装2：用开发环境的CDN,不要用生产环境的CDN<scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><!--开发环境版本，包含了有帮助的命... 查看详情

vuetify调试工具vue-devtools安装

测试环境Windows764bitsSP1Git2.28.0PyCharm2020.1github下载与编译vue-tools是使用基于vue前端框架的各种组件库进行前端开发的重要调试工具，本文介绍的前端组件库是Vuetify。近期，github.com下载速度很慢，我是选择是早上下载的，昨天上午... 查看详情

vue调试工具vue-devtools安装及使用具体步骤(代码片段)

vue调试的三种方式（debugger+vue-devtools+debuggerforchrome）(代码片段)

...就很不爽，所以还是开启debugger调试的方式。第二种(vue-devtools)这个个人也没搞清楚是怎么调的，反正我是按照网上的方法安装成功，vue的界面也出来了参考的链接：https://www.cnblogs.com/laneyfu/p/11221673.htmlhttps://github.com/vuejs/vue-d... 查看详情

vue的调试工具vue-devtools(代码片段)

vue-devtoools调试工具安装

1.github下载地址：https://github.com/vuejs/vue-devtools有Git的同学直接gitclone https://github.com/vuejs/vue-devtools2.下载安成之后打开cmd进入vue-devtools文件夹把依赖装好npminstall之后再进行npmrunbuild在vue-devtools目录下安装依赖包：- npminstall-&... 查看详情