vue devtools 安装使用（用源码构建）

原创 已于 2023-05-15 11:59:10 修改 · 596 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #chrome devtools

于 2021-03-22 10:39:54 首次发布
本文档记录了如何从源码构建并手动安装Vue DevTools到Chrome浏览器的过程。首先从开源中国克隆Vue DevTools源码，然后使用yarn安装依赖，构建完成后修改manifest.json将persistent设为true。最后在Chrome扩展程序中选择加载已解压的扩展，指向构建后的shell-chrome目录，即可成功安装。

因为chrome 不能直接安装devtool,从网上找的又说什么版本不对的。幸好开源中国那里有源码，可以用源码构建后安装到chrome,亲测可以，因为网上的文章有些出入，所以还是自己写个记录下。

先到这里把 源码 clone 下来 https://gitee.com/mirrors/vue-devtools。

然后 yarn install (如果没有安装yarn的话，自行解决)

最后构建 yarn run build，

然后修改packages\shell-chrome下的文件manifest.json，把persistent 改为true 就o了
在这里插入图片描述

在这里插入图片描述

如果没有问题的话，就打开chrome 浏览器，在扩展程序那里选择加载已解压的程序

选择packages\shell-chrome 目录。然后就成功了

我这里是构建成功的图片在这里插入图片描述

