小记：vuejs的devtools的安装（源码安装）

最新推荐文章于 2024-06-21 10:25:22 发布
最新推荐文章于 2024-06-21 10:25:22 发布
阅读量494 收藏
点赞数
分类专栏： devtools 文章标签： devtools
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16858683/article/details/103052901
版权

1、下载代码

git clone https://github.com/vuejs/vue-devtools.git

2、用webstorm/vscode打开源码
3、安装依赖+运行编译代码
npm run dev之后可以再npm run build一下，因为我之后的步骤中出现错误了，所以回头又操作了一波npm run build
在这里插入图片描述
4、更改文件属性
在这里插入图片描述
在这里插入图片描述
4、打开浏览器-扩展程序
将源码shell->chrome的文件夹拖进去就OK了
在这里插入图片描述

来自东北的大黑猫
关注
专栏目录
vue-devtools安装与使用
天边逐云
05-31 1144
我是先看了这篇文章的：https://segmentfault.com/a/11900000096827351、随便在电脑找个目录/盘，执行上面链接地址的git克隆：git clone https://github.com/vuejs/vue-devtools.git2、我是已经本地安装有npm和cnpm的，所以接下来是我的安装经历克隆完成之后，我是进入克隆的目录项目里面，然后让它自动加载依赖的：...
谷歌浏览器 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源码下载、编译、安装
weixin_43813017的博客
05-26 727
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 DevTools
最新发布
Vinca@的博客
06-21 1938
当你开发 Vue 应用时，Vue DevTools 是一个非常有用的工具，可以帮助你调试、监控和优化你的应用。本文将全面介绍 Vue DevTools 的功能和用法，并提供了一种通过 vue3 快捷安装命令一键安装 Vue DevTools 的方法。此外，还将介绍如何在 VS Code 中使用 Vue DevTools，帮助你更高效地开发 Vue 项目。
安装vue-devtool工具
cofecode的博客
07-06 2084
最近公司在用vue-cli在做项目。下载了一个vue-devtool的谷歌浏览器工具。目前还在摸索中。 安装好了后，必须在vue-cli的项目中打开控制台，才能看到vue的调试工具。在别的普通的网页下，工具的图标是灰色的。点上去的时候，也只是显示Vue.js not detected
Vue.js devtool插件下载安装及后续问题解决
Osborn的博客
07-19 1238
下载 在中国，你是无法使用谷歌应用商店，所以你下载插件，要使用一些别的手段，一种是下载源码编译，另一种是通过第三方网站。第一种不适合小白，所以现在介绍第二组。 下载插件网站 国外网站：https://www.crx4chrome.com/ 国内网站：http://www.cnplugins.com/ 建议使用第一个网址，插件与应用商店同步更新，打开网站后，搜索“Vue.js devtoo...
马古恩:Chrome DevTools主题「Magoon: Chrome DevTools Theme」-crx插件
03-09
您可以在Github上找到Magoon用于其他功能，例如Vscode，Rofi，React DevTools和Alfred：https://github.com/ntwigs/Magoon如何安装--------------- -------------------------------------------添加此主题-Goto ...
devtools-frontend:Chrome DevTools用户界面
03-19
贡献给DevTools： 促成Chrome DevTools协议： DevTools设计审查指南： 源镜 DevTools前端存储库已镜像到。 DevTools前端也可以在软件包中在NPM上使用。目前无法通过CJS或ES模块获得，因此在其他工具中使用此...
devtools-detector:检测DevTools是否打开
05-01
安装 npm install devtools-detector --save 用法 ES6和TypeScript import { addListener , launch } from 'devtools-detector' ; const view = document . createElement ( 'div' ) ; document . body . ...
devtools-terminal：Chrome Devtools中的终端
02-06
Chrome DevTools是Web开发者不可或缺的工具集合，其中的"devtools-terminal"功能为开发者提供了一个集成的命令行界面，使得在浏览器中进行前端开发时能更便捷地执行各种操作。这个终端工具允许开发者直接在浏览器的...
：electron：命令行electronic devtools安装程序-JavaScript开发
05-26
列出已安装的devtools以及已安装的版本。 轻松安装和卸载Developer dti命令行Electron Developer Tools Installer。 列出可用于电子的开发人员工具。 列出已安装的devtools以及已安装的版本。 直接从chrome网站商店...
vue-devtools:配置好的vue-devtools源码，可以直接在谷歌浏览器上面使用扩展程序
03-23
Vue-Devtools- 已用npm处理过，已配置过原始文件，直接拿来用即可
vue-devtools安装工具包.zip
03-23
内附已用npm处理过的vue-devtools工具包，已配置过源码文件，直接拿来用即可。利用vue-devtools工具包安装vue-devtools的具体操作过程可查看博主主页文档，操作简单，便于上手。
安装vue-devtools 详细教程
呀呀呀
11-13 5753
第一步：去github将vue-devtools克隆（clone）到本地，附上网址https://github.com/vuejs/vue-devtools/tree/master 第二步：在vue-devtools-master文件目下， 进行npm install 安装 npm install //也可用cnmp,据网速而定 第三步：找到shells/chrome/manifest.json 文件 将文件中的persistent:false修改 为true 第四步：打包npm run build 第
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-devtools
taozi550185271的专栏
11-28 181
步骤很简单，如下： 第一步：下载或克隆代码： github页面地址 git clone git@github.com:vuejs/vue-devtools.git 第二步：编译第一步的代码包 cd vue-devtools npm install // 或者cnpm install npm run build 第三步：修改配置 修改第二步中的文件夹vue-devtools中的packages\shell-chrome目录下的manifest.json 中的persistent为true 第四步：找到浏览
第1期｜【源码】你不知道的vue-devtools！
rbgg_mp的博客
08-12 1057
这是一篇学习笔记????，大佬说了要知其然，知其所以然 学习后可以知道： 如何解决该功能报错问题 如何调试学习源码 launch-editor-middleware、launch-editor等实现原理 关于 vue-devtools 没看这个原理之前我只知道： 在Vue项目开发中，需要监控项目中得各种值，为了提高效率，Vue提供了一款浏览器扩展——VueDevtools。 下载这个工具需要科学上网，去下载。下载好了以后凡是用vue构建的项目这个图标都会亮起来。 其实vue-devtools
下载、编译、安装、使用 vue-devtools
热门推荐
weixin_59916662的博客
10-17 2万+
下载、编译、安装、使用vue-devtools
vue devtools 安装使用（用源码构建）
suject的专栏
03-22 474
因为chrome 不能直接安装devtool,从网上找的又说什么版本不对的。幸好开源中国那里有源码，可以用源码构建后安装到chrome,亲测可以，因为网上的文章有些出入，所以还是自己写个记录下。 先到这里把 源码 clone 下来 https://gitee.com/mirrors/vue-devtools。 然后 yarn install (如果没有安装yarn的话，自行解决) 最后构建 yarn run buid， 然后修改packages\shell-chrome下的文件manifest.json，
Vue DevTools 安装全攻略：从git到Chrome扩展
这篇文档提供了一个详细的安装和配置指南，以便开发者能够顺利地将 Vue DevTools 与 Chrome 浏览器集成。 首先，从官方仓库克隆 Vue DevTools 的源代码，通过命令行执行以下步骤： 1. **步骤一：克隆源代码** ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值