谷歌装vue拓展

1,在百度网盘中下载压缩包,网盘地址:https://pan.baidu.com/s/1i6UdvCD,密码:nvfe ( 自己已保存文件 )

2,将压缩包解压到F盘,F:\chromeVue插件

3,复制文件地址,F:\chromeVue插件\vue-devtools-master

4,打开cmd命令,进入F盘,然后进入到vue-devtools-master文件中,命令:cd  F:\chromeVue插件\vue-devtools-master

5,在npm中执行命令,(我这边安装了镜像,所以是cnpm)

6,执行 cnpm install 

7,执行 cnpm run build. 

8,在vue-devtools-master\shells\chrome里将manifest.json文件打开,找到background中的“persistent”,改为true

9,打开你的谷歌浏览器,在更多工具中点击扩展程序,然后在出现的页面中勾选开发者模式,点击加载你的解压好的包,选择F:\chromeVue插件\vue-devtools-master\shells下的chrome,如图:

(或者把chrome文件夹整个拉到拓展页面中)

技术分享图片

 

 

10,关闭浏览器, 重新运行项目,打开chrome的开发者模式F12,就会看到vue扩展,如图

技术分享图片

### 关于 Vue 浏览器扩展 Vue 社区提供了多种工具来帮助开发者调试和优化基于 Vue 的应用程序。以下是几个常见的 Vue 浏览器扩展及其功能描述: #### 1. **Vue DevTools** Vue DevTools 是官方推荐的浏览器扩展,用于调试 Vue 应用程序。它支持 Vue 2 和 Vue 3,并提供以下主要功能: - 查看组件树结构以及其状态。 - 实时监控 Vuex 或 Pinia 中的状态变化。 - 调试路由信息(如果使用 Vue Router)。 - 支持性能分析工具以检测渲染瓶颈。 安装方法如下: 对于 Chrome 用户,可以通过 [Chrome Web Store](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) 安装最新版本[^4];而对于 Firefox 用户,则可以从 [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/) 获取相应插件[^5]。 #### 2. **Vite Plugin Vue Dev Tools Support** 如果你正在使用 Vite 构建工具开发项目,可能还需要额外配置以确保 Vue DevTools 正常工作。通常情况下,在 `vite.config.ts` 文件中添加必要的插件即可完成设置。例如: ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [ vue(), ], }) ``` 值得注意的是,某些较新的框架组合可能会要求特定依赖项才能激活完整的 dev tools 功能集。因此建议查阅相关文档确认兼容性问题[^6]。 #### 配置路径别名解决提示 当遇到类似于无法解析 "@" 符号作为 src 目录快捷方式的问题时,可参照下面的方法修改 vite 配置文件内容实现映射处理[^7]: ```javascript resolve: { alias: [{ find: "@", replacement: path.resolve(__dirname, "./src"), }] } ``` ### 总结 综上所述,目前最广泛使用的 Vue 浏览器扩展仍然是由核心团队维护和支持的 Vue DevTools 。无论是传统Webpack构建还是现代化Vite环境都能很好地集成该工具来进行高效的应用诊断与调优操作。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值