vue-devtools安装（图文详细教程）

最新推荐文章于 2024-08-07 09:20:57 发布
最新推荐文章于 2024-08-07 09:20:57 发布
阅读量1.8w 收藏 14
点赞数 2
文章标签： vue vue-devtools
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liqz666/article/details/96111383
版权

1、下载vue-devtools工具

直接在github 上下载解压，网址为https://github.com/vuejs/vue-devtools
运行cmd打开终端，进入到解压后的目录里，windows切盘符命令为D:
进入目录文件为cd ./xxx 显示所有目录为dir
进入解压目录安装npm install 或者cnpm install（npm是node.js的一个插件，如果使用不了请先安装node.js和npm)

切换目录到解压后的目录cd ./vue-devtools-dev

qie在这里插入图片描述

dsaad在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
安装ok ,在google浏览器上输入chrome://extensions/，勾选开发这模式，点击加载已解压的扩展程序，选择vue-devtools>shells下的chrome文件夹。

在这里插入图片描述

在这里插入图片描述
2 点击图标，安装成功 。

源码客栈-逍遥游
关注
谷歌安装vue-devtools插件图文教程
weixin_46566658的博客
11-07 1112
vue-devtools第一步，去github下载插件第二步 解压进入到解压目录，执行npm install第三步 执行命令npm run build出现下图就表示成功啦第四步 打开chrome，选择扩展程序，开启开发者模式，选择解压后的目录下的\vue-devtools-5.1.1\shells\chrome成功啦 第一步，去github下载插件 下载地址点击这里 注意下载方式选择zip，直接使用clone方式我试了很多次执行npm run build命令报错 第二步 解压进入到解压目录，执行npm i
Vue devtools插件的快速下载和安装
DE的个人原创笔记
05-16 1475
超详细图文教程
Vue-DevTools安装教程.docx
08-18
vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装。本文件Vue-DevTools插件的详细安装过程
vue-devtools安装教程
xuan的博客
02-15 4088
一、前置环境（已安装好node，npm） 二、获取工具项目 文件 · dev · mirrors / vuejs / vue-devtools · GitCode⚙️ Browser devtools extension for debugging Vue.js applications. ???? Github 镜像仓库 ???? 源项目地址 https://gitcode.net/mirrors/vuejs/vue-devtools/-/tree/devhttps://github.com/vuej
Vue.js Devtools 使用教程
最新发布
gitblog_00895的博客
08-07 857
Vue.js Devtools 使用教程 devtoolsvuejs/devtools: Vue.js 开发者工具，这是一个浏览器插件，可以安装在 Chrome 和 Firefox 等现代浏览器中，用于调试 Vue 应用程序，提供了组件树查看、状态快照、时间旅行等高级调试功能。项目地址:https://gitcode.com/gh_mirrors/de/devtools 项目介绍 Vue.js ...
【vue】安装vue-devtools 详细教程
weixin_46317579的博客
01-20 526
安装vue-devtools 详细教程
vue----devtools安装教程
热门推荐
cx_carol的博客
06-20 1万+
网上看了很多教程，但是大多都有问题，上下文矛盾的那种，这一篇是我安装完成后写的。 一、准备工具 在安装dectools之前我们需要先安装node.js ，准确来说是工具npm。这一步大家自行查找，网上的内容都比较全面。 二、下载devtools工具安装包 github的下载地址:https://github.com/vuejs/vue-devtools 这个就是官方的下载地址，大家可以放心下载。 下载好后解压到本地文件夹，记得务必解压。 打开cmd窗口，从cmd中进入解压的vue-devtools-mas
Vue的devtools安装教程
wytccc的博客
11-24 1145
打包成功之后，进入packages/shell-chrome，记事本打开manifest.json文件，将persistent改成true，保存。打开一个引入了Vue.js的html页面，F12就能看到增加了一个Vue的选项，以后在编写Vue代码的时候，可以在这里快速的调试代码。① 如果使用npm run build打包的话，会报错如下，要求使用yarn run build来打包。安装yarn（用npm在打包的时候会失败，使用yarn可以打包成功）安装依赖（时间挺长，耐心等待）去github上拉取工具包。
vue-devtools-dev(带详细图文安装教程).7z
09-18
附有中文安装教程的vue开发者工具，使用者只需下载下来按照压缩包里的说明文档安装即可使用。 压缩包内容 1.vue-devtools-dev.zip（可以自行到https://github.com/vuejs/vue-devtools下载） 2.vue-devtools安装指南V...
EDG安装Vue插件vue-devtools(图文详细教程)
05-12
安装Vue插件vue-devtools，你需要按照以下步骤进行操作： 步骤1：安装Vue CLI 首先，你需要在本地安装Vue CLI。你可以在终端或命令行中运行以下命令来安装Vue CLI： ``` npm install -g @vue/cli ``` 步骤2：...
谷歌vue调试工具devtools安装的傻瓜教程（图文详解）
darabiuz的博客
07-12 1536
1.去Chrome的插件网下载Vue.js devtools插件，链接如下 https://www.cnplugins.com/devtool/vuejs-devtools/ 2.下载完成之后会得到以下文件 我们点击重命名，将文件后缀改为.rar,把文件修改为以下形式 3.点击鼠标右键，选择解压到“…” 得到以下解压过后的文件夹 4.进入谷歌浏览器界面，点击右上角竖着的三点，点击‘“更多工具—拓展程序” 5.点击加载已解压的拓展程序，把我们刚刚解压的文件夹拖进来 5.安装成功 6.进行测试，
vue安装教程
10-16
Vue安装 简洁易懂新手完全填坑攻略——从环境搭建到发布。
vue-devtools安装教程 （Chrome浏览器）
Odyssey_kd的博客
03-03 2432
2024年最新安装vue-devtools方法
vue-devtools的安装
mengran_code的博客
09-24 260
(前提是安装了node)。新建一个文件夹，然后执行。工程，就能在控制台看到。谷歌浏览器的扩展程序。
Vue调试工具vue-devtools的安装步骤和使用
UNDEFINED_AUBE的博客
08-20 5010
题外话：这个是vscode快捷方式总结的网站，忘了可以查一下https://www.cnblogs.com/bindong/p/6045957.html   1、到github上下载压缩包 https://github.com/vuejs/vue-devtools   2、解压到D盘（我是在D盘下又建了一个文件夹来放，可以直接解压在D盘根目录）， 打开cmd，用npm在vue-...
Vue调式工具——vue-devtools插件下载安装 手把手教程！
weixin_44042442的博客
02-25 5847
下载安装vue-devtools工具插件 ；Chrome浏览器下载安装vue调试工具；vue调试工具安装
【Vue-devtools】Vue调试工具vue-devtools安装教程（亲测，避坑指南）
Owen的博客
10-30 1193
前言：安装时参考了网上的一系列文章，但还是反反复复几次才安装成功，下面说下踩过的坑。 一、下载 地址：https://github.com/search?q=vue-devtools git clone https://github.com/vuejs/vue-devtools.git 二、安装依赖包（npm install） 网上的文章说，要切换到 master 分支，去操作。所以我先 git branch 查看一下分支，发现只有 dev 分支，所以前面几次都放弃了。后来运行 git .
vue devtools调试工具安装（详细）
weixin_46911985的博客
02-06 2470
下载完成后，进入该文件下的node_modules 文件，找到 vue-devtools 文件，进入此文件夹，将其中vender 文件夹下的 manifest.json文件 进行编辑，修改persistent 为 true，保存文件。最后将vender 文件拖至浏览器的扩展程序中，重启浏览器就可以使用了。打开浏览器找到扩展程序（以谷歌为例），并勾选开发者模式，点击出现的“创建一个空的文件夹，命名最好可以见名知意，复制目录后打开命令行。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

源码客栈-逍遥游

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值