Chrome安装vue-devtools

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

vue-devtools

Vue开发项目常用的一款谷歌浏览器插件
在这里插入图片描述

安装步骤

  1. git地址

官网地址：https://github.com/vuejs/vue-devtools.git（不好用￣ヘ￣）

//这个可以~~
https://gitee.com/zhang_banglong/vue-devtools.git
  1. 文件夹如下图：
    在这里插入图片描述
  2. 打开终端，依次输入以下命令
npm install

npm run build

  1. 打开vue-devtools文件夹，找到shells文件夹
    在这里插入图片描述

  2. 打开shells文件夹，找到Chrome文件夹
    在这里插入图片描述

  3. 打开谷歌浏览器，找到扩展程序
    在这里插入图片描述

  4. 选中刚才找的chrome文件夹

  5. 出现以下页面，就搞定了~~
    在这里插入图片描述

  6. 打开vue项目运行起来，F12打开控制台
    在这里插入图片描述

偷一只猪ma
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
下载、编译、安装、使用 vue-devtools
weixin_59916662的博客
10-17 2万+
下载、编译、安装、使用vue-devtools
Chrome插件vue-devtools的安装使用
chenjineng的博客
07-12 7532
安装教程请参考这篇博客：在浏览器上安装 Vue Devtools工具 安装完成后，打开vue项目，chrome浏览器右上角会出现这个图标 按F12启动调试程序，会发现选项中多了一项Vue   如果安装完成，但控制台中并没有Vue的选项，请检查在Vue项目中是否以cdn的方式引入vue.js 如果以cdn的方式引入vue.js，点击浏览器右上角的vue图标会出现这样的提示， ...
vue-tool.zip
09-15
vue的浏览器插件,直接解压拉到chrome应该就能用,没有做过相关测试,不知道能不能用,大概率能用
vue-devtools的安装与使用
热门推荐
weixin_43843572的博客
05-26 8万+
vue-devtools的安装与使用
Vue DevTools
最新发布
Vinca@的博客
06-21 1169
当你开发 Vue 应用时，Vue DevTools 是一个非常有用的工具，可以帮助你调试、监控和优化你的应用。本文将全面介绍 Vue DevTools 的功能和用法，并提供了一种通过 vue3 快捷安装命令一键安装 Vue DevTools 的方法。此外，还将介绍如何在 VS Code 中使用 Vue DevTools，帮助你更高效地开发 Vue 项目。
vue-devtools-简介、下载、安装、配置、使用
记录和分享属于我的“IT”时光
03-21 2万+
vue-devtools-简介、下载、安装、配置、使用
下载并安装vue-devtools（详细步骤）
m0_48355180的博客
08-28 2万+
1,访问github地址：https://github.com/vuejs/devtools下载安装包（zip）； 2，进入到解压后的vue-devtools包中，在文件夹路径中打开cmd窗口，执行npm i（如果慢的话可以只用cnpm淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org） ...
chrome浏览器手动安装vue-devtools插件
wxl2454497677的博客
07-07 427
不用去github上下载什么的，也是从别人那里获取的资源，网盘分享出去下载安装就行了。 1.网盘提取Vue-Devtools 网盘地址：https://pan.baidu.com/s/1-VbWxZNH8rGA4fRzoBkTSA 提取码：mhdi 2.谷歌浏览器上输入 ‘chrome://extensions/’,并开启右上角的开发者模式。 3.选择提取文件里的chrome文件夹，面板就会出现 4.浏览器右上角出现vue的logo并且点亮，如果不是vue项目logo是灰色，F12就可以看到vue调试面
vue-devtools
03-27
在Chrome、Firefox等主流浏览器上安装Vue Devtools后，开发者可以在浏览器的开发者工具中找到Vue标签页。这个标签页分为以下几个部分： 1. **组件树**：展示了应用中的所有Vue组件及其嵌套关系。你可以查看每个组件...
chrome插件 vue-devtools离线安装包
04-27
Chrome插件Vue DevTools是Vue.js开发过程中不可或缺的工具，它为开发者提供了一套强大的调试功能，如实时查看组件状态、检测性能、修改数据等。 Vue Devtools 5.3.3 版本是该插件的一个稳定版本，可以从GitHub上...
Chrome 安装Vue插件vue-devtools
06-24
开箱即用 加压包，找到shells下的chrome，再打开谷歌浏览器的扩展程序选中chrome
vue-devtools-5.1.1
12-29
10. **安装与使用**：Vue DevTools通常通过Chrome或Firefox的浏览器扩展程序进行安装。在开发者模式下加载解压后的`vue-devtools-5.1.1`文件夹，然后在开发Vue应用时启用该扩展，即可在浏览器的开发者工具中看到Vue ...
vue-devtools 具体使用配置详情
万一火了的博客
02-07 1万+
目录vue-devtools 具体使用配置详情安装chrome浏览器firefox浏览器electron-开发启用配置devtools使用组件结构、组件实时数据、查看DOM、打开组件到编辑器vuex 历史记录事件发生历史记录路由发生历史记录组件性能监测组件性能查看 组件使用次数 vue-devtools 具体使用配置详情 vue-devtools 是vue开发者常用的开发工具，方便跟踪实时数据、组...
前端同学必备：教你如何安装、使用Chrome的vue-devtools插件
04-04 4920
Vue-devtools是一个Chrome浏览器插件，它是一个浏览器调试工具，用于开发Vue.js应用程序。它可以用于Vue.js应用程序的调试，可以更好地了解应用程序的结构和状态，以及帮助快速修复代码错误。
vue-tools使用
qq_37401976的博客
10-30 3027
vue-tools使用 1.到GitHub上下载 git clone https://github.com/vuejs/vue-devtools 2.安装依赖和打包 进入vue-devtools目录 安装依赖 npm install （失败的话，可以设置npm镜像） npm config set registry https://registry.npm.taobao.org 打包 npm run build 在vue-devtools文件夹下：shells>chrome>man
【Vue】全家桶之vue-devtools
指错||纠正||建议||水评+点赞&&评论&&关注&&转发，在这里你大概率会有所收获
08-08 7686
Vue Devtools 是 Vue 官方发布的调试浏览器插件，可以安装在 Chrome 和 Firefox 等浏览器上，直接内嵌在开发者工具中，使用体验流畅。Vue Devtools 由 Vue.js 核心团队成员 Guillaume Chau 和 Evan You 开发。
Chrome（谷歌浏览器）安装Vue插件vue-devtools（图文详细教程）
小钻风的博客
03-12 4万+
使用Vue开发项目时，常会用到一款谷歌浏览器插件，vue-devtools 安装成功后，运行本地Vue项目，打开浏览器控制台就如下： 其中可以便捷的查看vueX的数据以及组件结构等，非常方便， 安装步骤如下： 1、首先给大家提供一个git地址，虽然官网也有地址(https://github.com/vuejs/vue-devtools.git)，我认为不太好用 给大家提供另一个git地址： https://gitee.com/zhang_banglong/vue-devtools.git 打开里面就如
chrome中安装扩展程序：vue-devtools & React Developer Tools & 沙拉查词 & 网页截图
qq_39460057的博客
04-26 1790
沙拉查询使用超级方便，选择要查询的单词，自动跳出图标，点击图标即可查询。在“设置”->扩展程序中显示已安装的chrome插件。三、网页截图 webpage Screenshot。
给chrome安装vue插件
weixin_43892549的博客
01-23 896
五、打开，找到extensions文件夹，找到manifest.json，并编辑。四、输入chrome://version，复制个人资料路径。六、把"persistent": false改成true。二、解压缩，把文件移入设置——扩展程序的列表当中。七、点击“详情”，打开“允许访问文件地址”点击“推荐下载”选项。
mac 安装vue-devtools
12-10
以下是在Mac上安装vue-devtools的步骤： 1.首先，确保你已经安装了Node.js和npm。如果没有，请先安装它们。 2.打开终端并输入以下命令来全局安装vue-cli： ```shell npm install -g vue-cli ``` 3.接下来，输入...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值