Vue调试工具vue-devtools的安装与使用

最新推荐文章于 2024-08-07 09:20:57 发布
最新推荐文章于 2024-08-07 09:20:57 发布
阅读量713 收藏 1
点赞数
分类专栏： Vue 文章标签： vue-devtools vue调试工具
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AiHuanhuan110/article/details/88803447
版权
vue-devtools是提升Vue应用调试效率的Chrome插件。本文介绍了通过插件商店直接安装和手动下载安装的步骤，包括Chrome、Firefox和Safari的安装方式，以及在浏览器中启用开发者模式加载扩展的方法。
摘要由CSDN通过智能技术生成

简介

vue-devtools是一款基于chrome浏览器的插件，用于调试vue应用，以提高调试效率。

插件商店直接安装

Chrome
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

Firefox
https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools

Safari
https://github.com/vuejs/vue-devtools/blob/master/docs/workaround-for-safari.md

手动安装

  1. 在GitHub下载

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

  2. 解压后，进入到该文件夹下，按住shift不放，单击鼠标右键，打开Powershell 窗口

最低0.47元/天 解锁文章
艾欢欢
关注
专栏目录
【Vue】vue-devtools调试工具安装和配置
早睡早起长头发的博客
01-30 972
在浏览器中访问一个使用了 vue 的页面，打开浏览器的开发者工具，切换到 Vue 面板，即可使用 vue-devtools 调试当前的页面。vue 官方提供的 vue-devtools 调试工具，能够方便开发者对 vue 项目进行调试与开发。2. 配置 Chrome 浏览器中的 vue-devtools。3. 使用 vue-devtools 调试 vue 页面。1. 安装 vue-devtools 调试工具。修改完配置项，须重启浏览器才能生效！
vue调试工具vue-devtools安装及使用方法
12-12
一旦安装完成，你可以在开发 Vue 项目时使用 Vue Devtools 进行调试。在 Chrome 浏览器中打开你的 Vue 应用，按下 F12 或者右键单击页面空白处选择“检查”来打开开发者工具，然后在工具栏中选择 Vue 标签页，你将...
vue-devtools的安装与使用
热门推荐
weixin_43843572的博客
05-26 8万+
vue-devtools的安装与使用
Vue.js Devtools 使用教程
最新发布
gitblog_00895的博客
08-07 878
Vue.js Devtools 使用教程 devtoolsvuejs/devtools: Vue.js 开发者工具，这是一个浏览器插件，可以安装在 Chrome 和 Firefox 等现代浏览器中，用于调试 Vue 应用程序，提供了组件树查看、状态快照、时间旅行等高级调试功能。项目地址:https://gitcode.com/gh_mirrors/de/devtools 项目介绍 Vue.js ...
vue调试工具的安装与使用(vue-devtools)
Mary_Code的博客
10-29 2722
前言 前端开发者比较熟悉的应该就是 F12 浏览器自带的 Chrome调试工具。但在使用vue进行开发时，就会发现Chrome开发调试中查看DOM结构并不能解析出什么，因为vue是数据驱动的。 但是借助vue-devtools插件，我们就可以很容易的对数据结构进行解析和调试。 Vue.js devtools，是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展，在浏览器开发者工具下调试代码，能极大地提高我们的调试效率。目前该扩展在Chrome和Firefox以及Safari中都
Vue调试工具vue-devtools的安装和使用方式
weixin_42896278的博客
01-30 300
Vue调试工具vue-devtools的安装和使用方式 1.下载(vue-devtools下载的是最新版本)。 git clone https://github.com/vuejs/vue-devtools 2.打开vue-devtools所在路径 cd vue-devtools npm install*** 备注：使用该v5.0.0版本，会出现报错，如图 3. 改用低版本的v4版 第一步：...
安装vue调试工具
tuo_tuo_guo的博客
06-15 150
博客链接https://www.cnblogs.com/HouJiao/p/11899679.html
Vue调试工具的安装
m0_53415205的博客
02-04 2969
Vue调试工具的安装 第一种方法： 1、chrome浏览器输入地址“chrome://extensions/”进入扩展程序页面 2、点击右上角按钮，勾选开发者模式 3、点击“加载已解压的扩展程序”按钮，选择解压后的chrome文件夹，或直接将解压文件拖入窗口，即可添加成功。 4、添加完vue-devtools扩展程序之后，浏览器打开vue项目便可调试， 安装包链接：https://pan.baidu.com/s/1WmYbIKMkXy9fKSQcD2hdsQ 提取码：poz7 第二种方法： 1.http
Chrome如何安装vue-devtools调试工具
liu320yj的博客
07-06 628
vue是现在前端开发很流行的框架，开发vue项目需要先安装好调试工具vue-devtools，正如工欲善其事必先利其器，现将安装过程总结如下 下载vue-devtools源码 打开github地址，选择master分支 下载源码 下载的源码如下 解压源码，用超级管理员权限打开命令行，进入源码路径 执行npm install命令安装依赖 将vue-devtools-master/shells/chrome/manifest.json文件中的"persistent": false修改为"persist
VUE开发者工具，vue-devtools-4.1.4_0。
04-16
Vue.js 是一款流行的开源前端JavaScript框架，由尤雨溪创建，用于构建用户界面。Vue DevTools 是一个强大的浏览器扩展，专为Vue.js...如果你是Vue.js的开发者，安装并熟练使用Vue Devtools将极大提升你的开发体验。
vue调试工具，vue-devtools.rar
11-18
这个压缩包"vue-devtools.rar"包含了与Vue DevTools相关的文件，让我们逐一解析这些文件的作用和关联知识点。 1. **.browserslistrc**：这是一个配置文件，用于定义项目所支持的浏览器列表。它会影响自动化工具（如...
vue调试工具 （vue-devtools）
06-20
Vue.js 是一款流行的前端JavaScript框架，它用于构建用户...总的来说，Vue Devtools 是Vue开发者不可或缺的辅助工具，极大地提高了开发效率和调试体验。熟练掌握其用法，能够帮助开发者更好地理解和优化Vue应用程序。
Vue的调试工具安装
qq_44741577的博客
02-02 640
只有在含有Vue的网页中才有如下选项。访问极简插件官网搜索devtools。点击 Chrome 浏览器。
vue安装调试工具
我是一枚程序员
01-02 429
只需要下载这个压缩包，谷歌浏览器输入chrome://extensions/。把开发者模式打开，点击加载已解压的扩展程序，选择刚才解压缩的文件包即可，就是这么easy！记录下。 下载地址 链接：https://pan.baidu.com/s/1Is6_-4hLNu4xd9fmPW3UzA 提取码：qjy3 ...
vue的调试工具 vue-devtools 的安装和使用
ko8be24的博客
10-25 627
1.下载devtools，如果没有安装git，请直接访问https://github.com/vuejs/vue-devtools手动下载 git clone https://github.com/vuejs/vue-devtools 2.下载完成之后解压，目录结构如下： 3.使用yarn install 或 npm install 或 cnpm install安装依赖...
vue调试工具vue-devtools的安装
seimeii的博客
04-29 1528
1.vue-detools是什么 1.vue-devtools是一款基于chrome浏览器的插件，用于vue应用的调试 2.这款vue调试神器可以极大地提高我们的调试效率。帮助我们快速的调试开发vue应用。 1.第一步： 我们可以先从github上找到vue-devtools的项目，下载到本地。下载vue-devtools链接。 克隆方法：git clone https://github.com/vuejs/vue-devtools.git 2.第二步： 解压下载好的文件，进入到vue-devto
Vue调试工具vue-devtools安装
潜行IT的博客
08-17 544
手动安装 第一步：找到vue-devtools的github项目，并将其clone到本地. vue-devtools git clone https://github.com/vuejs/vue-devtools.git 第二步：安装项目所需要的npm包 npm install //如果太慢的话，可以安装一个cnpm, 然后命令换成 cnpm install 第三步：编译项目文件 ...
Vue 调试工具 安装教程（无脑安装）
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
01-19 748
在谷歌商店里搜索Vue.js devtools 将其添加至Chrome 添加后即可在扩展程序中查看 并将其开启 将其在页面中显示出来 如果需要在自己写的文件中使用则可以设置允许访问文件网址 最后我们就以在访问自己的文件网址的情况下使用Vue的调试工具了 自我激励 古之立大事者，不惟有超世之才，亦必有坚韧不拔之志。 ...
vue调试工具：vue-devtools安装步骤
qq_44162778的博客
11-11 603
安装成功效果如下图： 安装步骤： 1、在地址栏输入chrome://extensions/ 即可定位到浏览器的扩展程序。 2、点击左上角扩展按钮 3、点击打开谷歌网上应用店 4、搜索Vue.js devtools 这个扩展程序 5、点击添加至谷歌（弹出框选择添加为扩展程序） 6、在浏览器的右上角"拼图碎片"图标 点击会看到vue图标的一个扩展程序 7、图标呈现灰色，提示：Vue.js not detected信息（别慌，接下来就是解决问题咯） 可以重新刷新一下，或重启一下浏览器如不行使用下面方法进行尝
vue调试工具vue-devtools安装及使用
05-10
Vue-devtools是Vue.js官方提供的调试工具，是一款基于浏览器的开发者工具，主要用于Vue应用程序的开发调试，提供了可视化的组件树形结构、数据展示、状态管理等功能，极大地提升了Vue开发效率。 安装： Vue-devtools可通过Chrome Web Store安装。在Chrome地址栏输入chrome://extensions/，打开Chrome扩展程序页面，搜索“Vue.js devtools”并安装即可。 使用： 1. 导入Vue-devtools插件并打开控制台，启动Vue应用程序，右上角出现一个Vue图标，点击即可打开Vue图形化面板。 2. 点击“components”选项卡，展示组件树形结构以及每个组件的props、data、computed、methods等属性和方法。 3. 点击“events”选项卡，展示Vue实例发出的所有事件，包括父子组件之间的事件通信。 4. 点击“vuex”选项卡，展示Vuex store的状态树、getter和mutation。 5. 点击“settings”选项卡，可配置Vue-devtools的行为，如打开或关闭devtools console面板、记录vue动态的更新等等。 6. 右键点击组件，可以选择编辑代码、定位到组件代码位置、实时修改组件props等操作。 总体而言，Vue-devtools是一款功能强大的Vue调试工具，大大提高了Vue开发调试效率。在日常的Vue开发中，推荐大家使用该插件进行调试。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值