1. 程式人生 > >安裝Vue Devtools外掛成功後使用提示Vue.js not detected

安裝Vue Devtools外掛成功後使用提示Vue.js not detected

問題:

裝完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;
(該方法沒有親測)