在Goole Chome浏览器上安装vue-devtools调试工具

最新推荐文章于 2024-07-19 10:33:49 发布
最新推荐文章于 2024-07-19 10:33:49 发布
阅读量414 收藏
点赞数
分类专栏： Vue Chrome 文章标签： java 数据结构 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ty_just/article/details/121521523
版权

在Goole Chome浏览器上安装vue-devtools调试工具

一、下载配置vue-devtools

1.下载：下载地址：https://github.com/vuejs/vue-devtools

因为最新版安装会出现问题，所以下载5.1.1版本

image-20211124174626170

2.进入解压后的目录下，打开终端依此执行

npm install  

npm run build

3.修改shells/chrome文件夹下的mainifest.json 中的persistant为true

image-20211124174801173

image-20211124172154045

三、使用chome加载vue-devtools

image-20211124175125634

image-20211124175219895

image-20211124175825823

四、测试

image-20211124180223816image-20211124180146641

有枫来了
关注
专栏目录
在Chrome浏览器中配置vue-devtools调试工具
mystonelxj的博客
12-25 1万+
1，首先在浏览器上打开 地址 https://github.com/vuejs/vue-devtools.git ，在页面上点击 “Clone or Download” 按钮 ，下载相关的 “vue-devtools-dev” 压缩包  2，Windows系统下，解压缩文件“vue-devtools-dev.zip” ,本例解压缩路径为“D:\vue-devtools-dev\vue-dev...
chrome插件 vue-devtools离线安装包
04-27
6. 成功加载后，Vue Devtools 将出现在Chrome浏览器的开发者工具中，你可以在打开的Vue应用中使用它进行调试。 Vue Devtools 提供的主要功能包括： - **组件树**：显示应用程序的组件层级结构，可以查看每个组件的...
vue浏览器调试工具
07-03
一款非常好用的vue浏览器调试工具 开发vue使用的插件 浏览器调试工具
Chrome 浏览器安装Vue Devtools调试工具 (详细教程)
热门推荐
li22356的博客
01-24 5万+
本人认为利用外网安装调试工具插件是最好的，还不会出错，但是缺点也是很简单，你要调试你就要开启外网，所以直接下载调试工具安装虽然很麻烦，但是解决了开启外网才能使用的缺点。 1. 首先下载Vue Devtools调试工具 https://github.com/vuejs/vue-devtools/tree/v5.1.1 之所以安装5.1.1版本的原因就是我安装的过程中出错了，不能安装新版本，为了解决这个错误只能安装5.1.1版本的 安装最新报错信息如下： Error: Cannot find module.
vue项目源码调试方法 ，chrome调试控制台工作区使用，利用chrome控制台调试vue项目源码的方法 图解
最新发布
07-19 1126
我们在开发vue项目的时候，项目开始后的第一件事情应该就是准备调试工作了，Chrome调试控制台就给我们提供了这样的一个方便的调试工作区。在这个时候我们再次却换到网页标签，就可以看到有2个vue文件，右下角带绿色标识的就是我们添加的项目中的真正的源码文件，而另外一个则是经过webpack处理后的源码文件。在我们点击允许后，chrome就会自动帮我们却换到工作区标签，同时会以高亮的形式显示我们当前浏览的页面和我们的项目源码的对应关系，如下图。选择之后会有一个提示，点击允许。
vue-devtools是vue浏览器调试工具
weixin_44038355的博客
03-14 172
第一步:使用git命令，clone vue-devtools项目到本地 git clone https://github.com/vuejs/vue-devtools.git 第二步:安装依赖包 npm install 第三步:编译 cd vue-devtools npm run build 第四步:修改配置文件 把"persistent":false改成true 第五步:拉入chrome...
Chrome插件：​Vue.js Devtools 高效地开发和调试
朱雀随云记的博客
06-25 1451
Vue.js Devtools是一个Chrome DevTools扩展，专门用于调试Vue.js应用。安装这个扩展后，你会在Chrome开发者工具中看到一个新的标签“Vue”，通过它可以直观地查看和操作Vue.js组件，极大地提升了调试效率。
vue浏览器调试工具.zip
09-01
vue-devtools是一款谷歌浏览器的调试插件，由于种种原因，对国人安装不太友好。下载此资源只需要解压后，在谷歌浏览器中添加此扩展即可。 添加方式：游览器输入地址“chrome://extensions/”进入扩展程序页面，点击“加载已解压的扩展程序”，并选择解压的文件夹目录，重启浏览器。
vue调试工具vue-devtools安装及使用方法
12-12
5. **安装 Chrome 扩展**：打开谷歌浏览器，进入扩展程序页面（`chrome://extensions/`），开启开发者模式，然后点击“加载已解压的扩展程序”，选择 `vue-devtools/shells/chrome` 文件夹，这样就成功安装了 Vue ...
谷歌浏览器vue插件vue-devtools
04-10
安装和使用都非常简单，只需在Chrome浏览器的扩展程序页面搜索“Vue Devtools”，然后点击添加到浏览器即可。对于任何 Vue.js 开发者来说，这都是必备的工具之一。 在开发过程中，结合Vue CLI（Vue命令行工具）和...
谷歌浏览器 chrome vue 调试插件 vue-devtools 及源码
05-04
谷歌浏览器 chrome vue 调试插件 vue-devtools ...4、添加完vue-devtools扩展程序之后，我们在调试vue应用的时候，chrome开发者工具中会看一个vue的一栏，点击之后就可以看见当前页面vue对象的一些信息
Chrom浏览器Vue调试插件最新版本VueDevTools-5.3.3
05-27
VueDevTools-5.3.3，Chrom浏览器Vue调试插件目前最新版本，可再开发这工具中进行vue的前端代码调试工作 Chrome and Firefox DevTools extension for debugging Vue.js applications.
Vue devtools Chrome插件
01-17
vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率
Vue开发调试工具插件chrome.zip
06-04
前端开发调试插件，Vue调试插件，Vue.js devtools Chrome插件下载，直接加压按步骤添加即可使用
前端 Vue 浏览器调试工具 Vue.js devtools 安装
qq_46490956的博客
08-29 3471
前端 Vue 浏览器调试工具 Vue.js devtools 安装
Vue调试工具
Rust94的博客
05-04 363
<script type =“text / javascript”src =“http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.0.0.0”> </ script> var vConsole = new VConsole（）; 引用上面两行代码就可以使用Vue的调试工具...
谷歌浏览器安装vue工具 devtools
buukyjmvni的博客
04-12 1606
1、官网下载压缩包，或者直接克隆，这里我采用的是克隆 git clone https://github.com/vuejs/vue-devtools.git 2、直接在终端yarn install安装依赖 ps（注：识别不了yarn命令的先用npm安装yarn ==>npm install -g yarn ） pps（如果识别不了npm 请去先把node安装了） 3、继续输入命令yarn run build 4、在克隆项目的这个文件夹里找到packages，里面有一个shell-chrome，
Vue----Vue的调试工具
emmmm.....
04-28 2968
文章目录Vue的调试工具 Vue的调试工具 vue-devtools vue官方提供的调试工具，能够方便开发者对vue项目进行调试与开发。 vue-devtools官网 Vue.js devtools - Crx4Chrome插件下载 Microsoft Edge 浏览器中 Vue.js devtools 插件安装与使用 … GitHub - vuejs/devtools: ⚙️ Browser devtools extension … Vue2和Vue3的浏览器调试工具不能交叉使用，即Vue2调试工具只
Vue项目调试器--在chome浏览器上安装vue-devtools调试工具
朽木自雕的博客
08-11 4768
在chome浏览器上安装vue-devtools调试工具 Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展，可以在浏览器开发者工具下调试代码。 步骤如下: 首先在github下载devtools源码，地址：https://github.com/vuejs/vue-devtools 下载好后解压，进入vue-devtool...
谷歌安装vue-devtools以及上线项目关闭vue-devtools调试
08-10
安装完成后，您可以在 Chrome 浏览器的扩展程序栏中找到 Vue Devtools 图标。点击该图标，您将能够在开发者工具中查看 Vue 组件树、状态和事件等信息。 关于上线项目时如何关闭 Vue Devtools 的调试功能，您可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值