vue_dev_tools工具下载安装打包
qq_45740503的博客
02-13 1104
vue_dev_tools工具下载安装打包
Vue DevTools使用源码编译生成插件
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-28 1413
然而，有时候我们可能需要对DevTools做一些定制化的修改，或者仅仅是出于学习的目的，想了解它是如何工作的。打包则是指将编译后的文件整合在一起，形成一个完整的浏览器插件包。通过以上步骤，你现在已经能够从源码开始编译Vue DevTools，并根据自己的需求进行定制了。在实际工作中，编译和打包Vue DevTools不仅可以帮助我们更好地理解其内部工作机制，还能让我们根据项目需求对其进行定制。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。
谷歌浏览器 chrome vue 调试插件 vue-devtools 及源码
05-04
谷歌浏览器 chrome vue 调试插件 vue-devtools chrome（谷歌浏览器）vue代码调试插件， 已打包。解压后，通过chrome扩展程序加载即可使用。 使用方法： 1、chrome浏览器输入地址“chrome://extensions/”进入扩展程序页面 2、勾选开发者模式 3、点击“加载已解压的扩展程序...”按钮，选择解压后的chrome文件夹，即可添加成功。 4、添加完vue-devtools扩展程序之后，我们在调试vue应用的时候，chrome开发者工具中会看一个vue的一栏，点击之后就可以看见当前页面vue对象的一些信息
vue-devtools:配置好的vue-devtools源码，可以直接在谷歌浏览器上面使用扩展程序
03-23
Vue-Devtools- 已用npm处理过，已配置过原始文件，直接拿来用即可
vuetools安装
qq_45228330的博客
11-01 7268
vuetools安装 一、安装步骤 1.下载压缩包Vue.js+Devtools_5.3.3_chrome.cn.crx（一定是crx结尾），直接解压到你想要的目标文件 链接：百度云连接（bj16） 2.打开Chrome浏览器的 设置 =》点击拓展程序 3.进入如下界面，可以看到我们已经安装的插件，这是我们需要打开右上角的开发者模式 4.点击加载已解压的拓展程序 =》选择目标文件 =》点击选择文件夹 第一步： 第二步 第三步 5.这时在Chrome中可以看到以下图标。 6.刷新后右上角出现vue的拓
vue-tools安装
杰子的世界
04-03 534
vue-tools安装 在github上拉取代码 切换分支到master 执行npm install 执行npm run build 修改shells目录下的mainifest.json 中的persistent为true 打开谷歌浏览器的设置—>扩展程序，并勾选开发者模式 然后将刚刚编译后的工程中的shells目录下，shells文件夹下的整个chrome文件夹直接拖拽到当前浏览器中，并...
vue devtools的安装与使用教程
10-18
1. 访问Vue DevTools的GitHub官方页面：***，下载最新版本的Vue DevTools源码压缩包。 2. 解压下载的文件到你本地的某个磁盘目录。 3. 打开命令行工具，切换到解压后的Vue DevTools源码文件夹路径。 4. 在命令行中...
精选资源
vue-devtools安装包
06-04
在使用“vue-devtools安装包”时，通常需要首先确保已经安装了对应的浏览器扩展。在Chrome或Firefox等浏览器中，可以通过访问Chrome Web Store或Mozilla Add-ons Store来安装。然后，在Vue应用程序运行时，打开...
精选资源
vue-devtools-5.3.4.zip
06-06
在使用Vue DevTools之前，你需要确保已经安装了Chrome浏览器，并且你的Vue.js应用正在运行。然后，你可以按照以下步骤安装Vue DevTools 5.3.4: 1. 首先，你需要从一个安全的源下载Vue DevTools的CRX文件，如Chrome ...
精选资源
chrome插件 vue-devtools离线安装包
04-27
Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。它以其简单易学、灵活和高效的特点深受开发者...同时，通过源码编译和离线安装，你还可以更深入地理解Vue Devtools的内部工作原理，进一步提升技术水平。
vue-devtools
03-29
vue-devtools 电子devtools扩展，用于调试Vue.js应用程序。 安装 $ yarn add vue-devtools -D # or npm $ npm install vue-devtools --save-dev 用法 正在安装 在main.js调用install const { app } = require ( 'electron' ) app . on ( 'ready' , ( ) => { // ... if ( process . env . NODE_ENV !== 'production' ) { require ( 'vue-devtools' ) . install ( ) } // ... } ) 解除安装 在main.js调用uninstall const { app } = require ( 'electro
vue devtools源码下载、编译、安装
weixin_43813017的博客
05-26 973
vue devtools源码下载、编译、安装一：下载源码二：安装依赖三：编译四：放入谷歌浏览器 一：下载源码 去vue官网的github，下载开发者工具源码； 链接: https://github.com/vuejs/vue-devtools. 二：安装依赖 yarn init（可能时间比较长，源码中提供的就是yarn安装） yarn安装: 链接: https://classic.yarnpkg.com/zh-Hans/docs/install#windows-stable. 下载msi文件一路点下去就
vue-tools插件安装
weixin_42215834的博客
05-19 2121
“极简插件“下载dev-tools插件 下载到本后，解压插件，打开chrome扩展程序，将解压后的插件拖到页面，扩展模式页面打开"开发者模式"
安装vue-devtools
sinat_29009169的博客
05-07 764
1.现根据这篇文章 https://segmentfault.com/a/1190000009682735?utm_source=tag-newest 2.crx安装不了按照这篇文章做 https://blog.youkuaiyun.com/yingzi10101118/article/details/84938585
Vue之安装Vue.js devtools
weixin_41377877的博客
11-11 805
Vue.js devtools调试工具的安装
手动安装vue-devtools
weixin_33690963的博客
04-20 546
找到vue-devtools项目，并将项目clone到本地 git clone github.com/vuejs/vue-d…安装项目需要的npm依赖包 npm install 或 cnpm install编译项目 npm run build添加至chrome浏览器 浏览器地址栏中输入 chrome://extensions/ 进入扩展程序页面点击“加载已解压的扩展程序”按钮，选择vue-devt...
第1期｜【源码】你不知道的vue-devtools！
rbgg_mp的博客
08-12 1279
这是一篇学习笔记????，大佬说了要知其然，知其所以然 学习后可以知道： 如何解决该功能报错问题 如何调试学习源码 launch-editor-middleware、launch-editor等实现原理 关于 vue-devtools 没看这个原理之前我只知道： 在Vue项目开发中，需要监控项目中得各种值，为了提高效率，Vue提供了一款浏览器扩展——VueDevtools。 下载这个工具需要科学上网，去下载。下载好了以后凡是用vue构建的项目这个图标都会亮起来。 其实vue-devtools
Vue调试工具dev-tools的安装
L666Q的博客
03-09 542
一、下载 使用git克隆命令：gitclone，这里给出克隆连接，可以直接克隆：https://github.com/Lq304/Chrome
安装Vue Devtools调试工具和Vue命令行工具
sijg16的博客
01-12 5164
1、在github下载devtools源码 https://github.com/vuejs/vue-devtools 2、在cmd窗口下安装相关工具包 1）、在Windows下安装node.js https://nodejs.org/en/ 下载稳定版并安装，之后在cmd中输入node -v查看是否已经安装成功 ，如果有版本号显示，则代表安装成功；由于node.js
Vue Devtools安装与使用全指南及源码解析
本文标题《Vue Devtools安装使用指南[项目源码]》明确指出其核心内容是围绕 Vue Devtools 的完整使用流程展开，从安装配置到功能应用，再到高级技巧与问题排查，是一份系统性极强的技术指导文档。结合描述信息可知，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值