【vue】安装vue-devtools 详细教程

最新推荐文章于 2024-05-07 09:31:15 发布
最新推荐文章于 2024-05-07 09:31:15 发布
阅读量425 收藏 1
点赞数 2
分类专栏： vue专栏 文章标签： chrome vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46317579/article/details/112849355
版权

安装vue-devtools 详细教程

一、下载源码

先从github上下载源码到本地 github源码下载地址，点击下载
在这里插入图片描述

二、安装程序

先将下载的zip解压，找到vue-devtools-master文件目录，直接在地址栏输入cmd命令，弹出窗口 进行npm install 安装
在这里插入图片描述
安装完成后执行命令打包 npm run build
在这里插入图片描述

三、配置浏览器

打开谷歌，找到设置-》扩展程序
在这里插入图片描述
打开开发者模式，选择加载已解压程序
在这里插入图片描述
选择此路径如下：
在这里插入图片描述
会看到此页面
在这里插入图片描述

三、启动程序测试

在这里插入图片描述
大功告成！

森林一鸟啄木
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue中devTools插件安装教程
weixin_62897746的博客
10-01 7479
为了更方便的在开发过程中对 Vue 程序进行调试，除了传统的浏览器自带的 debug 工具以外，我们还可以通过一些专门为 Vue 提供的扩展插件来进行调试
【Vue】全家桶之vue-devtools
指错||纠正||建议||水评+点赞&&评论&&关注&&转发，在这里你大概率会有所收获
08-08 7336
Vue Devtools 是 Vue 官方发布的调试浏览器插件，可以安装在 Chrome 和 Firefox 等浏览器上，直接内嵌在开发者工具中，使用体验流畅。Vue Devtools 由 Vue.js 核心团队成员 Guillaume Chau 和 Evan You 开发。
2024年最全vue调试工具vue-devtools安装及使用(支持vue3版本)(1)，面试完腾讯我才发现这些知识点竟然没掌握全
最新发布
2401_84619467的博客
05-07 1358
全网独播-价值千万金融项目前端架构实战从两道网易面试题-分析JavaScript底层机制RESTful架构在Nodejs下的最佳实践开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】一线互联网企业如何初始化项目-做一个自己的vue-cli思维无价，看我用Nodejs实现MVC代码优雅的秘诀-用观察者模式深度解耦模块前端高级实战，如何封装属于自己的JS库VUE组件库级组件封装-高复用弹窗组件cd devtools-6.0.0-beta.153.安装所需npm依赖包，这里建议用国内淘
安装vue 谷歌插件vue-devtools-dev
sodakii的博客
03-29 719
【代码】安装vue 谷歌插件vue-devtools-dev。
如何安装vue3版本的Vue Devtools
2301_79534935的博客
01-10 728
了，我在下载的时候使用的是国外的镜像源导致网络非常慢，最终也是没有成功安装，建议大家使用淘宝的镜像源，切换完镜像源之后，我也是成功的安装了，接着我们就来进行。下载完之后，我们需要将它进行解压，解压完后如下图。将这个目录下的文件夹拖进扩展程序的页面就行了。执行完这行命令之后也就算编译完了。执行完以上之后，命令行是这样的。，就可以在检查的界面看到我们的。这个时候我们就要去看看自己的。想要使用它的话，需要找到在。，会为此下载一个调试工具。具体怎么安装可以参考以下。以上命令如果没有安装。
Vue3-devtools开发者工具制作与安装
2301_81591899的博客
04-12 1649
学习Vue3自然离不开调试工具Vue3-Devtools，所以我们需要来下载这个调试工具并放入谷歌浏览器里的扩展程序里面。帮助我们更好的调试vue3里的程序。
vue-devtools
03-27
在Chrome、Firefox等主流浏览器上安装Vue Devtools后，开发者可以在浏览器的开发者工具中找到Vue标签页。这个标签页分为以下几个部分： 1. **组件树**：展示了应用中的所有Vue组件及其嵌套关系。你可以查看每个组件...
Vue调试神器vue-devtools.zip
12-26
安装Vue Devtools非常简单，只需在Chrome或Firefox的Web扩展商店搜索"Vue Devtools"，然后按照提示进行安装即可。在实际的项目开发中，它将是你不可或缺的伙伴，帮助你轻松应对各种Vue应用的调试挑战。
vue-devtools-5.1.1
12-29
这个"vue-devtools-5.1.1"版本是Google开发的Vue DevTools的一个特定版本，主要用于支持Vue.js 2.x的应用。 Vue DevTools 5.1.1 版本主要特性包括： 1. **组件树视图**：展示应用中的所有Vue组件及其层级结构，...
vue-devtools-5.1.1.zip
04-23
在github链接上面直接下载的vue-devtools 不可用，我这里在分支里面下载的，5.1.1版本可用的。 使用方法 切换到根目录 cnpm install，然后 npm run build，再 修改shells\chrome 目录下的manifest.json 里面的 ...
谷歌浏览器vue插件vue-devtools
04-10
安装和使用都非常简单，只需在Chrome浏览器的扩展程序页面搜索“Vue Devtools”，然后点击添加到浏览器即可。对于任何 Vue.js 开发者来说，这都是必备的工具之一。 在开发过程中，结合Vue CLI（Vue命令行工具）和...
vue devtools的安装与使用教程
12-08
一.在github上下载压缩包，github下载地址：https://github.com/vuejs/vue-devtools 二.解压到本地的某盘 三.用你的npm中进入该文件夹下 四.依次输: 1:npm install 2:npm run build         (这一步一定不要忘了，没有执行这一步的话，项目文件夹shells>chrome文件夹里会少一个src文件夹,如下图) 五：修改shells>chrome文件夹下的mainifest.json 中的persistant为true 六：我们找到谷歌浏览器的扩展程序功能，勾选开发者模式，然后我们将插件文件夹里的shells>
Vue-Devtools--master.rar
05-28
vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。
vue-devtools的安装
chenhaiy的博客
03-25 9644
vue-devtools的安装 vue-devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展，可以在浏览器开发者工具下调试代码。前端开发工程师应该比较熟悉这款工具，可以边侧边栏窗格中的页面，边检查代码。由于vue是数据驱动的，所以就会存在在开发调试中查看DOM结构并不能看到我们想看到的内容，那么借助vue-devtools插件，我们就可以很容易的对数据结构进行解析和调试。 本文重点介绍vue-devtools安装方法，提供chrome插件直接安装方法。接下来
Vue DevTools 使用指南 - 如何安装和使用 Vue DevTools 调试 Vue 组件
蒋川@卡拉云
04-02 2万+
Vue Devtools 是 Vue 官方发布的调试浏览器插件，可以安装在 Chrome 和 Firefox 等浏览器上，直接内嵌在开发者工具中，使用体验流畅。Vue Devtools 由 Vue.js 核心团队成员 Guillaume Chau 和 Evan You 开发。
vue-devtools安装
大连赵哥的博客
06-10 204
vue-devtools安装
图文详解vue.js devtools插件使用方法
热门推荐
xsq123的专栏
06-19 4万+
本文重点介绍Vue.js devtools使用方法，提供chrome插件直接安装和源代码安装两种方法，你还可以在其中找到常见问题即安装之后“vue.js not detected“的解决办法。
Vue Dev Tools安装
m0_37846059的博客
01-11 711
打开chrome浏览器，输入chrome://extentions/进入扩展程序，打开开发者工具。cd到vue devtool的下载解压目录，然后用cnpm install安装。路径要改成根据实际情况生成的目录，我生成的目录都在src下，不是在build下。下载后解压，然后将解压后的crx文件直接加入到chrome的扩展程序中直接安装。打开开发者工具可以看到vue页签，在这个页签中可以进行调试。cnpm安装成功，则可以直接安装vue devtool。但是通过这种方式安装的vue图标不亮，不能使用。
如何安装vue的dev-tools插件
weixin_49827467的博客
07-17 1161
4、打开Chrome浏览器，右上角的设置三点图标——更多工具——扩展程序——打开开发者模式。6、等待会，出现vue.js的图标，选择加入扩展程序；这个时候插件已经成功安装了；5、把解压好的dev-tools插件拖到 Chrome浏览器；2、搜索Vue，选择——Vue Devtools。7、点击插件详情，找到允许访问文件网址，打开；8、关闭浏览器，重新启动项目，就可以使用啦；3、点击推荐下载，解压。1、百度搜索极简插件。
EDG安装Vue插件vue-devtools(图文详细教程)
05-12
安装Vue插件vue-devtools，你需要按照以下步骤进行操作： 步骤1：安装Vue CLI 首先，你需要在本地安装Vue CLI。你可以在终端或命令行中运行以下命令来安装Vue CLI： ``` npm install -g @vue/cli ``` 步骤2：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值