?? 熱愛編程的小伙伴，歡迎來到我的編程技術(shù)分享公眾號(hào)！在這里我會(huì)分享編程技巧，實(shí)戰(zhàn)經(jīng)驗(yàn)，技術(shù)干貨，還有各種有趣的編程話題。希望大家能夠在這里找到有價(jià)值的內(nèi)容，共同進(jìn)步！

新年好，見字如面。時(shí)間如白駒過隙，轉(zhuǎn)眼又是一年。今天借機(jī)會(huì)說說VUE調(diào)試插件的問題。也是困住新手的一步。最近測(cè)試了個(gè)VUE2的項(xiàng)目，先得讓項(xiàng)目跑起來吧，再接著就需要調(diào)試吧，看看狀態(tài)管理的數(shù)據(jù)是否到位。就當(dāng)我在測(cè)試的時(shí)候發(fā)現(xiàn)瀏覽器中devTool工具失效了，還挺仗義的給我報(bào)了個(gè)錯(cuò)，截圖如下：

遷移提示：檢測(cè)到您的 Vue2 項(xiàng)目里安裝了 Vue DevTools v7。v7僅支持Vue3，無法正常工作。同時(shí)支持Vue2與Vue3的舊版Chrome 擴(kuò)展已遷移到此處。Firefox 的舊版擴(kuò)展已遷移到此處。請(qǐng)僅為您的 Vue2應(yīng)用安裝并啟用舊版。如果您仍在使用v5，也可在此處安裝。

我記得在半年前 Vue DevTools v7 調(diào)試工具同時(shí)支持 Vue2 和 Vue3，因?yàn)槲覄h除了一個(gè)舊的版本（比較低的版本）。嗯，現(xiàn)在只能從新將版本降低使用。這個(gè)就是上面提到的怎么有效安裝 Vue DevTools 這個(gè)插件？

下載安裝

首先找到相關(guān)的插件下載，然后開啟瀏覽器開發(fā)模式，擴(kuò)展程序，管理擴(kuò)展程序，將下載好的插件加載到瀏覽器中即可。加載完成圖如下：Google中如果出現(xiàn)兩個(gè)不同版本的調(diào)試工具需要關(guān)閉一個(gè)，避免沖突。

上圖 Chrome Google?瀏覽器安裝插件完成為例

上圖 Firefox?瀏覽器安裝插件完成為例

注意：但是對(duì)于剛開始接觸的同學(xué)來說這種找資源下載的方式安裝效率非常低，存在什么科學(xué)上網(wǎng)，而且下載總會(huì)出現(xiàn)一些意想不到的內(nèi)容，內(nèi)容參差不齊沒有辦法保證，下面就說說第二種安裝插件的方式如下，這里就根據(jù)常用主流瀏覽器為例安裝。

Google 瀏覽器

下面是以谷歌瀏覽器為例進(jìn)行安裝，步驟如下，目前最低的版本是6.0.8根據(jù)自己的需求去降低插件的版本。

檢測(cè)插件：

Firefox 瀏覽器

注意：如果沒有安裝插件到瀏覽器出現(xiàn)的就是安裝插件到Firefox瀏覽器，我的這個(gè)電腦瀏覽器插件已經(jīng)安裝完成，所以顯示的就是移除。相比于Google瀏覽器Firefox安裝似乎方便很多。

最后：在實(shí)際開發(fā)中為了檢測(cè)準(zhǔn)確的結(jié)果如：渲染效果，組件，數(shù)據(jù)共享，通常開發(fā)是會(huì)安裝多個(gè)瀏覽器進(jìn)行測(cè)試。以常見的主流瀏覽器為準(zhǔn)。

小彩蛋

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數(shù)量${wish.bugs}`);});

Async/Await

asyncfunctionblessNewYear()?{try?{const?year =?2026;const?dreams =?awaitPromise.all([? ? ? ? ? ? fetchHappiness(),? ? ? ? ? ? fetchHealth(),? ? ? ? ? ? fetchSuccess()? ? ? ? ]);console.log(`??${year}年，愿你的`);console.log(`?? 生活如async函數(shù)般簡(jiǎn)潔優(yōu)雅`);console.log(`?? 愛情像await一樣值得等待`);console.log(`?? 事業(yè)如Promise.all般全面開花`);? ? }?catch?(error) {console.log("但即使有bug，也能優(yōu)雅地catch并繼續(xù)前行");? ? }}// 調(diào)用祝福函數(shù)blessNewYear();

數(shù)組高階函數(shù)

const?wishes = ['新年快樂','萬事如意',?'身體健康','事業(yè)有成','愛情甜蜜'];const?blessedWishes = wishes? ? .map(wish?=>`???${wish}`)? ? .filter(wish?=>Math.random() >?0.3)? ? .reduce((acc, wish) =>?acc + wish +?'；',?'')? ? .concat('愿你的2026年比2025年更加精彩！');console.log(blessedWishes);

面向?qū)ο?/span>

classNewYearWish{constructor(name) {this.name = name;this.year =?2026;this.wishes = {health:?'龍馬精神',career:?'蒸蒸日上',love:?'甜甜蜜蜜',life:?'幸福美滿'? ? ? ? };? ? }? ? generate() {return`親愛的${this.name}：${this.year}年的鐘聲即將敲響，愿你的代碼如詩歌般優(yōu)美，愿你的bug如雪花般消融，愿你的成功如繁星般閃耀，愿你的幸福如循環(huán)般無限。新年快樂！愿${Object.entries(this.wishes)? ? .map(([key, value]) =>?`你的${key}都${value}`)? ? .join('，\n')}? ? ? ? `;? ? }}const?myWish =?new?NewYearWish('程序員朋友');console.log(myWish.generate());

定時(shí)器

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般結(jié)構(gòu)清晰，如CSS般樣式精彩，如框架般穩(wěn)定可靠。愿你的每一天都：console.log('Hello Happiness');alert('Success is coming');confirm('Love is true');新年快樂！愿代碼與你同在，美好與你同行！`;console.log(blessing);

個(gè)人觀點(diǎn)，僅供參考，非常感謝各位朋友們的支持與關(guān)注！

如果覺得這期文章對(duì)你有幫助，請(qǐng)不吝點(diǎn)贊、在看、分享給身邊更多的朋友。如果你有任何疑問或建議，歡迎在評(píng)論區(qū)留言交流。