VUE 浏览器调试 devTool 插件安装

👋 热爱编程的小伙伴，欢迎来到我的编程技术分享公众号！在这里我会分享编程技巧，实战经验，技术干货，还有各种有趣的编程话题。希望大家能够在这里找到有价值的内容，共同进步！

新年好，见字如面。时间如白驹过隙，转眼又是一年。今天借机会说说VUE调试插件的问题。也是困住新手的一步。最近测试了个VUE2的项目，先得让项目跑起来吧，再接着就需要调试吧，看看状态管理的数据是否到位。就当我在测试的时候发现浏览器中devTool工具失效了，还挺仗义的给我报了个错，截图如下：

迁移提示：检测到您的 Vue2 项目里安装了 Vue DevTools v7。v7仅支持Vue3，无法正常工作。同时支持Vue2与Vue3的旧版Chrome 扩展已迁移到此处。Firefox 的旧版扩展已迁移到此处。请仅为您的 Vue2应用安装并启用旧版。如果您仍在使用v5，也可在此处安装。

我记得在半年前 Vue DevTools v7 调试工具同时支持 Vue2 和 Vue3，因为我删除了一个旧的版本（比较低的版本）。嗯，现在只能从新将版本降低使用。这个就是上面提到的怎么有效安装 Vue DevTools 这个插件？

下载安装

首先找到相关的插件下载，然后开启浏览器开发模式，扩展程序，管理扩展程序，将下载好的插件加载到浏览器中即可。加载完成图如下：Google中如果出现两个不同版本的调试工具需要关闭一个，避免冲突。

上图 Chrome Google 浏览器安装插件完成为例

上图 Firefox 浏览器安装插件完成为例

注意：但是对于刚开始接触的同学来说这种找资源下载的方式安装效率非常低，存在什么科学上网，而且下载总会出现一些意想不到的内容，内容参差不齐没有办法保证，下面就说说第二种安装插件的方式如下，这里就根据常用主流浏览器为例安装。

Google 浏览器

下面是以谷歌浏览器为例进行安装，步骤如下，目前最低的版本是6.0.8根据自己的需求去降低插件的版本。

检测插件：

Firefox 浏览器

注意：如果没有安装插件到浏览器出现的就是安装插件到Firefox浏览器，我的这个电脑浏览器插件已经安装完成，所以显示的就是移除。相比于Google浏览器Firefox安装似乎方便很多。

最后：在实际开发中为了检测准确的结果如：渲染效果，组件，数据共享，通常开发是会安装多个浏览器进行测试。以常见的主流浏览器为准。

小彩蛋

Promise

const newYearWish = newPromise((resolve) => {const wish = {health: 100,happiness: Infinity,love: true,success: () =>Math.random() > 0.5 ? '大成功' : '小确幸',bugs: 0    };    resolve(wish);});newYearWish.then(wish => {console.log(`🎆 新年愿望已加载：健康${wish.health}%，幸福∞，爱情${wish.love}，bug数量${wish.bugs}`);});

Async/Await

asyncfunctionblessNewYear() {try {const year = 2026;const dreams = awaitPromise.all([            fetchHappiness(),            fetchHealth(),            fetchSuccess()        ]);console.log(`✨ ${year}年，愿你的`);console.log(`💝 生活如async函数般简洁优雅`);console.log(`🌈 爱情像await一样值得等待`);console.log(`🚀 事业如Promise.all般全面开花`);    } catch (error) {console.log("但即使有bug，也能优雅地catch并继续前行");    }}// 调用祝福函数blessNewYear();

数组高阶函数

const wishes = ['新年快乐','万事如意', '身体健康','事业有成','爱情甜蜜'];const blessedWishes = wishes    .map(wish =>`🎁 ${wish}`)    .filter(wish =>Math.random() > 0.3)    .reduce((acc, wish) => acc + wish + '；', '')    .concat('愿你的2026年比2025年更加精彩！');console.log(blessedWishes);

面向对象

classNewYearWish{constructor(name) {this.name = name;this.year = 2026;this.wishes = {health: '龙马精神',career: '蒸蒸日上',love: '甜甜蜜蜜',life: '幸福美满'        };    }    generate() {return`亲爱的${this.name}：${this.year}年的钟声即将敲响，愿你的代码如诗歌般优美，愿你的bug如雪花般消融，愿你的成功如繁星般闪耀，愿你的幸福如循环般无限。新年快乐！愿${Object.entries(this.wishes)    .map(([key, value]) => `你的${key}都${value}`)    .join('，\n')}        `;    }}const myWish = new NewYearWish('程序员朋友');console.log(myWish.generate());

定时器

functionfireworksBlessing() {const blessings = ['🧧', '🎆', '🎊', '🎉', '✨', '💫'];const interval = setInterval(() => {const randomBlessing = blessings[Math.floor(Math.random() * blessings.length)];console.log(`${randomBlessing} 新年快乐 ${randomBlessing}`);    }, 1000);    setTimeout(() => {        clearInterval(interval);console.log('🌟 愿你的2026年如烟花般绚烂！');    }, 5000);}fireworksBlessing();

模板字符串

const name = '亲爱的程序员';const year = 2026;const blessing = `┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓┃    ${year}新年祝福     ┃┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛致 ${name}：愿你的${year}年，如JavaScript般灵活多变，如HTML般结构清晰，如CSS般样式精彩，如框架般稳定可靠。愿你的每一天都：console.log('Hello Happiness');alert('Success is coming');confirm('Love is true');新年快乐！愿代码与你同在，美好与你同行！`;console.log(blessing);

个人观点，仅供参考，非常感谢各位朋友们的支持与关注！

如果觉得这期文章对你有帮助，请不吝点赞、在看、分享给身边更多的朋友。如果你有任何疑问或建议，欢迎在评论区留言交流。