安装Vue Devtools插件成功后使用提示Vue.js not detected

本文解决了一个常见问题:VueDevtools插件在某些页面上检测不到Vue.js,导致图标灰色不可用。通过调整插件manifest.json中的persistent参数,使插件在所有页面上都能正常工作。

问题:

装完Vue Devtools,想用来查看用vue.js写的页面,然而却发现图标灰色,无法使用,提示检测不到Vue.js。

What??? 我如果没使用Vue.js页面怎么可能显示出数据??

然后另一边我正在写博客,在Markdown编辑页面上,它就给我亮了起来。
在这里插入图片描述
果然一看,这不又能好好用了吗阿喂,插件好用着呢!
在这里插入图片描述

解决?:

爬了很多文,最后通过修改插件目录下manifest.json后成功使用。
路径我就直接通过这个插件的ID,一长串直接电脑上搜索到的它的安装路径。
在这里插入图片描述
其实一般就在\AppData\Local\Google\Chrome\User Data\Default\Extensions\目录下找到相应的插件,但都是一大串英文,所以还是用搜索方便。
然后把false改成true,保存后确实可以使用插件了。在这里插入图片描述


以往问题解决我就洗洗睡了,但这次我打算做个好奇BB,Why?
为什么改成true就好用了?没改前不是也能使用吗,只是我自己的页面不能用,别的我也没去验证过。

于是我又去爬文,看看这个设置到底是何作用。

后续:

又爬了些文,推荐这位博主:
http://www.cnblogs.com/ligerleng/p/gmail_assist_1.html

关于这个persistent参数,博主这么说道:
persistent为true时,在background字段中指出的js脚本将持续运行在后台,而若persistent为false,则这些脚本将只在事件活动时运行,事件不活动时就会释放其占有的内存等资源。

他的这篇文章更好地讲述了Chrome扩展中脚本的运行机制和通信方式:
http://www.cnblogs.com/ligerleng/p/gmail_assist_2.html
其中有段关于backgroud的生存周期中也提到。
在这里插入图片描述
更多可以去看这位博主的文。

结论:

考虑到个人的使用率和使用场景,我又去把persistent改为了false。
其实原本我的一个很简单的页面为何不能使用Vue Devtools,是因为我当时是在打开这个页面后装的插件,我的页面根本就不在它的生存周期中。而我现在正在写博文的页面,也因为长时间没有“活动”,图标现在已经变灰色了,刷新下页面,立马又可以使用了。

ps :
如果图标亮但不能调试并且提示:
Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author.
是因为你页面引用的vue是压缩版本的,默认会关闭调试,要引入vue.js。

另外种方法是在或者在代码的主文件中配置vue的环境:
Vue.config.devtools = true;
(该方法没有亲测)

### 解决 Vue Devtools 插件无法检测到 Vue.js 的方法 当使用 Vue Devtools 插件时,如果遇到插件无法检测到 Vue.js提示 `Vue.js not detected` 的问题,可以尝试以下几种解决方法: 1. **检查 Vue 版本是否为开发版** 如果页面中引用的是压缩版本的 Vue(例如 `vue.min.js`),Vue 默认会关闭调试功能。需要将压缩版本替换为开发版本的 Vue(例如 `vue.js`)。 例如: ```html <!-- 改用开发版本 --> <script src="https://cdn.bootcss.com/vue/2.5.2/vue.js"></script> ``` 这样可以让 Vue Devtools 正常检测到 Vue 实例 [^4]。 2. **修改插件的 `manifest.json` 文件** 找到 Vue Devtools 插件安装目录,打开 `manifest.json` 文件,将其中的 `"persistent": false` 修改为 `"persistent": true`。保存后重启浏览器即可。 插件安装路径通常类似于: - Chrome 浏览器:`C:\Users\用户名\AppData\Local\Google\Chrome\User Data\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd\版本号_0` - Edge 浏览器:`C:\Users\用户名\AppData\Local\Microsoft\Edge\User Data\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd\版本号_0` 修改完成后,打开 Vue 项目时插件图标应该会变为正常状态,表示可以正常使用 [^3]。 3. **启用 Vue Devtools 调试功能** 在 Vue 项目的入口文件中,显式地设置 `Vue.config.devtools = true`,以确保调试功能被启用。例如: ```javascript // main.js 或 index.js import Vue from 'vue' Vue.config.devtools = true new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) ``` 压缩版本的 Vue 默认关闭了调试功能,而开发版本默认开启。因此,在某些情况下,即使使用了开发版本,也需要手动开启此配置 [^5]。 4. **避免 CDN 引入导致的问题** 如果在项目中通过 CDN 方式引入 Vue,并且使用了 Webpack 的 `externals` 配置来排除 Vue 模块,则可能导致 Vue Devtools 无法正确识别 Vue 实例。建议在开发环境中注释掉 CDN 引入和 `externals` 配置,仅在打包时恢复这些设置。例如: ```javascript // webpack.config.js externals: { // 开发时注释以下行,打包前取消注释 // 'vue': 'Vue', // 'vue-router': 'VueRouter' } ``` 这样可以确保开发环境下的 Vue 实例能够被正确检测到 [^1]。 5. **重新安装或更新插件** 如果以上方法无效,可以尝试卸载并重新安装 Vue Devtools 插件。确保从官方渠道获取最新版本,或者使用离线安装包进行安装。 6. **检查浏览器兼容性** 确保使用的浏览器支持 Vue Devtools 插件。目前主流的 Chrome 和 Edge 浏览器均支持该插件。同时,确认插件已正确加载并在浏览器的扩展管理界面中启用。 --- ###
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值