在Chrome浏览器中配置vue-devtools调试工具

最新推荐文章于 2024-08-21 15:39:12 发布
最新推荐文章于 2024-08-21 15:39:12 发布
阅读量1.6w 收藏 5
点赞数
分类专栏： 前端工具 文章标签： Vue 调试工具
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mystonelxj/article/details/85246617
版权
前端工具 专栏收录该内容
8 篇文章 16 订阅 ¥39.90 ¥99.00
订阅专栏
本文详细介绍了在Windows环境下，如何从GitHub下载并安装Vue的调试工具vue-devtools。通过解压文件，使用npm安装和构建扩展，最后在Chrome浏览器中加载已解压的扩展，成功启用vue-devtools进行Vue应用的调试工作。
摘要由CSDN通过智能技术生成

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-devtools-dev”，解压缩后文件夹内容如下

3，确保windows系统已安装了npm （如果没有安装，则

了解本专栏 订阅专栏 解锁全文
mystonelxj
关注
专栏目录
订阅专栏
VUE 配置vue-devtools调试工具及安装方法
10-17
vue-devtools是一款基于chrome浏览器的插件，用于vue应用的调试，这款vue调试神器可以极大地提高我们的调试效率。帮助我们快速的调试开发vue应用。这篇文章主要介绍了VUE 配置vue-devtools调试工具及安装步骤 ,需要的朋友可以参考下
Vue超级好用的谷歌浏览器调试工具
10-24
vue超级季好用的谷歌浏览器调试工具，可以直接查看节点内容、vuex数据准状态情况
2024 Vue 生态工具最能打的组合！
最新发布
ll_renlong的博客
08-21 1068
经过 10 年的演进，Vue 已经构建了一个极为丰富且强大的生态系统，本文就来盘点 2024 年 Vue 开发最能打的技术组合！
谷歌浏览器 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对象的一些信息
Chrome浏览器安装vue调试工具
cedricdx的博客
11-05 1521
Chrome浏览器安装vue调试工具Chrome浏览器安装vue调试工具步骤： Chrome浏览器安装vue调试工具步骤： 在Github官网下载vue-devtools压缩包：https://github.com/vuejs/vue-devtools 解压压缩包，然后进入到vue-devtools-master文件夹中； 输入npm install命令进行下载安装； 安装完之后...
vue项目源码调试方法 ，chrome调试控制台工作区使用，利用chrome控制台调试vue项目源码的方法 图解
07-19 1096
我们在开发vue项目的时候，项目开始后的第一件事情应该就是准备调试工作了，Chrome调试控制台就给我们提供了这样的一个方便的调试工作区。在这个时候我们再次却换到网页标签，就可以看到有2个vue文件，右下角带绿色标识的就是我们添加的项目中的真正的源码文件，而另外一个则是经过webpack处理后的源码文件。在我们点击允许后，chrome就会自动帮我们却换到工作区标签，同时会以高亮的形式显示我们当前浏览的页面和我们的项目源码的对应关系，如下图。选择之后会有一个提示，点击允许。
Chrome 浏览器安装vue的调试工具
zhoupenghui168的博客
04-11 1095
Chrome 浏览器安装vue的调试工具
Chrome 浏览器安装Vue Devtools调试工具
aInsect的博客
07-07 200
推荐一个超级方便的下载vue-devtools插件的地址吧，再不用这么麻烦https://chrome.pictureknow.com/extension?id=d50143a5f53d406dbe992277bfc90521， 下载拖拽到谷歌浏览器就行了 下载插件 到收藏猫插件下载插件 https://chrome.pictureknow.com 并在浏览器提示中选择【保留】 打开浏览器扩展安装页面 点击浏览器右上角⋮>更多工具> 点击扩展程序 安装插件 在扩展中心打开右上角的【开
chrome安装vue调试工具
l_537的博客
09-06 2180
1. 首先下载Vue Devtools调试工具 [https://github.com/vuejs/vue-devtools/tree/v5.1.1] 2. 复制网址，在浏览器打开按照图示操作 3. 下载成功后解压即可，如下图所示 4. 解压后打开cmd命令切换到G:\Vue Devtools工具\vue-devtools-5.1.1路径下（你们安装的路径自己切换） 5. 切换命令成功后使用命令npm install下载，下载成功如下图所示 6. 然后在npm run build 如下图所示 7
chrome浏览器安装vue调试器vue-devtools
wzq806341010的专栏
11-27 288
1、访问github网址下载调试器 GitHub下载地址：  https://github.com/vuejs/vue-devtools 2、下载vue-devtools完成后打开命令行cmd进入vue-devtools文件夹,输入命令 npm install 3、编译通过以后输入以下命令 npm run build 效果如下图： 4、找到vue-devtools-dev\...
chrome安装 vue调试器 vue-devtools
yingying412的博客
09-13 366
1、首先下载vue-devtools，可从vue官网点击进入 2、下载完成后可打开命令行cmd进入vue-devtools文件夹，或者使用git工具命令行 依次执行下面命令 npm install npm run build / 3、根据目录vue-devtools\shells\chrome 找到manifest文件，打开后修改将”persistent”改为true 4...
vue浏览器调试工具
07-03
一款非常好用的vue浏览器调试工具 开发vue使用的插件 浏览器调试工具
vue-devtools
03-27
在Chrome、Firefox等主流浏览器上安装Vue Devtools后，开发者可以在浏览器的开发者工具中找到Vue标签页。这个标签页分为以下几个部分： 1. **组件树**：展示了应用中的所有Vue组件及其嵌套关系。你可以查看每个组件...
前端vue浏览器插件vue-devtools，前端vue开发
04-10
在前端开发过程中，Vue DevTools 是一个不可或缺的工具，它是Chrome浏览器的一个扩展，专门用于调试Vue.js应用。 Vue Devtools 提供了丰富的功能，帮助开发者深入理解Vue应用的运行机制。以下是Vue Devtools的一些...
chrome插件 vue-devtools离线安装包
04-27
6. 成功加载后，Vue Devtools 将出现在Chrome浏览器的开发者工具中，你可以在打开的Vue应用中使用它进行调试。 Vue Devtools 提供的主要功能包括： - **组件树**：显示应用程序的组件层级结构，可以查看每个组件的...
Vue借助浏览器实现代码断点调试
Bruce小鬼
11-10 3583
当我们在开发前端项目时，肯定会有断点调试的需求。但是前端开发工具似乎没有开发后端项目调试那么方便，因此我们可以借助浏览器实现调试前端项目，它的优势就是不用配置任何插件即可实现。不受开发工具的限制。
浏览器调试vue
qq_45030898的博客
03-09 1418
浏览器调试vue1.场景2.方法 1.场景 我的vue项目需要在浏览器调试（只会这个），但是默认的可能不行 2.方法 在自己的项目vue.config.js文件下的configureWebpack属性下加入devtool: ‘source-map’, configureWebpack: { devtool: 'source-map', }, 重启项目，就可以调试了 ...
Chrome浏览器 安装Vue插件vue-devtools
A_aspectJ的博客
03-30 5142
vue-devtools 是一个为 Vue.js 开发者设计的 Chrome 插件。它可以让你更轻松地审查和调试 Vue 应用程序。与普通的浏览器控制台工具不同，Vue.js devtools 专为 Vue 的响应性数据和组件结构量身定做。
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开发中，推荐大家使用该插件进行调试。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

mystonelxj

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值