vue-devtools安装方法

最新推荐文章于 2022-06-08 20:22:36 发布
最新推荐文章于 2022-06-08 20:22:36 发布
阅读量149 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40012232/article/details/98498070
版权

首先去官网提供的链接，打开下载压缩包：
在这里插入图片描述
下载完成后，打开cmd，进入vue-devtools-dev文件夹，在输入命令npm install
在这里插入图片描述
下载完成后，接着输入命令npm run build
在这里插入图片描述
以上步骤完成后，再去修改manifest.json文件
按照此路径找到改文件：vue-devtools-dev\shells\chrome\manifest.json，将persistent的值改为true
在这里插入图片描述
现在打开浏览器，点击浏览器右上角竖向排列的三个点，找到更多工具–>扩展程序，将整个chrome文件，拖拽到扩展程序中，将按钮打开，结果如下：
在这里插入图片描述
点击详细信息，打开允许访问文件网址右边的按钮
在这里插入图片描述
整个安装过程就完成了，接下来重新启动你的vue项目就可以在浏览器上看见了
在这里插入图片描述

淡紫色*
关注
专栏目录
vue-devtools
03-27
在Chrome、Firefox等主流浏览器上安装Vue Devtools后，开发者可以在浏览器的开发者工具中找到Vue标签页。这个标签页分为以下几个部分： 1. **组件树**：展示了应用中的所有Vue组件及其嵌套关系。你可以查看每个组件...
Vue调试神器vue-devtools安装方法
11-29
接下来我们就介绍一下vue-devtools的安装。 安装方式 1.chrome商店直接安装： vue-devtools可以从chrome商店直接下载安装，非常简单，这里就不过多介绍了。不过要注意的一点就是，需要翻墙才能下载。 2.手动...
Vue-devtools安装方法
m0_66711291的博客
06-08 692
devtools的一种安装方法，从git山直接下压缩包实在是行不通了
dev-tool安装方法（手动安装版）
Blog_Bridge
05-30 1860
记录一下vue调试神器dev-tool的安装过程，由于是在公司内网，也不方便挂梯子，所以手动安装——下载源码在本地编译，再添加扩展程序的方式安装。过程如下： 一、dev-tool源码获取 git地址：https://github.com/vuejs/devtools/tree/main 这里可以选择自己需要的版本，试了挺多版本，在安装的时候会遇到各种的文件缺失的问题，所以这里选择了一个v5.1.1版本，这个安装的过程基本比较顺畅，没什么大的问题。 源码下载两种方式，第一种直接用git下载，git访问会出
安装vue-devtools时，npm install总是报错的解决方案
qq_46020783的博客
11-25 2817
在安装vue-devtools时，npm install时总是报错，各种方法都试了，都是不成功，最后在网上找到了这种方法成功了，记录下来。 第一步：创建一个新的空文件夹，最好可以见名知意，进入文件内部，按住shift加右键进去powershell，也可以在cmd中使用cd命令进入此文件夹。 第二步：在终端输入npm install vue-devtools 第三步：下载完成后，会出现一个node_modules文件夹，进入此文件夹，找到其中的vue-devtools文件夹，将其中的vender文件夹拖
vue 调试工具 vue-devtools 的安装使用
iissoftware的博客
06-04 997
vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装。 下载 dev-tools 先到官方github上去下载vue-devtools安装包：传送门. 有 git 的同学也可以使用命令安装: git clone https://github.com/vuejs/vue-d...
vue-devtools插件最简单的安装方式，不需要安装npm环境
yuru974882032的博客
07-12 1379
1、下载 vue-devtools插件 网址：https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd 2、在chrome浏览器中打开扩展程序页面，并打开开发者模式 可以在地址栏输入：chrome://extensions/ 3、将下载好的带crx后缀的文件，直接拖到页面里 安装成功后会出现下图中的vue插件 注：这一步可能会出现crx文件无法安装的情况，可以试一下下面的解决方法 1.将 crx 文件后缀改为 zip 然后解
前端vue浏览器插件vue-devtools，前端vue开发
04-10
安装Vue Devtools 很简单，只需在Chrome浏览器中访问Chrome Web Store，搜索并安装Vue.js Devtools扩展程序。安装完成后，打开一个包含Vue.js的网页，打开开发者工具（F12或右键点击页面选择检查），你就会看到Vue ...
vue调试工具vue-devtools安装及使用方法
12-12
下面我们将详细介绍 Vue Devtools 的安装和使用方法。 ### 安装 Vue Devtools 1. **克隆仓库**：首先，你需要从 GitHub 上下载 Vue Devtools 的源码。你可以通过以下命令克隆仓库： ``` git clone ...
vue-devtools安装（图文详细教程）
liqz666的博客
07-16 1万+
1、下载vue-devtools工具 直接在github 上下载解压，网址为https://github.com/vuejs/vue-devtools 运行cmd打开终端，进入到解压后的目录里，windows切盘符命令为D: 进入目录文件为cd ./xxx 显示所有目录为dir 进入解压目录安装npm install 或者cnpm install（npm是node.js的一个插件，如果使用不了请...
vue-devtools的安装
chenhaiy的博客
03-25 9677
vue-devtools的安装 vue-devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展，可以在浏览器开发者工具下调试代码。前端开发工程师应该比较熟悉这款工具，可以边侧边栏窗格中的页面，边检查代码。由于vue是数据驱动的，所以就会存在在开发调试中查看DOM结构并不能看到我们想看到的内容，那么借助vue-devtools插件，我们就可以很容易的对数据结构进行解析和调试。 本文重点介绍vue-devtools安装方法，提供chrome插件直接安装方法。接下来
最新：解决 Vue 调试工具 dev-tools安装遇到的问题及安装步骤
狮子座的男孩
09-22 8024
1、什么是 dev-tools ？ 答： dev-tools 是 Vue 的调试工具； 在成功安装 dev-tools 后： 其一、可在前端页面中可显示当前点击组件的可用数据； 其二、可以修改和添加数据等信息，且修改和添加信息可实时反映在界面中，非常方便调试一些比较繁琐的业务流程； 其三、可以任意展示其中的一步操作的界面数据等信息； 2、dev-tools 的安装步骤： A、打开 Vue 的 官网： 官网地址为：‘https://cn.vuejs.org/’； (然后选择 Devtools 工具)；
Vue-Devtools安装配置教程（献给伸手党）
热门推荐
weixin_38654336的博客
06-24 7万+
可以先看视频教程：链接最简便的方法是用FQ来通过google应用商店进行安装，但是大多数人还是处在非FQ的状态尝试过安装Node的方法来安装，但是极其不建议用这个方法安装，非常麻烦，而且必须要有node的基础，非常不接地气下面来一个最简便的方法（送给伸手党）：查看过很多博客大多数都是，要安装Vue-Devtools，在一个github下面用git clone或者手动下载一个叫做vue-devtoo...
CPA 税法 基础班 第4章 税目与税率（2）+计税依据（1）.pdf
10-10
CPA 税法 基础班 第4章 税目与税率（2）+计税依据（1）.pdf
Jhipster7.9.3项目
最新发布
10-10
Jhipster
卡车无人机路径优化，卡车带无人机路径优化 车辆无人机路径优化 代码具有可复制性
10-10
卡车无人机路径优化，卡车带无人机路径优化。 车辆无人机路径优化。 代码具有可复制性
Python中基于DEAP框架的遗传算法实现与OneMax问题求解（包含详细的完整的程序和数据）
10-10
内容概要：本文章详细介绍了遗传算法及其核心概念，并以OneMax问题为例展示了使用Python的DEAP框架实现遗传算法的具体步骤，包括适应度函数、选择、交叉、变异等关键环节。 适用人群：面向具有一定编程基础的开发者和技术研究人员。 使用场景及目标：适用于需要解决优化问题的情景，特别是涉及到大规模搜索空间的应用。本篇文章可以帮助读者更好地理解和应用遗传算法。 其他说明：除了基本实现之外还提出了进一步改进的方向，比如参数优化和其他优化算法相结合的方法，以及实现算法的并行处理，以便应对更加复杂的现实世界难题。
Python基于opencv的车牌识别系统源码-可作为毕业设计
10-10
Python基于opencv的车牌识别系统源码-可作为毕业设计，本资源中的源码都是经过本地编译过可运行的，评审分达到98分，资源项目的难度比较适中，内容都是经过助教老师审定过的能够满足学习、毕业设计、期末大作业和课程设计使用需求，如果有需要的话可以放心下载使用。 Python基于opencv的车牌识别系统源码-可作为毕业设计，本资源中的源码都是经过本地编译过可运行的，评审分达到98分，资源项目的难度比较适中，内容都是经过助教老师审定过的能够满足学习、毕业设计、期末大作业和课程设计使用需求，如果有需要的话可以放心下载使用。Python基于opencv的车牌识别系统源码-可作为毕业设计，本资源中的源码都是经过本地编译过可运行的，评审分达到98分，资源项目的难度比较适中，内容都是经过助教老师审定过的能够满足学习、毕业设计、期末大作业和课程设计使用需求，如果有需要的话可以放心下载使用。Python基于opencv的车牌识别系统源码-可作为毕业设计，本资源中的源码都是经过本地编译过可运行的，评审分达到98分，资源项目的难度比较适中，内容都是经过助教老师审定过的能够满足学习、毕业设计、期末大作
Django+Vue校园个人闲置物品换购平台答辩PPT.pptx
10-10
计算机毕业设计答辩PPT
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值